Tutorials All - Webdesign, Graphic Design

Visit our new Webdesign Templates,css,html5 etc

Download New Android Applications

Visit our new Collections of Android Application

28.2.11

Simple animated drop down menu using jquery

This tut will help you to have a simple animated drop down using jquery. Before using this please add the js file from jquery website. Refer the site http://jquery.com/ for more details. You can download the minified version or the developer version.

Once you download and include in the page then using the below steps.
HTML

<ul class="drospdown">
<li><a href="#">A Website #1</a></li>
<li><a href="#">A Website #2</a>
<ul>
             <li><a href="#">Indoor</a></li>
             <li><a href="#">Outdoor</a></li>
            </ul>

</li>
<li><a href="#">A Link #1</a></li>
<li><a href="#">A Link #2</a></li>
<li><a href="#">A Website #3</a></li>
<li><a href="#">A Website #4</a></li>

<li><a href="#">A Link #3</a></li>
<li><a href="#">A Link #4</a></li>
</ul>

Javascript

function mainmenu(){
$(" .drospdown ul ").css({display: "none"}); // Opera Fix
$(" .drospdown li").hover(function(){
$(this).find('ul:first').css({visibility: "visible",display: "none"}).slideDown(400);
},function(){
$(this).find('ul:first').slideUp(400);
});
}
$(document).ready(function(){
mainmenu();
});

this will give you an animated drop down menu...

0 comments:

Post a Comment