How to create a 3 layer Drop Down menu using jquery

How to create a 3 layer Drop Down menu using jquery

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 enjoyed that tutorial and I’m going to present another new tutorial on jQuery about creating a 3 layer drop down menu. So, lets get started-

Website menu/navigation is one of the most important thing to represent data in-front of visitors. If your navigation system is not properly designed, then user may not feel comfort while they are traversing in your website. As a result you may lost their attention, also lost your potential visitors.So, we should put a great effort on building nice & effective website menu.

In this menu I’m going to use popular web safe font called Verdana. So, it will look similar all kinds of operating system.

3 layers jquery drop down menu

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.

I would like to separate the 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 of 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 one to understand my scripts.

– CSS Script for 3 Layer Drop down 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.

body{
font-size:0.85em;
font-family:Verdana, Arial, Helvetica, sans-serif;
}

#nav, #nav ul{
margin:0; padding:2px 5px 0px 2px;
list-style-type:none;
list-style-position:outside;
position:relative;line-height:1.5em; 
}

#nav a{
display:block;padding:0px 5px 1px 5px; 
border:1px solid #922EAE;
color:#fff;text-decoration:none;
background-color:#922EAE; 
}

#nav a:hover{
background-color:#fff;color:#333;
}

#nav li{
float:left; position:relative;
}

#nav ul {
position:absolute; display:none;
width:12em; top:1.5em;
}

#nav li ul a{
width:12em; height:auto;
float:left; }

#nav ul ul{
top:auto;
}	

#nav li ul ul {
left:12em;
margin:0px 0 0 10px;
}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{
display:none;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul{
display:block;
}

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 Drop down 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.

$(function(){
    $(" #nav ul ").css({display: "none"});
    $(" #nav li").hover(function(){
    $(this).find('ul:first').css({visibility: "visible",display: "none"}).fadeIn(400);
    },function(){
    $(this).find('ul:first').css({visibility: "hidden"});
    });
});

– HTML Script for 3 Layer Drop down Menu:

 

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

<ul id="nav">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a>
<ul>
    <li><a href="#">1.CSS3</a></li>
    <li><a href="#">2. Demos</a></li>
    <li><a href="#">3. Tutorials</a></li>
</ul>
</li>
<li><a href="#">Javascript </a>
<ul>
    <li><a href="#">1. jQuery</a>
        <ul>
            <li><a href="#">1.1 Download</a></li>
            <li><a href="#">1.2 Tutorial</a></li>
        </ul>
    </li>
    <li><a href="#">2. Mootools</a>
        <ul>
            <li><a href="#">2.1 Download</a></li>
            <li><a href="#">2.2 Tutorial</a></li>
        </ul>
    </li>
    <li><a href="#">3. Prototype</a>
        <ul>
            <li><a href="#">3.1 Download</a></li>
            <li><a href="#">3.2 Tutorial</a></li>
        </ul>
    </li>
</ul>
</li>
</ul>

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!

Advertisement

Tags:  

Share It

Related Posts