RedBrown Drop Down Menu-Using jQuery and CSS

As part of my project I have to build a drop down menu with animation. Actually its need some fade in animation effects when user clicks on the main tab and some more effects for sub navigation too. There are lot of navigation menu scripts available over the internet (I had listed some of them in my past blog) but I would like to create my own and would like to share with you. Here I’m using some simple jQuery scripts for animating the menu.

Step 1

We are going to build the list first.

<ul id="menu">
<li><a href="#">Categories</a>
<ul class="submenu">
<li><a href="#">Design</a></li>
<li><a href="#">Development</a></li>
<li><a href="#">Freebies</a></li>
<li><a href="#">Inspiration</a></li>
<li><a href="#">Resources</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">Wordpress</a></li>
</ul>
</li>
<li><a href="#">Categories</a>
<ul class="submenu">
<li><a href="#">Design</a></li>
<li><a href="#">Development</a></li>
<li><a href="#">Freebies</a></li>
<li><a href="#">Inspiration</a></li>
<li><a href="#">Resources</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">Wordpress</a></li>
</ul>
</li>
<li><a href="#">Categories</a></li>
</ul>

Step 2

Now we have to apply a skin to the list. Add some styles.

body {
background:url(images/m_bg.gif) repeat-x #b29668;
margin:70px;
}
.red {
color:red;
}
.brown {
color:brown;
}

h2 {
font-family:"Courier New", Courier, monospace;
font-size:19px;
font-weight:normal;
margin-left:39px;
color:#333333;
}
#menu {
background:url(images/menu_bg.gif) no-repeat 0 -1px;
font:normal 18px/36px Arial, Helvetica, sans-serif;
float:left;
width:1000px;
padding:0;
}
#menu li {
background:url(images/menu_bg.gif) no-repeat 0 -1px;
list-style:none;
padding:0;
margin:0;
float:left;
position:relative;
}
#menu li a{
color:#bfbfbf;
text-decoration:none;
padding-left:15px;
padding-right:40px;
background:url(images/menu_bg.gif) no-repeat left bottom;
display:block;
float:left;
}
#menu li  span{
background:url(images/arrow.png) no-repeat 0 12px ;
width:20px;
height:35px;
/*display:inline-block;*/
float:left;
/*top:-35px;*/
/*position:relative;*/
cursor:pointer;
}
#menu li ul{
background:url(images/submenu_bg.gif) no-repeat right bottom;
padding:0;
font-size:15px;
display:none;
width:250px;
z-index:5;
position:absolute;
margin:0;
float:left;
left:0;
top:36px;

}
#menu li ul li{
background:none;

width:250px;
overflow:hidden;
line-height:25px;
}
#menu li ul a{
background-image:none;
border-bottom:1px solid #171717;
border-top:1px solid #545454;
border-left:1px solid #171717;
width:237px;
}
#menu li:hover ul{
}
a:active, a:visited {
outline:none;
}
.overRed {
background:url(images/over_red.png) no-repeat left top !important;
color:#FFFFFF !important;
border-left:none !important;
border-right:none !important;

}

I have explained about some css rules above. Just take a look on it.

Step 3

Now the final step, we are going to add some animation effects for the menu with jQuery. First we need to call the jquery.js. It should be like this.

<script src="js/jquery.js" type="text/javascript"></script>

Now the animation jquery code which you have to put inside the head tag.

<script>
$(document).ready(function(){
$("ul.submenu").parent().append("<span></span>");
$("ul#menu li a, ul#menu li span").click(function(){
$(this).parent().find("ul.submenu").animate({height: 'show', opacity: 'show'}, 'slow');
})
$("ul#menu li").not("ul#menu li ul li").hover(function(){
}, function(){
$(".submenu").animate({height: 'hide', opacity: 'hide'}, 'slow');
})
$(".submenu li a").hover(function(){
$(this).animate({paddingLeft: "30px"}, 'fast') ;
$(this).addClass("overRed") ;
},
function(){
$(this).animate({paddingLeft: "15px"}, 'fast') ;
$(this).removeClass("overRed") ;
}
)
})

</script>

[Download not found]

Share with Friends