Responsive Navigationsleiste mit Fenstergrößenanpassung

Question

Haben Sie Vorschläge zur Verwendung eines effizienten Ansatzes zur Fenstergrößenanpassung? Ich mache eine responsive Navigationsleiste. Bei weniger als 480 Pixeln, indem Sie die Navigation auf "Minimieren" umschalten - die Anzeige wird auf "Versteckt" gesetzt. Wenn ich den Bildschirm dann auf größer als 480 anwachsen lasse, bleibt die Navigation in ihrem versteckten Zustand. Um das Problem zu beheben, habe ich eine Fenstergrößenanpassung hinzugefügt. Wenn der Bildschirm größer als 480 ist, wird die Liste auf den Anfangswert zurückgesetzt. Ich habe das Gefühl, dass dies stark verbessert werden könnte und viel Leistung verschwendet.

<div class = "dropdown"> 
     <div class = "icon"> 
      <img src ="menu.png" class = "text" align = "right"> 
     </div> 
     <ul class = "header-li"> 
      <li><a href ="#1">1</a></li> 
      <li><a href ="#2">2</a></li> 
      <li><a href="#3">3</a></li> 
      <li><a href="#4">4</a></li> 
     </ul> 
    </div> 


$(".icon").click(function(){ 
    $(".header-li", ".dropdown").slideToggle(); 
}); 


$(window).on('resize',function(event){ 
    var windowSize = $(this).width(); 

    if (windowSize > 480){ 
     $(".header-li").css('display',''); 
    } 
}); 

Media query max 480px 

display icon 
list display:none; 

Answer 1

Ihre Nutzung von window.resize korrekt ist, aber Sie wollen auch eine else Bedingung zum Ersetzen des Stils hinzuzufügen, sobald das Fenster wieder nach unten schrumpft.

Ich empfehle jedoch, eine Medienabfrage zu verwenden, da es im Vergleich viel effizienter ist und mit reinem CSS gemacht werden kann.

Führen Sie das Snippet unten aus und klicken Sie auf "Vollbild", dann ändern Sie die Größe Ihres Browserfensters, um die Demo in Aktion zu sehen.

/* The default view (in this case, for mobile) */ 
 
.header-li { 
 
    background: red; 
 
    width: 50px; 
 
    height: 50px; 
 
} 
 

 
/* When the window is greater than 480px wide */ 
 
@media only screen and (min-width: 480px) { 
 
    .header-li { 
 
    background:green; 
 
    } 
 
}

<div class="header-li"> </div>

Erfahren Sie mehr über Media Queries