Javascript Menus Jquery Menu Animation

Jquery Menu Animation

User Rating: / 0
PoorBest 

In this tutorial I will show you how to make a very nice jQuery menu!

Jquery Menu 


demo          download
 

Create a new html page and in the head section put this code:

 
<script type="text/javascript" src="jquery.min.js"></script>
<script language="javascript">
$(document).ready(function() {

/* 1st example */

/// wrap inner content of each anchor with first layer and append background layer
$("#menu li a").wrapInner( '<span class="out"></span>' ).append( '<span class="bg"></span>' );

// loop each anchor and add copy of text content
$("#menu li a").each(function() {
$( '<span class="over">' +  $(this).text() + '</span>' ).appendTo( this );
});

$("#menu li a").hover(function() {
// this function is fired when the mouse is moved over
$(".out", this).stop().animate({'top': '45px'}, 250); // move down - hide
$(".over", this).stop().animate({'top': '0px'}, 250); // move down - show
$(".bg", this).stop().animate({'top': '0px'}, 120); // move down - show

}, function() {
// this function is fired when the mouse is moved off
$(".out", this).stop().animate({'top': '0px'}, 250); // move up - show
$(".over", this).stop().animate({'top': '-45px'}, 250); // move up - hide
$(".bg", this).stop().animate({'top': '-45px'}, 120); // move up - hide
});

});

</script>
 

Now let's create the html buttons: 

In the body section put this code.

<div id="menu" class="menu">

<ul>

<li><a href="javascript:;">Home</a></li>

<li><a href="javascript:;">Work</a></li>

<li><a href="javascript:;">Services</a></li>

<li><a href="javascript:;">Support</a></li>

<li><a href="javascript:;">Contacts</a></li>

</ul>

</div>

CSS File 

After you make the html buttons create the css file with style.css name:

.menu { 

height: 45px;

display: block;

}

 

.menu ul {

list-style: none;

padding: 0;

margin: 0;

}

 

.menu ul li {

float: left;

overflow: hidden;

position: relative;

text-align: center;

line-height: 45px;

background:url(bg_content.png);

}

 

.menu ul li a {

position: relative;

display: block;

width: 110px;

height: 45px;

font-family: Arial;

font-size: 11px;

font-weight: bold;

letter-spacing: 1px;

text-transform: uppercase;

text-decoration: none;

cursor: pointer;

}

 

.menu ul li a span {

position: absolute;

left: 0;

width: 110px;

}

 

.menu ul li a span.out {

top: 0px;

}

 

.menu ul li a span.over,

.menu ul li a span.bg {

top: -45px;

}

 

 

#menu {

background: #EEE;

}

 

#menu ul li a {

color: #000;

}

 

#menu ul li a span.over {

color: #FFF;

}

 

#menu ul li span.bg {

height: 45px;

background: url('bg_btn.png') center center no-repeat;

}

The last step is to download the jQuery plugin!