This tutorial illustrates how to implement a nice animated menu using jQuery and CSS. In case you don't know about jQuery, it is a "write less, do more" Javascript library. With jQuery we can create amazing effects on the web pages, writing some few lines of codes, and you don't need to be an experienced web programmer.
Step 1 – Set up the Structure
Here is the HTML markup that is used in the demo:
01.
02.
03.
04.
05.
06.
07.
08.
09.
| <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> |
The basic idea for the script is to create separated layers inside each anchor so we could animate them on hover. We will modify the DOM structure after DOM has finished loading, so each anchor will look something like this:
01.
02.
03.
04.
05.
| <a href="javascript:;">
<span class="out">Home</span>
<span class="bg"></span>
<span class="over">Home</span>
</a> |
The content of anchor text will be placed inside two span elements, the third one will be used for background image.
Step 2 – Style with CSS
This is only a snippet of the CSS (for full CSS see the working example). I'm using the basic design, but you can customize it how you prefer.
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
| .menu ul li a span {
/* all layers will be absolute positioned */
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 {
/* hide */
top: -45px;
}
#menu {
background: #EEE;
}
#menu ul li a span {
color: #000;
}
#menu ul li a span.over {
color: #FFF;
}
#menu ul li span.bg {
/* height of the menu items */
height: 45px;
background: url('bg_over.gif') center center no-repeat;
} |
Step 3 - JavaScript
I have added some inline comments so that it can be self explaining, I think.
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
| /// 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'}, 130); // 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'}, 130); // move up - hide
}); |
VIEW DEMO
DOWNLOAD
No comments:
Post a Comment