Whenever the toggle menu's navigation icon is clicked, it triggers an animation that transforms the "hamburger" icon into an "X", causing the navigation menu to drop down.
If a user clicks either the navigation icon or outside of the active toggle menu (when the menu has dropped down), the "X" icon will revert back to the "hamburger" icon.
The issue I'm currently facing is that even if the toggle menu is not active (meaning the menu hasn't dropped down) and the user clicks outside the navbar anywhere on the page, the navigation icon's animation is still activated.
I would appreciate any assistance in resolving this matter :-)!
CSS:
/*global styles*/
.body {
width: 100%;
margin: 0;
list-style: none;
text-decoration: none;
}
.header {
background: #d3d3d3;
width: 100%;
position: fixed;
top: 0;
left: 0;
}
.nav {
position: fixed;
width: 100%;
text-align: center;
display: none;
background-color: #d3d3d3;
left: 0;
}
.nav > li { display: block; border-bottom: 0.05em solid #000000; }
.nav > li:last-child { border-bottom: none;
}jQuery:
/*navigation icon animation*/
jQuery(document).ready(function() {
$('#toggle-menu').click(function(){
$(this).toggleClass('menu-is-active');
});
/* click outside of nav to trigger navigation icon animation */
$(document).click(function() { $("#toggle-menu").toggleClass(); }); $("nav").click(function(e) { e.stopPropagation(); return false; });
/*----/----navigation icon animation*/
/*toggle menu*/
jQuery("#toggle-menu").click(function() {
jQuery(".nav").slideToggle();
});
/* click outside of nav to close toggle*/ $(document).click(function() { $(".nav").hide(); }); $("#toggle- menu").click(function(e) { e.stopPropagation(); return false; });
/*----/----toggle menu*/
});
html:
<div class="header">
<div class="navbar">
<a href="" class="logo" style="display: inline-block;">LogoPlaceHolder</a>
<a id="toggle-menu">
<div>
<span class="top"></span>
<span class="middle"></span>
<span class="bottom"></span>
</div>
</a>
</div>
</div>
<ul class="nav">
<li><a href="" style="display: inline-block; width:100%;">Home</a> </li>
<li><a href="" style="display: inline-block; width:100%;">About</a></li>
<li><a href="" style="display: inline-block; width:100%;">News</a></li>
<li><a href="" style="display: inline-block; width:100%;">Contact</a></li>
</ul>