單擊頁面鏈接時導航/漢堡包圖標消失

Question

我正在設計一個單頁滾動網站。當我在屏幕寬度小於780px（當出現漢堡包圖標時）點擊導航欄中的頁面鏈接時，漢堡包圖標消失。除非刷新頁面，否則我無法恢復。點擊頁面鏈接一次後，導航欄也會以全屏寬度消失。我希望始終保持漢堡包圖標和頂部導航。我用來摺疊顯示在780px的全屏菜單的JavaScript導致了這個問題，但我需要它，或者當單擊鏈接時菜單不會消失。感謝任何能夠幫助的人！

$(document).ready(function() { 
 
    $('a').click(function() { 
 
     $('#menu').slideToggle(); 
 
    }); 
 
});

@media screen and (max-width: 780px) { 
 

 
    nav { 
 
     width: 100%; 
 
     margin: 0; 
 
     padding: 0; 
 
     position: relative; 
 
     left: 0; 
 
     display: block; 
 
     opacity: 1.0 !important; 
 
     filter: alpha(opacity=100); /* For IE8 and earlier */ 
 
    } 
 

 
    nav ul { 
 
     width: 100%; 
 
     margin: 0 auto; 
 
     padding: 0; 
 
     display: none; 
 
     float: none; 
 
    } 
 

 
    nav ul li { 
 
     font-size: 1.3em; 
 
     font-weight: normal; 
 
     line-height: 40px; 
 
     width: 100% !important; 
 
     margin: 0; 
 
     padding: 0; 
 
    } 
 

 
    nav ul li:nth-of-type(1) { margin-top: 20%; } 
 

 
    nav ul li:hover { background: #565758; } 
 
    
 
    nav ul li a { 
 
     color: white !important; 
 
     font-family: "Lato", sans-serif; 
 
     border-bottom: none !important; 
 
     display: inline-block; 
 
    } 
 

 
    nav ul li a.active-link { 
 
     color: white !important; 
 
     font-size: 1.3em; 
 
    } 
 

 
    nav ul li a:hover { 
 
     color: white; 
 
     width: 100%; 
 
    } 
 
     
 
    /*Display 'show menu' link*/ 
 
    .show-menu { 
 
     margin: 0 !important; 
 
     padding: 1em !important; 
 
     text-align: right; 
 
     display: block; 
 
     float: right; 
 
    } 
 

 
    /*Show menu when invisible checkbox is checked*/ 
 
    input[type=checkbox]:checked ~ #menu { background-color: #747475 !important; display: block; height: 100vh; } 
 
}​

<header> 
 
    <nav> 
 
     <label for="show-menu" class="show-menu"><img src="hamburger.png" alt="Hamburger Menu Icon" style="width: 15%;"></label> 
 
     <input type="checkbox" id="show-menu" role="button"> 
 
     <ul id="menu"> 
 
      <li><a href="#choco">HOME</a> 
 
      <li><a href="#about-page">ABOUT</a></li> 
 
      <li><a href="#portfolio-page">PORTFOLIO</a></li> 
 
      <li><a href="#contact.html">CONTACT</a></li> 
 
     </ul> 
 
    </nav> 
 
    <div id="logo"><img src="logo-grey.png" alt="Logo" style="max-width:100%; height:auto;"></div> 
 
</header>​

Answer 1

你需要切換添加到複選框爲好。它是一個jQuery函數，它使用特定的動畫和樣式。

$('#show-menu').click(function() { 
    $('#menu').slideToggle(); 
}); 

EDIT

---

我添加了一個工作示例。我沒有在這裏使用切換，以獲得更好的設計。現在的菜單也與複選框點擊toggels :-)

$(document).ready(function() { 
 
    $('a').click(function() { 
 
     $('#menu').slideToggle(); 
 
    }); 
 
    $('#show-menu').change(function() { 
 
     if(this.checked) 
 
     $('#menu').slideDown(); 
 
     else 
 
     $('#menu').slideUp(); 
 
    }); 
 
});

@media screen and (max-width: 780px) { 
 

 
    nav { 
 
     width: 100%; 
 
     margin: 0; 
 
     padding: 0; 
 
     position: relative; 
 
     left: 0; 
 
     display: block; 
 
     opacity: 1.0 !important; 
 
     filter: alpha(opacity=100); /* For IE8 and earlier */ 
 
    } 
 

 
    nav ul { 
 
     width: 100%; 
 
     margin: 0 auto; 
 
     padding: 0; 
 
     display: none; 
 
     float: none; 
 
    } 
 

 
    nav ul li { 
 
     font-size: 1.3em; 
 
     font-weight: normal; 
 
     line-height: 40px; 
 
     width: 100% !important; 
 
     margin: 0; 
 
     padding: 0; 
 
    } 
 

 
    nav ul li:nth-of-type(1) { margin-top: 20%; } 
 

 
    nav ul li:hover { background: #565758; } 
 
    
 
    nav ul li a { 
 
     color: white !important; 
 
     font-family: "Lato", sans-serif; 
 
     border-bottom: none !important; 
 
     display: inline-block; 
 
    } 
 

 
    nav ul li a.active-link { 
 
     color: white !important; 
 
     font-size: 1.3em; 
 
    } 
 

 
    nav ul li a:hover { 
 
     color: white; 
 
     width: 100%; 
 
    } 
 
     
 
    /*Display 'show menu' link*/ 
 
    .show-menu { 
 
     margin: 0 !important; 
 
     padding: 1em !important; 
 
     text-align: right; 
 
     display: block; 
 
     float: right; 
 
    } 
 

 
    /*Show menu when invisible checkbox is checked*/ 
 
    input[type=checkbox]:checked ~ #menu { background-color: #747475 !important; display: block; height: 100vh; } 
 
}​

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<header> 
 
    <nav> 
 
     <label for="show-menu" class="show-menu"><img src="hamburger.png" alt="Hamburger Menu Icon" style="width: 15%;"></label> 
 
     <input type="checkbox" id="show-menu" role="button"> 
 
     <ul id="menu"> 
 
      <li><a href="#choco">HOME</a> 
 
      <li><a href="#about-page">ABOUT</a></li> 
 
      <li><a href="#portfolio-page">PORTFOLIO</a></li> 
 
      <li><a href="#contact.html">CONTACT</a></li> 
 
     </ul> 
 
    </nav> 
 
    <div id="logo"><img src="logo-grey.png" alt="Logo" style="max-width:100%; height:auto;"></div> 
 
</header>​