Js yardım!

qran7 1634 gün önce

776 defa görüntülendi

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

Soru hatalı mı? 👎

Eğer sorunun kurallara aykırı olduğunu düşünüyorsanız lütfen bize bildirin!

Spam olarak işaretle

Cevap yaz

הההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההה
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Cevaplar (5)

haciyeff

1618 gün önce

function toggleNav(){
    const navElement = document.getElementById("mobilNav");
    navElement.classList.toggle("active");
}

#002037

erdem

1630 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>

#001997

qplot

1630 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>

#001995

lirik

1632 gün önce

burayı incelermisin kardeş
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_toggle_class_crossbrowser

#001989

sefa

1634 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;
}

#001987