Upon loading the page, my menu is initially set to a width of 0px. When an icon is clicked, a jQuery script smoothly animates the menu's width to fill the entire viewport, displaying all menu items (links) perfectly. The issue I'm facing is that when the width is set to 0, instead of disappearing, the links inside the menu get squished to the left. How can I achieve the desired effect of making the links completely disappear when the width is set to 0 and reappear when the width is set to 100vw?
I attempted to use an if statement where, if the width is 0, the links are emptied out, but this approach did not yield the expected outcome.
Any assistance on solving this dilemma would be greatly appreciated.
<div id="menu">
<div class="menu-item">
<a href="#section-1" onclick="$('#on-menu').click();">Home</a>
</div>
<div class="menu-item">
<a href="#section-2" onclick="$('#on-menu').click();">Profile</a>
</div>
<div class="menu-item">
<a href="#section-3" onclick="$('#on-menu').click();">Contact</a>
</div>
</div>
<script>
/*When icon (#on-menu) is clicked, this animates width from 0px to 100vw*/
isLarge = false;
$("#on-menu").click(function(){
$("#menu").animate({width:(isLarge ? '0px' : '100vw')});
isLarge = !isLarge;
});
/*The following attempt to make the links disappear when the width is set to 0 failed*/
if($("#menu").width() == '0px'){
$( ".menu-item" ).empty();
}
</script>