Js yardım! | Cevap #1997

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>