側面導航的菜單圖標

菜單圖標在點擊時打開側面導航，圖標變成「X」。第二次點擊時，我希望它關閉側面導航並返回到正常的菜單圖標。側面導航的菜單圖標

我有下面的代碼：

<!DOCTYPE html> 
<html> 
<head> 
<style> 
.sidenav { 
    height: 100%; 
    width: 0; 
    position: fixed; 
    z-index: 1; 
    top: 0; 
    left: 0; 
    background-color: #111; 
    overflow-x: hidden; 
    transition: 0.5s; 
    padding-top: 60px; 
} 

.sidenav a { 
    padding: 8px 8px 8px 32px; 
    text-decoration: none; 
    font-size: 25px; 
    color: #818181; 
    display: block; 
    transition: 0.3s; 
} 

.sidenav a:hover { 
    color: #f1f1f1; 
} 

.sidenav .closebtn { 
    position: absolute; 
    top: 0; 
    right: 25px; 
    font-size: 36px; 
    margin-left: 50px; 
} 

#main { 
    transition: margin-left .5s; 
    padding: 16px; 
} 

@media screen and (max-height: 450px) { 
    .sidenav {padding-top: 15px;} 
    .sidenav a {font-size: 18px;} 
} 

.container { 
    display: inline-block; 
    cursor: pointer; 
} 

.bar1, .bar2, .bar3 { 
    width: 35px; 
    height: 5px; 
    background-color: #333; 
    margin: 6px 0; 
    transition: 0.4s; 
} 

.change .bar1 { 
    -webkit-transform: rotate(-45deg) translate(-9px, 6px) ; 
    transform: rotate(-45deg) translate(-9px, 6px) ; 
} 

.change .bar2 {opacity: 0;} 

.change .bar3 { 
    -webkit-transform: rotate(45deg) translate(-8px, -8px) ; 
    transform: rotate(45deg) translate(-8px, -8px) ; 
} 

</style> 

</head> 
<body> 

<div id="mySidenav" class="sidenav"> 
    <a href="#">About</a> 
    <a href="#">Services</a> 
    <a href="#">Clients</a> 
    <a href="#">Contact</a> 
</div> 

<div id="main"> 
    <div class="container" style="font-size:30px;cursor:pointer" onclick="openNav(); myFunction(this)"> 
     <div class="bar1"></div> 
     <div class="bar2"></div> 
     <div class="bar3"></div> 
</div> 
</div> 

<script> 
function openNav() { 
    document.getElementById("mySidenav").style.width = "250px"; 
    document.getElementById("main").style.marginLeft = "250px"; 
} 

function closeNav() { 
    document.getElementById("mySidenav").style.width = "0"; 
    document.getElementById("main").style.marginLeft= "0"; 
} 

function myFunction(x) { 
    x.classList.toggle("change"); 
} 


</script> 

</body> 
</html>

目前，它打開側導航不錯，但我不知道如何告訴它關閉的第二次點擊，或者側面導航把我closeNav（） funtion。

任何幫助，將不勝感激。

來源

2017-09-28 Vera

你可以使用jQuery的'toggleClass（）'？ – ProEvilz

我不喜歡加入JQuery的，如果它不是已在使用...你可以只通過檢查菜單的狀態做到這一點。

<div id="mySidenav" class="sidenav"> 
    <a href="#">About</a> 
    <a href="#">Services</a> 
    <a href="#">Clients</a> 
    <a href="#">Contact</a> 
</div> 

<div id="main"> 
    <div class="container" style="font-size:30px;cursor:pointer" onclick="toggleMenu(this)"> 
     <div class="bar1"></div> 
     <div class="bar2"></div> 
     <div class="bar3"></div> 
</div> 
</div> 

<script> 
function openNav() { 
    document.getElementById("mySidenav").style.width = "250px"; 
    document.getElementById("main").style.marginLeft = "250px"; 
} 

function closeNav() { 
    document.getElementById("mySidenav").style.width = "0"; 
    document.getElementById("main").style.marginLeft= "0"; 
} 

function toggleMenu(x) { 
    x.classList.toggle("change"); 
    if(document.getElementById("mySidenav").style.width > "1px"){ 
    closeNav(); 
    } else { 
    openNav(); 
    } 
} 
</script>

來源

2017-09-28 16:05:20

它工作完美！謝謝你sooooooo了！我對js很陌生，一切都像魔術一樣......真的很感激它花時間回答這樣一個基本問題。 – Vera

@Vera很高興我能幫到你！ JS是一種偉大的邏輯語言，它可以爲許多其他人鋪平道路。如果我的文章幫助你，如果你將它標記爲答案，我會很感激。 –

您可以使用類切換。一個類可以是關閉x圖標的菜單，當您切換其他類時，您可以指定相反的。

document.getElementById('menu').addEventListener('click', function() { 
 
    if (this.classList.contains('open')) { 
 
    this.classList.remove('open'); 
 
    } else { 
 
    this.classList.add('open'); 
 
    } 
 
});

#menu { 
 
background:red; 
 
width:100px; 
 
height:200px; 
 
} 
 

 

 
#menu.open { 
 
width:250px; 
 
background:blue; 
 
}

<div id="menu"> 
 
<p>click me!</p> 
 
</div>

來源

2017-09-28 16:03:33 ProEvilz

側面導航的菜單圖標

回答

相關問題