Browsing through
TemplateMonster the other day, I stumbled upon a Flash template up for sales. As with most flash templates, animated navigation menus are the eye-candy. And this one was no exception. After playing some time with jQuery and CSS (in Notepad++), I made a look-alike. This tutorial is about how
you can create the same — and improve it. I hope you’d enjoy the tutorial. Let’s get started.
You might also like:
Objective
We are going to create a vertical navigation menu. When the user hovers on each link, the following will take place:
- A link with white color will fade in, hiding the link in normal state (with the same href attribute).
- While the white link fades in, the background of the link will animate from right to left.
What We Need
We need the following:
- A modern browser (Although it works on IE6 too!)
- jQuery JavaScript Library. Download from jQuery website.
- Your favorite text-editor. (Mine is Notepad++)
Create the Layout
We create an HTML file and put the following lines of code in it.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Animated Flash-like Menu with jQuery and CSS</title>
</head>
<body>
<div id='wrapper'>
<div id='sidebar'>
<ul id='menu'>
<li><a href='#'>Home</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>Services</a></li>
<li><a href='#'>Testimonials</a></li>
<li><a href='#'>Contact Us</a></li>
</ul>
</div>
</div>
</body>
</html>
Here we created a basic layout. The navigation menu we are creating is placed under the sidebar. (You can put it anywhere. Just keep it in mind it's going to a vertical navigation menu.) The href attribute of each link is set to # (for the purpose of the tutorial.)
Let's Add Some Styles
So, we have our layout. Let's add style to it. Create style.css and put these lines of code in it.
html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote,
pre, form, fieldset, table, th, td { margin: 0; padding: 0; }
body {
font-size: 14px;
line-height:1.3em;
text-align:center;
}
#wrapper {
width:960px;
margin:0 auto;
text-align:left;
}
#sidebar {
width:250px;
float:left;
}
ul#menu {
list-style:none;
}
ul#menu li {
margin:0;
padding:0;
overflow:hidden;
float:right;
position:relative;
}
#menu li a{
color:#000000;
float:right;
padding:6px 8px 6px 3px;
width:200px;
z-index:2;
}
The first two blocks of CSS styles are bare necessities. It's somewhat a modified (and lightweight) version of
Reset CSS. You may do away with them, as well. We set the width of the wrapper to 960px and sidebar to 250px. (You can set them to anything.) Next, we set the list-style of the unordered list to none. (i.e. removing those pesky circles before each list item.) We set the overflow of each list element to hidden to hide everything that overflows the width of list elements. Position of each list element is set to relative because we are going to put absolutely positioned elements inside list elements. All the links inside list elements are floated to right, width set to 200px and z-index is 2. The z-index is important here because the links will overlay a span element with a lower value of z-index. Don't forget to attach the stylesheet to index.html (under <head> tag.
<link rel='stylesheet' href='style.css'></link>
On Hover
When the page loads up, each link element will change into the following:
<li>
<a href="#">Home</a>
<a href="#" class="overlay">Home</a>
<span></span>
</li>
The extra link element (with class-name "overlay") and span element will created on-the-fly by jQuery, and both will be absolutely positioned. The span element will work as the background but it will be hidden untill the user hovers the pointer on the link. Let's add styles for these two extra mark-ups. Add these lines to style.css
#menu li a.overlay {
color:#FFFFFF;
position:absolute;
text-decoration:none;
}
#menu li span {
background:#528691;
position:absolute;
width:211px;
height:34px;
top:0;
left:211;
z-index:1;
}
The css definitions are pretty simple and easy to understand. Only one thing may need explanation — the width of the span is set to 211px. The width of each link in the list elements is set to 200px and they have right-padding and left-padding of 8px and 3px respectively. Thus, the effective width of each link will be 200px + 8px + 3px = 211px. Since the span will behave like the background of links, it should have the same width. Also notice that each span is kept 211px far from left. This is just to hide it.
Animate on Hover
Now that we are done with mark-ups and styling elements, it's time we add some javascript to animate the background on hover. Put these lines of code in index.html (under <head> tag)
<script type='text/javascript' src='jquery-1.3.2.min.js'></script>
<script type='text/javascript'>
$(function(){
$("ul#menu li").each(function() {
anchor = $(this).html();
overlay_anchor = $(anchor).addClass("overlay");
$(this).append(overlay_anchor);
$(this).append("<span></span>");
$('.overlay').css({ opacity: 0 });
});
$("ul#menu li a, ul#menu li .overlay").hover(function() {
$(this).parents("li").children("span").stop().animate({ left: 0 }, 150);
$(this).parents("li").children("a.overlay").stop().animate({ opacity: 1 }, 100);
}, function() {
$(this).parents("li").children("span").stop().animate({ left: "211px" }, 150);
$(this).parents("li").children("a.overlay").stop().animate({ opacity: 0 }, 100);
});
});
</script>
The first line attaches jQuery library to index.html. Then, we clone the link in each list element and add append the cloned element after setting its classname to "overlay". We also append a span tag (which will animate and behave like background). The opacity of the overlay class is set to 0 to hide it. Next, when the user hovers on links, we animate the span from right to left (by setting its "left" to 0). We also change the opacity of the overlay class to 1. When the user hovers off the links, we change the links back to what it was before. That's it!
Conclusion
The potential of jQuery and CSS working together is great. This is just a simple way to mock up what Flash does best — animation. You can further improve on it. Like animating the current page link on document load. Or something more useful that fits your needs.
Labels: css, javascript, Tutorials
