Simple Drop Down Menu With Jquery

This tutorial, we discuss how to create a simple drop down menu with jquery. You can add the menu just with adding li tag, delete the menu just deleting li tag selected, change the style with CSS. Why are we posting this, because in the next tutorial we will give a tutorial about the drop down menu with recent posts based on labels.

To make the next tutorial easy to understand by visitors, we decided to give this tutorial first before we make tutorial for drop down menu with recent posts based on labels. The idea of this tutorial is come when we visit sites with high pagerank. They use jquery to perform drop down menu with recent posts based on labels. So, it is not false if you use the similar technique in your blog. But, before we discuss more, may be the following tutorials are good for you to developing your blog:

1. Multifunction plugin for blogger: this tutorial give a simple way how to make recent posts, related posts, selected posts, just with one plugin.
2. Slideshow related posts: this tutorial give dynamic slideshow for your related posts. 
3. How to delete an action of Facebook Open Graph: if you want to make Facebook plugin with your own style. Then this tutorial very good for you.

Now, let we start this tutorial

HTML

This is code for HTML, if you want to add more menu just add li tag

<ul id="samplenav">
    <li><a href="http://www.threelas.com/" target="_blank">Home</a></li>
    <li><a href="javascript:void(0);" target="_blank">Blogger Tutorials &gt; </a>
        <ul style="display: none; ">
            <li><a href="http://www.threelas.com/search/label/Blogger%20and%20Widget">Blogger and Widget</a></li>
            <li><a href="http://www.threelas.com/search/label/Blogger%20Api">Blogger API</a></li>
            <li><a href="http://www.threelas.com/search/label/Blogger%20SEO">Blogger SEO</a></li>
        </ul>
        <div class="clear"></div>
    </li>
</ul>
<div class="clear"></div>

CSS

The code below for styling the menu. If you want another style, just change the css code below with your own.

#samplenav {
list-style:none outside none;
margin:0;
padding:0
}

#samplenav li {
background:none repeat scroll 0 0 #7F7F86;
border:3px outset #7B7B7B;
border-radius:20px 20px 20px 20px;
display:block;
float:left;
position:relative;
width:auto;
z-index:500;
margin:0 1px
}

#samplenav li a {
display:block;
font-weight:700;
height:25px;
text-decoration:none;
text-align:center;
color:#333;
padding:8px 5px 0
}

#samplenav li a:hover {
color:#fff
}

#samplenav a.selected {
color:red
}

#samplenav ul {
list-style:none outside none;
position:absolute;
display:none;
left:0;
margin:4px 0 0 -1px;
padding:0
}

#samplenav ul li {
width:auto;
float:left;
margin:1px 0 0
}

#samplenav ul a {
display:block;
height:15px;
color:#FFF;
padding:8px 5px
}

#samplenav ul a:hover {
text-decoration:none
}

#samplenav li:hover {
background:#A52A2A
}​

JQUERY

The code below is the key of drop down menu with jquery. If you are not too understand with jquery, then don't ever try to modify. You can learn more about jquery on jquery.com

$(document).ready(function () {    
    
    $('#samplenav li').hover(
        function () {
            //show its submenu
            $('ul', this).stop().slideDown(200);

        }, 
        function () {
            //hide its submenu
            $('ul', this).stop().slideUp(250);            
        }
    );
    
});​

See the complete code and demo below