Hello everyone, welcome to my today's post on "How to create a 3 layer Drop Down menu using jquery". In my last tutorial, I was discussed about "Page redirection with Live time preview using Jquery". Hope you enjoy that tutorials. Today i am going to present another new tutorial on create a 3 layer drop down menu.

Website menu/navigation is one of the most important fact to represent data in-front of visitors. If your navigation system is not present properly, then user does not feel interest when they are traversing in your website. As a result you lost your valuable visitors.

So, we (web developer/web programmers) should think about this navigation systems issue. If we set up all similar categories topics in just one menu button then user can choose their preferable topics from category menu. so let's go for the tutorial.

I would like to separate my full code structure in to 3 parts. So that you can get each part clearly.Don't worry about it, I've attached download link and demo link below this tutorial and you can easily download them and can view live demo of menu system.

1. CSS Segments.

2. Jquery Segments.

3. HTML Segments.

I think it will be more easier for any body to understood my scripts.

- CSS Script for 3 Layer Dropdown Menu:

It's the most important part for visualizing of my script. I distribute the topics in to several UL and LI tags. If you want to show multiple sub-menu under a specific menu category then you have to use LI (it's called Listings). so, here is your css Scripts.

You have just copy this scripts and paste this in a css file called "style.css" or you can choose any name as you like. But remember you have to link this scripts with your HTML page. At the ending of the tutorial you got a download link where you can download your scripts and code-base.

 - Jquery Script for 3 Layer Dropdown Menu:

In Jquery segment, we use some Jquery scripts for show some effects like fadein, fadeout  in our menu.  It's a simple Jquery scrips only 9 lines. here is the codes.

 - HTML Script for 3 Layer Dropdown Menu:

Now it's time to preview menu scripts in to a HTML page. Here is the codes.

That's all for 3 layers menu scripts. In my eyes, it is the easiest menu script in the world :-)

Demo Link: http://demos.coolajax.net/jquery/dropdown/

Download Link: http://demos.coolajax.net/jquery/dropdown/download.zip

Thanks for reading my tutorial.

Was this information useful? What other tips would you like to read about in the future?  Share your comments, feedback and experiences with us by commenting below!

Like our site? Be a member of Coolajax fan page to get daily posts updates!