A question I often receive is what's the best way to implement a multi-level navigation bar for a website. In some cases, some of my readers ask to me a little help and send me "very original" solutions but not so suitable in terms of semantic and unobtrusive approach to coding. For my experience, I always suggest to use simple and standard methods. So in this tutorial I want to illustrate you how to implement a perfect multi-level navigation bar using HTML, CSS and some lines of unobtrusive JavaScript code with jQuery to show and hide sub sections. The result is the following:
You can quickly reuse the code I provided in this tutorial into your web projects, customizing the CSS file and changing the links. You can take a look at the demo here or download the source code here.
Navigation bar structure
Here is the standard box model of a typical navigation bar:
...and here is the standard HTML structure you would have to use to implement it
How you can see the code is composed by some nested unordered list. For example, in this tutorial I used the following code (main navigation items highlighted in bold):
You can add new main items or sub items simply adding new <li> tags with an <ul> tag within.
CSS Code
Now take a look at the CSS code. I prepared a very basic style you can customize how you prefer in your projects. Here is the code for the container of the navigation bar (<div id="#nav">):
Here is the code for navigation links. #nav ul li {...} it's the code that defines main items (in this tutorial for example they are Web Design, Tech News, Social Network). #nav ul li ul li {...} it's the code that defines sub items for each main item.
Here is the code for sub menu sections:
jQuery Code
Now take a look at this simple jQuery code that shows and hides sub sections using mouseover and mouseleave jQuery events. The code is very simple and works independently from the number of main items contained into the navigation bar. You have to copy the following code into the <head> tag of your page. Remember first to include a link to jQuery using the following code:
Than add this code:
You can also add this code in an external JS file and import it into the page that use this script. That's all! Take a look at the demo here or download the source code here.
Leave a comment for your suggestions, thanks!
You can quickly reuse the code I provided in this tutorial into your web projects, customizing the CSS file and changing the links. You can take a look at the demo here or download the source code here.
Navigation bar structure
Here is the standard box model of a typical navigation bar:
...and here is the standard HTML structure you would have to use to implement it
<div id="nav"> <!-- nav container -->
<ul>
</div><li>item <!-- main item -->
<ul><ul> <!-- item submenu -->
</li><li>sub item</li>
</ul>How you can see the code is composed by some nested unordered list. For example, in this tutorial I used the following code (main navigation items highlighted in bold):
<div id="nav">
<ul>
<div>
<ul>
<li><a href="#">Web Design</a>
<ul class="submenu">
<li><a href="http://woork.blogspot.com">Woork</a></li>
<li><a href="http://www.dzone.com">DZone</a></li>
</ul>
</li>
<li><a href="#">Tech News</a>
<ul class="submenu">
<li><a href="http://www.mashable.com">Mashable</a></li>
<li><a href="http://www.cnet.com">CNET</a></li>
</ul>
</li>
<li><a href="#">Web Design</a>
<ul class="submenu">
<li><a href="http://woork.blogspot.com">Woork</a></li>
<li><a href="http://www.dzone.com">DZone</a></li>
</ul>
</li>
<li><a href="#">Tech News</a>
<ul class="submenu">
<li><a href="http://www.mashable.com">Mashable</a></li>
<li><a href="http://www.cnet.com">CNET</a></li>
</ul>
</li>
<ul>
<div>
You can add new main items or sub items simply adding new <li> tags with an <ul> tag within.
CSS Code
Now take a look at the CSS code. I prepared a very basic style you can customize how you prefer in your projects. Here is the code for the container of the navigation bar (<div id="#nav">):
#nav{
height:32px;
line-height:32px;
background:#3B5998;
padding:0 10px;
}
line-height:32px;
background:#3B5998;
padding:0 10px;
}
#nav ul,
#nav ul li {
#nav ul li{
#nav ul li {
margin:0;
padding:0;
list-style:none;
}padding:0;
list-style:none;
#nav ul li{
float:left;
display:block;
}display:block;
Here is the code for navigation links. #nav ul li {...} it's the code that defines main items (in this tutorial for example they are Web Design, Tech News, Social Network). #nav ul li ul li {...} it's the code that defines sub items for each main item.
#nav ul li a:link,
#nav ul li a:visited{
#nav ul li a:hover{
#nav ul li ul li{
#nav ul li ul li a:link,
#nav ul li ul li a:visited{
#nav ul li ul li a:hover{
#nav ul li a:visited{
color:#FFF;
font-size:14px;
font-weight:bold;
text-decoration:none;
padding:0 20px 0 6px;
display:block;
}font-size:14px;
font-weight:bold;
text-decoration:none;
padding:0 20px 0 6px;
display:block;
#nav ul li a:hover{
color:#EBEFF7;
}#nav ul li ul li{
float:none;
display:block;
}display:block;
#nav ul li ul li a:link,
#nav ul li ul li a:visited{
color:#444;
font-size:11px;
font-weight:bold;
text-decoration:none;
padding:0 10px;
clear:both;
border-bottom:solid 1px #DEDEDE;
}font-size:11px;
font-weight:bold;
text-decoration:none;
padding:0 10px;
clear:both;
border-bottom:solid 1px #DEDEDE;
#nav ul li ul li a:hover{
color:#3B5998;
background:#EBEFF7;
}background:#EBEFF7;
Here is the code for sub menu sections:
.submenu {
position: absolute;
width: 160px;
background: #FFF;
padding: 10px;
border: solid 1px #2E4B88;
border-top: none;
display: none;
line-height: 26px;
z-index: 1000;
}width: 160px;
background: #FFF;
padding: 10px;
border: solid 1px #2E4B88;
border-top: none;
display: none;
line-height: 26px;
z-index: 1000;
jQuery Code
Now take a look at this simple jQuery code that shows and hides sub sections using mouseover and mouseleave jQuery events. The code is very simple and works independently from the number of main items contained into the navigation bar. You have to copy the following code into the <head> tag of your page. Remember first to include a link to jQuery using the following code:
<script type="text/javascript" src="jquery.js"></script>
Than add this code:
<script type="text/javascript">
function nav(){
$(document).ready(function() {
</script>
function nav(){
$('div#nav ul li').mouseover(function() {
$('div#nav ul li').mouseleave(function() {
$('div#nav ul li ul').mouseleave(function() {
}; $(this).find('ul:first').show();
});$('div#nav ul li').mouseleave(function() {
$('div#nav ul li ul').hide();
});$('div#nav ul li ul').mouseleave(function() {
$('div#nav ul li ul').hide();;
});$(document).ready(function() {
nav();
});</script>
You can also add this code in an external JS file and import it into the page that use this script. That's all! Take a look at the demo here or download the source code here.
Leave a comment for your suggestions, thanks!
Read More
I have an iPhone and iPod and naturally I use iTunes to manage my music library through these devices. I am a neat person but for some reason until some week ago a lot of my tracks was mislabeled, without the album cover, hard to find and I didn't have the patience to fix them manually. So I searched for a solutions and I found 
If you are looking for new interesting fonts, here is a collection of ten beautiful, free and must have serif typefaces for the web and print. This collection includes Medio, Jura, Fontin, Sling, Calluna, Lido STF, Salernomi, Novello Pro, Steinem, TeX Gyre Schola.
There is a big and justified interest from the web community about the changes introduced in HTML 5 and in the last weeks I'm frequently receiving a lot of questions and requests about this topic. In this post I want to illustrate a quick roundup of some point of interest about the use of 
Finally! Blogger has introduced After the Jump a feature which lets you create expandable post summaries in your blog posts, so longer posts appear as an intro with a link to Read More. 
HTML 5 Visual Cheat Sheet is an useful cheat sheet for web designers and developers designed by me. This cheat sheet is essentially a simple visual grid with a list of all HTML tags and of their related attributes supported by HTML versions 4.01 and/or 5. The simple visual style I used to design this sheet allows you to find at a glance everything you are looking for.
