Show dropdown menu on click using jQuery tutorial

Today’s topic is,

Show dropdown menu on click using jQuery

I’d like to take you through a spectacular Web functionality “Show dropdown menu on click using jQuery” . Which uses only CSS2, CSS3, jQuery library and a small hand written jQuery snippet.

What we do here?

We’ll create an On-click show drop-down menu using jQuery effects and CSS.

Show dropdown menu on click using jQuery tutorial - PepFry

Show dropdown menu on click using jQuery

How does that work?

This is a superb and simple example functionality of Websites. This is a normal CSS Navigation Menu bar having Sub level Menu’s. But the only difference is that in this case – the drop down menu/sub-menu is displayed only on clicking any of the parent menu and [not on hovering the parent menu].
Where we use this?

Largely, we see this around Organizations and Company Intranets where there are huge list of Navigation and numerous child level links underneath them.

Why use this?

When you have a large database and a complex Navigation System – you need control over the Navigation System in all ways and many ways!

This – On-click show drop down will be one of the control step. This will stop distracting readers who by mistake hover on the menu.

This will also give user a bit of time to think and proceed. Saves a lot of time.

How to do this?

Nothing special here!

You have to create a Regular Navigation System using HTML4.
Apply mouth watering styles to your Navigation System. Both Parent and Child Navigation should be Styled. But, Initially the child level Navigation should be hidden.
Then, write that wonderful piece of Query using jQuery. Apply effects and then reveal child level on clicking the Parent.

We’ll go and accomplish our task step by step.

Step1: Creating your Navigation System with child levels.

What we did?

Show dropdown menu on click using jQuery tutorial - PepFry

Show dropdown menu on click using jQuery

We created a clean and tidy system for Navigating through with a Single Sub-level Menu.

Step2: Create styles for the Navigation System using CSS2 and CSS3.

You need to Style them such a way the – Parent level should be shown to the users always. Irrespective of, if they click or  not.

But, child level/sub menu should be initially hidden. So that users can see the child level navigation on clicking on the parents.

Show dropdown menu on click using jQuery tutorial - PepFry

Show dropdown menu on click using jQuery

Step3: Now, we’ll Write that superb and stunning jQuery snippet that allow you to click on the parent to show its children. Along with that – you need to include the latest stable version of the jQuery Library.

Local copy of the jQuery Library(You’ll get the jQuery library here )

Hand written script

Once you integrate all the above – you’ll get a Navigation System which works On click!!

Show dropdown menu on click using jQuery - PepFry

Show dropdown menu on click using jQuery

Note: When you click on the 1st Parent Menu – It shows its Children. When you then click on the 2nd Parent Menu – the Child level of 1st Parent hides automatically and shows the child level of the 2nd Parent Menu. Likewise, all the child level of the Previous Parent will hide when you click on a New Parent.

Hope you enjoyed the tutorial “Show dropdown menu on click using jQuery“! Go ahead and download the complete source code by clicking the below link.

Any question – please write back to me, I’ll try to answer it asap. Hope to see your positive suggestions as well.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">