Hi,I am Prashant Shrestha, a web developer based in Kathmandu. I specialise in Front end Drupal Development and I also do CSS. And I am passionate about Photography.
A multilevel horizontal navigation using CSS and Jquery
I was recently working on converting a Design to Xhtml, CSS ..The design had a horizontal navigation with a secondary navigation..I set about to converting it and then I realized that I had never done a horizontal navigation with multiple levels before..So I set about searching the net on how to accomplish it. I wanted to incorporate jquery into it as well. I found a site that had the kinda effect that I wanted. So I explored how they did that. I found that it was pretty easy. So I set about writing an article on it.
You can see the demo right here. The source is include at the end.
Let's get started
I assume that you are already familiar with HTML and CSS. Also a basic knowledge of jquery is required.
The End Result
The end result will be something like this.
The HTML
The HTML for the navigation is pretty simple and straight forward. The menus are in an unordered list and the secondary menu are in anouther unordered list nested inside the primary ul.
<div id="navi-menu">
<ul>
<li class="home"><a href="#" class="active">Home</a>
<ul class="active">
<li><a class="active" href="#">Latest Articles</a></li>
<li><a href="#">Blogs</a></li>
<li><a href="#">Users</a></li>
</ul>
</li>
<li class="tutorials"><a href="#">Tutorials</a>
<ul>
<li><a href="#">Drupal</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">Jquery</a></li>
<li><a href="#">Php</a></li>
<li><a href="#">Design</a></li>
</ul>
</li>
<li class="freebies"><a href="#">Freebies</a>
<ul>
<li><a href="#">Icons</a></li>
<li><a href="#">Plugins</a></li>
<li><a href="#">Wallpapers</a></li>
<li><a href="#">Textures</a></li>
<li><a href="#">Fonts</a></li>
</ul>
</li>
<li class="about"><a href="#">About</a>
<ul>
<li><a href="#">Contact</a></li>
<li><a href="#">Jobs</a></li>
<li><a href="#">Forum</a></li>
<li><a href="#">Terms</a></li>
</ul>
</li>
</ul>
</div>
The CSS
The CSS is pretty simple as well. Those familiar with CSS will see that there is nothing much to it,
#navigation-wrapper
{
height: 70px;
background: url(../img/navigation-bg.png) repeat-x top left;
}
#navigation a
{
color: #FFF;
}
#navigation ul
{
height: 34px;
width: 620px;
position: relative;
margin: 0;
}
#navigation li
{
float: left;
height: 34px;
list-style: none;
margin: 0;
}
#navigation li li
{
height: 30px;
padding-top: 5px;
}
#navigation li a
{
display: block;
height: 34px;
padding: 5px 15px 0;
font-size: 0.7em;
font-weight: bold;
font-family: Arial, Helvetica, "Bitstream Vera Sans", sans-serif;
text-decoration: none;
margin-right: 10px;
}
#navigation .home a
{
width: 50px;
}
#navigation .tutorials a
{
width: 77px;
}
#navigation .freebies a
{
width: 77px;
}
#navigation .about a
{
width: 55px;
}
#navigation li a.active, #navigation li a:hover, #navigation li a.selected
{
background-color: #1d1d1d;
}
#navigation li li a
{
display: inline;
padding-top:0;
font-size: 0.6em;
color: #e7e9e6;
padding-bottom: 0px;
}
#navigation li li a.active, #navigation li li a:hover
{
color: #eeb425;
}
#navigation ul ul
{
width: 620px;
height: 38px;
position: absolute;
left: 0;
top: 25px;
display: none;
}
#navigation ul ul.selected, #navigation ul ul.active
{
display:block;
}
The Script
The effect that we want to accomplish is when we hover over any menu item in the primary menu, its secondary menu will be displayed.
Add a class selected to the primary a and secondary ul when mouseover
By using the 'this' selector we can select the current element we are referencing.
$('#navigation ul li a').mouseover( function(){
$(this).addClass('selected');
$(this).siblings('ul').addClass('selected');
$('ul.active').css({display: 'none'});
});
We want the same when hovering over the secondary navigation
$('#navigation ul ul').mouseover( function(){
$(this).addClass('selected');
$('ul.active').css({display: 'none'});
});
Apply the reverse process for mouseout
$('#navigation ul li a').mouseout( function(){
$(this).removeClass('selected');
$(this).siblings('ul').removeClass('selected');
$('ul.active').css({display: 'block'});
});
$('#navigation ul ul').mouseout( function(){
$(this).removeClass('selected');
$(this).siblings('a').removeClass('selected');
$('ul.active').css({display: 'block'});
});
Add class for the current active menu
For the current active primary link and its secondary ul we want it to stay active when mouseover and mouseout.
$('#navigation ul li a.active').mouseover( function(){
$(this).addClass('selected');
$(this).siblings('ul').addClass('selected');
$('ul.active').css({display: 'block'});
});
$('#navigation ul ul.active').mouseover( function(){
$(this).siblings('a').addClass('selected');
$(this).addClass('selected');
$('ul.active').css({display: 'block'});
});
$('#navigation ul li a.active').mouseout( function(){
$(this).addClass('selected');
});
$('#navigation ul ul.active').mouseout( function(){
$(this).addClass('selected');
});
The complete script
$(document).ready(function(){
$('#navigation ul li a').mouseover( function(){
$(this).addClass('selected');
$(this).siblings('ul').addClass('selected');
$('ul.active').css({display: 'none'});
});
$('#navigation ul ul').mouseover( function(){
$(this).addClass('selected');
$('ul.active').css({display: 'none'});
});
$('#navigation ul li a').mouseout( function(){
$(this).removeClass('selected');
$(this).siblings('ul').removeClass('selected');
$('ul.active').css({display: 'block'});
});
$('#navigation ul ul').mouseout( function(){
$(this).removeClass('selected');
$(this).siblings('a').removeClass('selected');
$('ul.active').css({display: 'block'});
});
$('#navigation ul li a.active').mouseover( function(){
$(this).addClass('selected');
$(this).siblings('ul').addClass('selected');
$('ul.active').css({display: 'block'});
});
$('#navigation ul ul.active').mouseover( function(){
$(this).siblings('a').addClass('selected');
$(this).addClass('selected');
$('ul.active').css({display: 'block'});
});
$('#navigation ul li a.active').mouseout( function(){
$(this).addClass('selected');
});
$('#navigation ul ul.active').mouseout( function(){
$(this).addClass('selected');
});
});
That's it folks
There you go. You have created a simple multilevel navigation using jquery and CSS without any dropdown, You can see the final result here. The code is attached below.
That wasn't so hard now , was it? I hope u enjoyed reading this article. If you have any querry then feel free to ask them, I would love to answer them.
| Attachment | Size |
|---|---|
| navigation.zip | 25.74 KB |
Bookmark/Search this post with:
Tags:
2 Responses to "A multilevel horizontal navigation using CSS and Jquery"
source code link was not found to download your tutorial
It should show now..
Post new comment