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://www.9lessons.org">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://www.9lessons.org">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!
0 comments