ページリンクを一度クリックするとナビゲーション/ハンバーガーアイコンが消えます

Question

私は1ページのスクロールウェブサイトをデザインしています。 780px（ハンバーガーアイコンが表示されているとき）の画面幅でナビゲーションバーからページリンクをクリックすると、ハンバーガーアイコンが消えます。私はページを更新しない限り、私はそれを取り戻すことができません。ナビゲーションバーは、ページリンクを1回クリックすると全画面幅で消えます。ハンバーガーのアイコンとトップナビゲーションを常に見守っていきたいと思います。 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

---

私は作業例を追加しました。私はより良いデザインのためにここでトグルを使用しませんでした。今、メニューも

$(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>​