Ich kann kein reaktionsfähiges Menü einstellen

Question

Ich möchte ein reaktionsfähiges Menü entwerfen. Eigentlich ist alles in Ordnung. In der Tat weiß ich, was das Problem ist. Aber ich kann es nicht reparieren. Auch sind die Codes hier: Die Codes sind hier: js fiddle

Erste Bedingung wie folgt aus:

Und zweite Bedingung wie folgt aus:

Wenn ich auf zum Menü Kein Problem hier, es funktioniert. Aber wenn ich nur einmal benutze und nachdem ich die Größe des Bildschirms ändere, ist das Menü verloren, kommt nicht wieder. Ich denke, das Problem ist, ich öffne das Menü, nachdem ich geschlossen habe. Hier mache ich Anzeige: keine; Aber ich kann es nicht reparieren.

HTML:

<header> 
     <section id="menuBar"><h1> MENU </h1> <i class="fa fa-bars" aria-hidden="true"></i> </section> 
     <nav> 
      <ul> 
       <li><a href="#"> Hakkımda </a></li> 
       <li><a href="#"> Portfolyo </a></li> 
       <li><a href="#"> İletişim </a></li> 
      </ul> 
     </nav> 
</header> 

CSS:

header{ 
    background-color: #333; 
    width: 100%; 
    height: 50px; 
    box-shadow: 0 0 15px; 
    z-index: 555555555555555; 
    position: relative; 
} 

#menuBar{ 
    display: none; 
} 

header nav{ 
    text-align: center; 
} 

header nav ul{ 
    display: inline-block; 
    list-style-type:none; 
} 

header nav ul li{ 
    float: left; 
    padding: 15px; 
} 

header nav ul li a{ 
    color: white; 
    text-decoration: none; 
    font-family: roboto; 
    font-size: 17px; 
} 

@media (max-width:768px){ 

    section#menuBar{ 
     color: white; 
     font-family: roboto; 
     font-size: 20px; 
     display: block; 
     cursor: pointer; 

    } 

    section#menuBar h1{ 
     line-height: 50px; 
     display: inline-block; 
     margin-left: 25px; 
    } 

    section#menuBar i{ 
     float: right; 
     margin-top: 15px; 
     margin-right: 25px; 
    } 

    header nav{ 

     height: 152px; 
     width: 100%; 
     position: absolute; 
     display: none; 
     background-color: #333; 
    } 

    header nav ul{ 
     width: 100%; 
     margin-left: -45px; 
     position: relative; 

    } 

    header nav ul li{ 
     float: none; 
     padding-left: 0; 
     padding-top: 25px; 
     text-align: center; 
     display: block; 
     border-bottom:1px solid whitesmoke; 
     padding-bottom: 7px; 
     background-color: #333; 
     z-index: 444; 
    } 

    header nav ul li a{ 
     color: white; 

    } 

JQUERY:

$(function(){ 

    var width = $(window).outerWidth(); 
    $('#menuBar').click(function(){ 
     $('header nav').slideToggle(); 

     $('header nav ul li').hover(function(){ 
      $(this).addClass('aktif1'); 
      $('a',this).addClass('aktif2'); 
     },function(){ 
      $(this).removeClass('aktif1'); 
      $('a',this).removeClass('aktif2'); 

     }); 
    }); 
}); 

Answer 1

Eine Lösung kann sein, dass Sie ein bind Ereignis auf der Fenstergröße ändern, und überprüfen Sie den CSS-Stützpunkt von 768px

$(window).resize(function() { 
    if($(window).outerWidth() > 767) 
     $('header nav').show(); 
    else 
     $('header nav').hide(); 
}); 

auf der Breite des Fensters Basierend, setzen die CSS-Eigenschaften display.

Answer 2

Try this:

$(window).resize(function() { 
    if(!$('#menuBar').is(':visible') && !$('header nav').is(':visible')) { 
    $('header nav').show(); 
    } 
}); 

Es prüft, ob die menuBar sichtbar sind und wenn das Menü selbst sichtbar ist, wenn beide nicht der Fall ist, ist das Fenster größer als der Haltepunkt in der CSS-Datei und es wird gezeigt werden.