Recently, I've been working on creating a responsive website and have managed to sort out most of it. However, I am facing some difficulty in making the menu button (which appears on specific devices according to media queries) toggle the navigation bar display.
After doing some research, it seems like the only way to achieve this is through JavaScript. Is that correct?
Despite my limited knowledge of JS, I tried implementing it as I thought it would work. Here's a snippet of the code I used. The concept is that when ".menu-icon" is clicked, the menu should drop down (or fade in) and then hide again with a second click, and so on.
<div id="logo">
<a href="#">
<img class="logo" src="images/logo.png" alt="Logo" style="width:200px;height:100px" />
</a>
<a class="menu-icon" href="#menu"></a>
<br></br>
</div>
<div class="navbar">
<ul class="navbar cf">
<li><a href="index.html">HOME</a>
</li>
<li><a href="#">SECTIONS</a>
<ul>
<li><a href="retail.html">RETAIL </a>
</li>
<li><a href="#">HOTEL</a>
</li>
<li><a href="#">RESTAURANT</a>
</li>
<li><a href="#">SHOPPING</a>
</li>
</ul>
<li><a href="how.html">HOW IT WORKS</a>
</li>
<li><a href="#">OUR EXPERIENCE</a>
</li>
<li><a href="#">TESTIMONIALS</a>
</li>
<li><a href="#">NEWS</a>
</li>
<li><a href="">CONTACT US</a>
</li>
</ul>
</div>
<br />
$(document).ready(function () {
$('.menu-icon').click(function () {
$('.navbar').fadeToggle();
});
});
Currently, the navigation fades in for about 0.3 seconds and then disappears, not giving users enough time to make a selection from the dropdown menu. I believe there might be something obvious that I missed. Any assistance in fixing this issue would be greatly appreciated.