How to Show Menu on Click

Question

How do you show an element after a user clicks on a separate element on the page using JQuery?

I have created a side menu with the following HTML:

<li id="navicon">
  <a href="" class="nav">
    <img src ="/assets/navicon-round.svg/" />
  </a>
</li>  
<ul class="side-categories">
    <li><a href="">CSS</li></a>
    <li><a href="">HTML</li></a>
    <li><a href="">JS/Jquery</li></a>
    <li><a href="">Miscellaneous</li></a>
</ul>

I set .side-categories to display:none

Now I want to be able show .side-categories when I click on #nav

I just started learning JQuery and this is what I have come up with. Yet, it is not working. I am hoping that someone can tell me what I have done wrong here.

$( document ).ready(function() {
     $('#nav').on('click')event(function()) {
     event(showNavBar);
          $('.side-categories').show();
    });
});

Answer 1

A good trick is to hide the sidebar menu using a class.

In your CSS:

.hide { 
   display: none;
}

And in your HTML: (the <a> can be removed if you want as jQuery can detect a click on any element)

<li id="navicon">
  <img class="nav" src ="/assets/navicon-round.svg/" />
</li>  
<ul class="side-categories hide">
  <li><a href="#">CSS</a></li>
  <!-- More menu items -->
</ul>

Then in your jQuery:

$(function() {     
  $('.nav').on('click', function(e) {
    e.preventDefault();
    $('.side-categories').toggleClass('hide');
  });
});

This is a very simple way of allowing the user to hide the side menu again by clicking the same button - which is usually the expected behaviour.

An additional benefit is you keep your functions and styles seperate.

Answer 2

Here is HTML code :

 $(function() {     
    $('.nav').on('click',function(e) {
        e.preventDefault();
        $(".side-categories").slideToggle();
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <li id="navicon">
      <a href="" class="nav">
        <img style="height:40px;position:absolute;" src ="data:image/gif;base64,R0lGODlhZABkAIABAIeHh////yH/C1hNUCBEYXRhWE1QPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS4zLWMwMTEgNjYuMTQ1NjYxLCAyMDEyLzAyLzA2LTE0OjU2OjI3ICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjIxRTgzNTA3NzBFMzExRTM5MTJGREEwRkJDOTMyN0M3IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjIxRTgzNTA4NzBFMzExRTM5MTJGREEwRkJDOTMyN0M3Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MjFFODM1MDU3MEUzMTFFMzkxMkZEQTBGQkM5MzI3QzciIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MjFFODM1MDY3MEUzMTFFMzkxMkZEQTBGQkM5MzI3QzciLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4B//79/Pv6+fj39vX08/Lx8O/u7ezr6uno5+bl5OPi4eDf3t3c29rZ2NfW1dTT0tHQz87NzMvKycjHxsXEw8LBwL++vby7urm4t7a1tLOysbCvrq2sq6qpqKempaSjoqGgn56dnJuamZiXlpWUk5KRkI+OjYyLiomIh4aFhIOCgYB/fn18e3p5eHd2dXRzcnFwb25tbGtqaWhnZmVkY2JhYF9eXVxbWllYV1ZVVFNSUVBPTk1MS0pJSEdGRURDQkFAPz49PDs6OTg3NjU0MzIxMC8uLSwrKikoJyYlJCMiISAfHh0cGxoZGBcWFRQTEhEQDw4NDAsKCQgHBgUEAwIBAAAh+QQBAAABACwAAAAAZABkAAACtIyPqcvtD6OctNqLs968+w+G4kiW5omm6sq27gvH8kzX9o3n+s73/g8MCofEovGITCqXzKbzCY1eANSq9YrNardZGvcLDmO94rJ5PDurz+S1+9t+y9Gyuf0qzev3/L7/DxgoOFh3ZxhnKIeY6LbIqOb4aBYpKUZZCUaoucnZ6fkJGio6eoDZmGYKiZo6ucpq6fqaGSvLdVlrRaq7y9vr+wscLDxMXGx8jJysvMzc7PwMHU1aAAA7" />
      </a>
    </li>  
    <ul class="side-categories" style="display:none">
        <li><a href="">CSS</li></a>
        <li><a href="">HTML</li></a>
        <li><a href="">JS/Jquery</li></a>
        <li><a href="">Miscellaneous</li></a>
    </ul>

for Live Demo : https://jsfiddle.net/4zuL5bmt/

Answer 3

Working fiddle.

You should replace :

event(showNavBar);

By :

e.preventDefault();

Full Code :

 $(function() {     
    $('.nav').on('click',function(e) {
        e.preventDefault();
        $('.side-categories').show();
    });
});