Geek Answers Handbook

How to show the menu on click

How do you show an element after the user clicks on an individual element on the page using jQuery?

I 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 show .side-categories when I #nav

I just started learning jQuery, and that is what I came up with. However, it does not work. I hope someone tells me what I did wrong.

 $( document ).ready(function() { $('#nav').on('click')event(function()) { event(showNavBar); $('.side-categories').show(); }); });
+6
source share
4 answers

A good trick is to hide the side menu using the class.

In your CSS:

 .hide { display: none; }

And in your HTML: ( <a> can be removed if you want jQuery to 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 to allow the user to hide the side menu again by clicking the same button - this is usually the expected behavior.

An added benefit is that you keep your functions and styles separate.

+3
source

Working violin .

You must replace:

 event(showNavBar);

By:

 e.preventDefault();

Full code:

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

Here is the 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/+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> ; base64, R0lGODlhZABkAIABAIeHh //// yH / + IDwvcmRmOlJERj4gPC94OnhtcG1ldGE + IDw / eHBhY2tldCBlbmQ9InIiPz4B // <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/+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> + bl5OPi4eDf3t3c29rZ2NfW1dTT0tHQz87NzMvKycjHxsXEw8LBwL ++ vby7urm4t7a1tLOysbCvrq2sq6qpqKempaSjoqGgn56dnJuamZiXlpWUk5KRkI + OjYyLiomIh4aFhIOCgYB / fn18e3p5eHd2dXRzcnFwb25tbGtqaWhnZmVkY2JhYF9eXVxbWllYV1ZVVFNSUVBPTk1MS0pJSEdGRURDQkFAPz49PDs6OTg3NjU0MzIxMC8uLSwrKikoJyYlJCMiISAfHh0cGxoZGBcWFRQTEhEQDw4NDAsKCQgHBgUEAwIBAAAh + QQBAAABACwAAAAAZABkAAACtIyPqcvtD6OctNqLs968 + w + G4kiW5omm6sq27gvH8kzX9o3n <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/+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> + y9Gyuf0qzev3 / L7 / DxgoOFh3ZxhnKIeY6LbIqOb4aBYpKUZZCUaoucnZ6fkJGio6eoDZmGYKiZo6ucpq6fqaGSvLdVlrRaq7y9vr + wscLDxMXGx8jJysvMzc7PwMHU1aAAA7 "/> <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/+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/

+1
source

Html:

 <li id="navicon"> <a href="" class="nav"> <img src ="/assets/navicon-round.svg/" /> </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>

Replace jquery

  $(function() { $('#navicon').click(function() { // Change # instead of . $(".side-categories").show(); }); });

OR

  $(function() { $('#navicon').on('click',function() { $(".side-categories").show(); }); });

Hope this works .....

-1
source

More articles:


All Articles