A Stylish Navigation Menu With jQuery
Introduction
As you may know, the first 20 seconds of a new visitor’s interaction
with a website determine whether they are going to stay or leave. This
means you have to follow common design practices and put everything
where the user would expect it to be. A crucial part of this process is
developing an easy to use navigation menu.
In this tutorial we are going to make a stylish CSS + XHTML navigation menu with the help of the jQuery library.
So download the tutorial files above and keep on reading..
Step 1 – the XHTML
The XHTML code is simple and search engine friendly.
index.html
<div id="menu-container">
<ul id="navigationMenu">
<li><a href="#" class="normalMenu">Home</a></li>
<li><a href="#" class="normalMenu">Services</a></li>
<li><a href="#" class="selectedMenu">Our clients</a></li>
<li><a href="#" class="normalMenu">The team</a></li>
<li><a href="#" class="normalMenu">About us</a></li>
<li><a href="#" class="normalMenu">Contact us</a></li>
</ul>
</div>
The entire navigation menu is basically one unordered list. You can
introduce new menu items by just adding more LI elements and setting
their respective text and target URLs.
An important thing to note here is how you can mark a menu item as selected by default (or active) – just assign it the selectedMenu
class (line 5). For example, here we are highlighting the “Our clients”
page. You can set it up manually for a static site, or use PHP to do ti
dynamically.
The navigation menu explained
Step 2 – jQuery
As you can see from the illustration above, we are going to clone the
set of links defined in our XHTML (the dark ones) and assign them the hoverMenu CSS class, which floats them above the default ones.
This strategy has many advantages – firstly it keeps the XHTML
cleaner, because you do not have to add those links manually to the
page, and secondly it guarantees that you will have clean and working
navigation regardless of the visitor’s javascript support – great for
both usability and SEO.
Now lets see what happens in our script.js.
script.js
$(document).ready(function(){
// executed after the page has finished loading
$('#navigationMenu li .normalMenu').each(function(){ // for each menu item
// create a duplicate hyperlink and position it above the current one
$(this).before($(this).clone().removeClass().addClass('hoverMenu'));
});
$('#navigationMenu li').hover(function(){ // using the hover method..
// we assign an action on mouse over
$(this).find('.hoverMenu').stop().animate({marginTop:'0px'},200);
// the animate method provides countless possibilities
},
function(){
// and an action on mouse out
$(this).find('.hoverMenu').stop().animate({marginTop:'-25px'},200);
});
});
Great, but what have we just done? First we used the $(‘document’).ready method to insure that the code is executed after the page has finished loading.
Then we looped through all the links and cloned them, assigning a new CSS class – hoverMenu.
After this we used the hover() method to easily add event handlers for both the mouseover and the mouseout event.
Later we used the animate method – a really powerful tool in the jQuery arsenal. In this case we provided it with a new marginTop value and the duration of the effect. jQuery will handle all the animation.
Note the use of the stop() method – it stops all
currently active animations and thus prevents the stacking of different
animation effects on top of each other guaranteeing a smooth user
experience.
Step 3 – the CSS
Lets take a look at our CSS style sheet.
demo.css
/* Page styles */
body,h1,h2,h3,p,td,quote,small,form,input,ul,li,ol,label{ /* resetting some elements for better browser compatibility */
margin:0px;
padding:0px;
}
body{ /* styling the body */
margin-top:20px;
font-family:Arial, Helvetica, sans-serif;
color:#51555C;
height:100%;
font-size:12px;
}
/* Navigation menu styles */
ul{ /* the unordered list */
height:25px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
ul li{
border:1px solid #444444;
display:inline-block; /* changing the display property */
float:left; /* floating the list items to the left */
height:25px;
list-style-type:none; /* disabling the list icon */
overflow:hidden; /* hiding the overflowing content */
}
ul li a, ul li a:hover,
ul li a:visited{
text-decoration:none; /* removing the underline text-decoration */
}
/* styling the links */
.normalMenu, .normalMenu:visited,
.hoverMenu, .hoverMenu:visited,
.selectedMenu,.selectedMenu:visited {/* these properties are shared between the classes */
outline:none;
padding:5px 10px;
display:block;
}
/* styles that are assigned individually */
.hoverMenu,.hoverMenu:visited,
.selectedMenu,.selectedMenu:visited {
margin-top:-25px;
background:url(img/grey_bg.gif) repeat-x #eeeeee;
color:#444444;
}
.selectedMenu,.selectedMenu:visited {
margin:0;
}
.normalMenu, .normalMenu:visited{
color:white;
background:url(img/dark_bg.gif) repeat-x #444444;
}
As you can see, we have three main classes that define the looks of our navigation menu. normalMenu – for the normal state of the navigation links, hoverMenu – lighter link that slides down on hover, selectedMenu the active (selected) state.
With this our stylish navigation menu is complete!
Conclusion
In this tutorial I showed you how to create a stylish and user
friendly navigation menu. You are free to use it in your sites and
modify it in whatever fashion you find appropriate.
إرسال تعليق