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!
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 
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.
I prefer to separate CSS code in three distinct sections: a first section that contains general HTML tags; a second section that contains structure tags; a last section with custom classes.
Shortly, the picture on the right represents a typical two columns layout that use HTML 5 tags to define page structure. If you want to know more information about this topic, I suggest you to take a look at these excellent articles:
