How do I make my mobile menu button reveal and hide the navigation bar as well as hide on click in negative space

Question

I've been trying to make a responsive website, most of it is sorted but I'm having difficulty with making the menu button (that shows up on devices specified by the media query) show and hide the navigation bar.

After researching it seems the only method is via JS, is this correct?

Anyway, I'm pretty awful when it comes to JS but I put it as I believed it would work. Here is the snippet of code. So the idea is, when ".menu-icon" is clicked the menu will drop down (or in this case fade in) and revert to hidden upon a second click etc.

http://jsfiddle.net/af57r1to/

<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">&#57349;</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(); 
    });  
});

As this is at the moment, it seems to fade the navigation in for approximately 0.3seconds and then disappears. Not giving the user much time to choose an option from the drop down! aha.

I know it will be something obvious I've missed. Any help regarding it would be grateful.

Answer 1

Removing the class navbar from navbar cf solves the toggle issue, but screws up the styling. So, give an id to your navbar and toggle on that.

<div class="navbar" id='navbarID'>
    <ul class="navbar cf">
        <li><a href="index.html">HOME</a>

and

$('.menu-icon').click(function () {
    $('#navbarID').fadeToggle();
});

Here is the fiddle

Answer 2

You have some errors in both HTML & JS.

First: You opened the inner <ul> element in a <li> element but closed it outside of the li element. The structure is wrong. It must closed inside the <li> element where it opened.

Second: The $(document).ready() function is not closed properly:

$(document).ready(function () {
    $('.menu-icon').click(function () {
        $('.navbar').fadeToggle();
    });
});