Navigation/Hamburger-Symbol verschwindet, wenn der Seiten-Link einmal angeklickt wird

Question

Ich entwerfe eine einseitige Scroll-Website. Wenn ich bei einer Bildschirmbreite von weniger als 780 Pixel auf einen Seitenlink in der Navigationsleiste klicke (wenn das Hamburger-Symbol erscheint), verschwindet das Hamburger-Symbol. Ich kann es nicht zurückbekommen, wenn ich die Seite nicht aktualisiere. Die Navigationsleiste verschwindet ebenfalls bei voller Bildschirmbreite, nachdem Sie einmal auf einen Seitenlink geklickt haben. Ich möchte das Hamburger-Icon und die Top-Navigation jederzeit im Blick behalten. Das Javascript, das ich verwende, um das Vollbildmenü, das bei 780px angezeigt wird, zu reduzieren, verursacht dieses Problem, aber ich brauche es, oder das Menü verschwindet nicht, wenn auf einen Link geklickt wird. Danke an alle, die helfen können!

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

Sie müssen auch das Umschalten auf das Kontrollkästchen hinzuzufügen. Es ist eine jQuery-Funktion, die bestimmte Animationen und Stile verwendet.

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

EDIT

---

Ich habe ein funktionierendes Beispiel. Ich habe den Schalter hier nicht für ein besseres Design verwendet. Jetzt auch das Menü toggels mit dem Klick auf die Checkbox :-)

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