javascript - How to make navigation bar disappear when a link is clicked on -
i have menu navigation covers whole page. how can make disappear when link clicked on?
my code below:
html code
<div class="button_container" id="toggle"> <span class="top"></span> <span class="middle"></span> <span class="bottom"></span> <p>menu</p> </div> <div class="overlay" id="overlay"> <nav class="overlay-menu" id ="overlay-menu" > <ul> <li ><a href="#home" >home</a></li> <li><a href="#about" data-toggle="collapse" data-target=".overlay" >about us</a></li> <li><a href="services">services</a></li> <li><a href="#portfolio" >portfolio</a></li> <li><a href="#">enquiry form</a></li> <li><a href="#">contact</a></li> </ul> </nav> </div>
what looks when menu icon clicked https://gyazo.com/24c86c1b1be45e18435ab275f550377c
i have attempted use data-toggle
attribute it's giving unusual result.
<li><a href="#about" data-toggle="collapse" data-target=".navbar-collapse" >about us</a></li>
result - last 3 links snugged @ top https://gyazo.com/bed757689c2a8c41cb8c7be25cc4008c
you can achieve using jquery:
$("#overlay-menu ul li a").click(function() { $("#overlay-menu").hide(); });
Comments
Post a Comment