v2.5.2
Giriş yap

Js yardım!

qran7
682 defa görüntülendi
5

Merhaba arkadaşlar şöyle bir js kodum var..

function openNav() {
  document.getElementById("mobilNav").style.width = "300px";
}
function closeNav() {
  document.getElementById("mobilNav").style.width = "0";
}

openNav() ve closeNav() biri açmak için diğeri kapatmak için kullandığım kod, Bunu nasıl tek tıkla aç kapa yaptırabilirim? var mı bilen?

javascript
Cevap yaz
Cevaplar (5)
haciyeff
1297 gün önce
function toggleNav(){
    const navElement = document.getElementById("mobilNav");
    navElement.classList.toggle("active");
}
0
#002037
erdem
1309 gün önce

Anladığım kadarıyla açılır kapanır nav yapmak istiyorsun sana 2 farlı nav yaptım. İlki en basit yol active clası belirleyip onu atıyorsun. 2.si ise display none vererek oluyor.
Eğer ben herşey sabit dursun soldan sağa 300 width açılsın dersen onuda jqueryle slideToggle() fonksiyonu var basitçe yapabilirsin. slideToggle(fast) dersen hızlı slideToggle(slow) dersen
de yavaş açılır



<!DOCTYPE html>
<html>
<head>

<style type="text/css">
	div, button {
		font-family: roboto;
	}
	

	/* myDivLeft*/
	#navIdLeft {
		background-color:#ee6f57; 
		padding:10px;
		margin-top: 10px;
		width: 300px;
		position: absolute;
		left: -320px;
		border-radius: .25rem;
		transition: all .5s;
	}

	#navIdLeft.active {
		left: 10px;
		transition: all .5s;
	}


	.myDivLeft ul li {
		list-style: none;
		padding-bottom: 5px;
		margin-bottom: 10px;		
	}

	.myDivLeft li a {
		text-decoration: none;
		color: #222;
		border-radius: .25rem;
	}

	.buttonLeft {
		background-color: #ee6f57;
		padding: 10px 15px;
		border-radius: .25rem;
		border: 1px solid #ee6f57;
		color: #fff;
		cursor: pointer;
	}



	/* myDiv*/

	.myDiv ul li {
		list-style: none;
		padding-bottom: 5px;
		background-color: #eeed;
		margin-bottom: 10px;		
	}

	.myDiv li a {
		text-decoration: none;
		color: #222;
		padding: 5px;
		border-radius: .25rem;
	}

	.button {
		background-color: #ee6f57;
		padding: 10px 15px;
		border-radius: .25rem;
		border: 1px solid #ee6f57;
		color: #fff;
		cursor: pointer;
	}

	.myDiv {
		width: 300px;
		margin: 0 auto;
		margin-top: 10%;
	}

	.myDiv .button{
		text-align: center;
	}

	#navId {
		background-color: #eee;
		color:#222;
		width: 300px;
		padding: 10px;
		margin-top: 20px;
		border-radius: .25rem;		
	}


</style>

	<script type="text/javascript">

		function openNavLeft() {
			document.getElementById("navIdLeft").classList.toggle("active"); 
		}



		function openNav() {
		  var x = document.getElementById("navId");
		  if (x.style.display === "none") {
		    x.style.display = "block";
		  } else {
		    x.style.display = "none";
		  }
		}

	</script>


	<title>Açılır Nav</title>
</head>
<body>

<div class="myDivLeft">
	<button class="buttonLeft" onclick="openNavLeft();">Tıkla</button>
	<div id="navIdLeft">
		<ul>
			<li><a href="#">Anasayfa</a></li>
			<li><a href="#">Hakkımızda</a></li>
			<li><a href="#">İletişim</a></li>
			<li><a href="#">SSS</a></li>
		</ul>
	</div>
</div>

<div class="myDiv">
	<button class="button" onclick="openNav();">Tıkla</button>
	<div id="navId">
		<ul>
			<li><a href="#">Anasayfa</a></li>
			<li><a href="#">Hakkımızda</a></li>
			<li><a href="#">İletişim</a></li>
			<li><a href="#">SSS</a></li>
		</ul>
	</div>
</div>



</body>
</html>
0
#001997
qplot
1309 gün önce

<button>Toggle</button>
<p>
This is the paragraph to end all paragraphs. You
should feel <em>lucky</em> to have seen such a paragraph in
your life. Congratulations!
</p>

<script>
$( "button" ).click(function() {
$( "p" ).slideToggle( "slow" );
});
</script>

0
#001995
sefa
1313 gün önce
let nav = document.getElementById("mobilNav");

let c = true;
function change(){
    if(c == true){
        //göster
        nav.style.display = "block";
    }else{
        //gizle
        nav.style.display = "none";
    }
    c = !c;
}
0
#001987