Looking for tips on optimizing window resize functionality, particularly in relation to a responsive navigation bar. Currently, I have a setup where if the screen width is less than 480px, the navigation is toggled to minimize and the display is set to hidden. The issue arises when expanding the screen beyond 480px as the navigation remains hidden. To address this, I've implemented a window resize function that resets the list to its default state whenever the screen size is larger than 480px. However, I believe there may be room for improvement in terms of performance optimization.
<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;