Warning: Table './yimaster_pras/watchdog' is marked as crashed and should be repaired query: INSERT INTO watchdog (uid, type, message, variables, severity, link, location, referer, hostname, timestamp) VALUES (0, 'php', '%message in %file on line %line.', 'a:4:{s:6:\"%error\";s:14:\"strict warning\";s:8:\"%message\";s:62:\"Non-static method view::load() should not be called statically\";s:5:\"%file\";s:68:\"/home/yimaster/public_html/pras/sites/all/modules/views/views.module\";s:5:\"%line\";i:842;}', 3, '', 'http://pras.net.np/blogs/multilevel-horizontal-navigation-using-css-and-jquery', '', '54.158.109.89', 1490400491) in /home/yimaster/public_html/pras/includes/database.mysql.inc on line 128

Warning: Table './yimaster_pras/watchdog' is marked as crashed and should be repaired query: INSERT INTO watchdog (uid, type, message, variables, severity, link, location, referer, hostname, timestamp) VALUES (0, 'php', '%message in %file on line %line.', 'a:4:{s:6:\"%error\";s:14:\"strict warning\";s:8:\"%message\";s:102:\"Declaration of views_plugin_style_default::options() should be compatible with views_object::options()\";s:5:\"%file\";s:94:\"/home/yimaster/public_html/pras/sites/all/modules/views/plugins/views_plugin_style_default.inc\";s:5:\"%line\";i:25;}', 3, '', 'http://pras.net.np/blogs/multilevel-horizontal-navigation-using-css-and-jquery', '', '54.158.109.89', 1490400491) in /home/yimaster/public_html/pras/includes/database.mysql.inc on line 128

Warning: Table './yimaster_pras/watchdog' is marked as crashed and should be repaired query: INSERT INTO watchdog (uid, type, message, variables, severity, link, location, referer, hostname, timestamp) VALUES (0, 'php', '%message in %file on line %line.', 'a:4:{s:6:\"%error\";s:14:\"strict warning\";s:8:\"%message\";s:62:\"Non-static method view::load() should not be called statically\";s:5:\"%file\";s:68:\"/home/yimaster/public_html/pras/sites/all/modules/views/views.module\";s:5:\"%line\";i:842;}', 3, '', 'http://pras.net.np/blogs/multilevel-horizontal-navigation-using-css-and-jquery', '', '54.158.109.89', 1490400491) in /home/yimaster/public_html/pras/includes/database.mysql.inc on line 128

Warning: Table './yimaster_pras/watchdog' is marked as crashed and should be repaired query: INSERT INTO watchdog (uid, type, message, variables, severity, link, location, referer, hostname, timestamp) VALUES (0, 'php', '%message in %file on line %line.', 'a:4:{s:6:\"%error\";s:14:\"strict warning\";s:8:\"%message\";s:157:\"Declaration of views_content_plugin_display_panel_pane::options_submit() should be compatible with views_plugin_display::options_submit(&$form, &$form_state)\";s:5:\"%file\";s:128:\"/home/yimaster/public_html/pras/sites/all/modules/ctools/views_content/plugins/views/views_content_plugin_display_panel_pane.inc\";s:5:\"%line\";i:358;}', 3, '', 'http://pras.net.np/blogs/multilevel-horizontal-navigation-using-css-and-jquery', '', '54.158.109.89', 1490400491) in /home/yimaster/public_html/pras/includes/database.mysql.inc on line 128
A multilevel horizontal navigation using CSS and Jquery | Prashant Shrestha's Blog
  • strict warning: Non-static method view::load() should not be called statically in /home/yimaster/public_html/pras/sites/all/modules/views/views.module on line 842.
  • strict warning: Declaration of views_handler_argument::init() should be compatible with views_handler::init(&$view, $options) in /home/yimaster/public_html/pras/sites/all/modules/views/handlers/views_handler_argument.inc on line 745.
  • strict warning: Non-static method views_many_to_one_helper::option_definition() should not be called statically, assuming $this from incompatible context in /home/yimaster/public_html/pras/sites/all/modules/views/handlers/views_handler_argument_many_to_one.inc on line 34.
  • strict warning: Non-static method views_many_to_one_helper::option_definition() should not be called statically, assuming $this from incompatible context in /home/yimaster/public_html/pras/sites/all/modules/views/handlers/views_handler_argument_many_to_one.inc on line 34.
  • strict warning: Declaration of views_handler_filter::options_validate() should be compatible with views_handler::options_validate($form, &$form_state) in /home/yimaster/public_html/pras/sites/all/modules/views/handlers/views_handler_filter.inc on line 585.
  • strict warning: Declaration of views_handler_filter::options_submit() should be compatible with views_handler::options_submit($form, &$form_state) in /home/yimaster/public_html/pras/sites/all/modules/views/handlers/views_handler_filter.inc on line 585.
  • strict warning: Declaration of views_handler_filter_boolean_operator::value_validate() should be compatible with views_handler_filter::value_validate($form, &$form_state) in /home/yimaster/public_html/pras/sites/all/modules/views/handlers/views_handler_filter_boolean_operator.inc on line 149.
  • strict warning: Declaration of views_plugin_row::options_validate() should be compatible with views_plugin::options_validate(&$form, &$form_state) in /home/yimaster/public_html/pras/sites/all/modules/views/plugins/views_plugin_row.inc on line 135.
  • strict warning: Declaration of views_plugin_row::options_submit() should be compatible with views_plugin::options_submit(&$form, &$form_state) in /home/yimaster/public_html/pras/sites/all/modules/views/plugins/views_plugin_row.inc on line 135.
  • strict warning: Non-static method view::load() should not be called statically in /home/yimaster/public_html/pras/sites/all/modules/views/views.module on line 842.
  • strict warning: Declaration of views_plugin_style_default::options() should be compatible with views_object::options() in /home/yimaster/public_html/pras/sites/all/modules/views/plugins/views_plugin_style_default.inc on line 25.
  • strict warning: Non-static method view::load() should not be called statically in /home/yimaster/public_html/pras/sites/all/modules/views/views.module on line 842.
  • strict warning: Declaration of views_content_plugin_display_panel_pane::options_submit() should be compatible with views_plugin_display::options_submit(&$form, &$form_state) in /home/yimaster/public_html/pras/sites/all/modules/ctools/views_content/plugins/views/views_content_plugin_display_panel_pane.inc on line 358.

A multilevel horizontal navigation using CSS and Jquery

4 comments

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.

AttachmentSize
navigation.zip25.74 KB
Category: 

4 Responses to "A multilevel horizontal navigation using CSS and Jquery"

Anonymous says:

source code link was not found to download your tutorial

prashant says:

It should show now..

Anonymous says:

your demo links are broken, and the source code (.zip) doesnt seem to have a working link to the css. the page is straight html only

Anonymous says:

hi, this looks good and is the only horizontal menu ive found which supports 3+ levels. Only issue is that there is a flicker in IE. Can you suggest any way of fixing this???

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.

More information about formatting options

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
9 + 6 =
Solve this simple math problem and enter the result. E.g. for 1+3, enter 4.