Simple CSS vertical menu Digg-like

Do you like Digg.com webdesign? I like much its menu, simple and clean.

This tutorial explains how to implement a simple vertical menu digg-like using CSS and javascript to show/hide sub-menu. The result is like this:

Download this tutorial


Step 1: HTML code
HTML structure is very simple and contains two <ul> tags (menu and sub-menu):



Copy and paste the following code in a new html page:

<div id="middlebar">
<ul class="menu">

<li><a href="#" onclick="javascript:showlayer('sm_1')"> Profile</a></li>

<ul class="submenu" id="sm_1">
<li><a href="p1.html">Profile</a></li>
<li><a href="p2.hmtl">Inbox </a></li>
<li><a href="p3.hmtl">Log-out</a></li>
</ul>

</ul>
</div>

Step 2: CSS code
Copy and paste this code to define menu button:

ul, li{margin:0; border:0; padding:0; list-style:none;}
#middlebar{
font-size:11px;
color:#3b5d14;
background:#90b557;
font-weight:bold;
padding:4px;
height:30px;
}
#middlebar .menu li {
background:url(lm.png) left top no-repeat;
height:30px;
float:left;
margin-right:10px;
}
#middlebar .menu li a{
color:#3b5d14;
text-decoration:none;
padding:0 10px;
height:30px;
line-height:30px;
display:block;
float:left;
padding:0 26px 0 10px;
background:url(rm.png) right top no-repeat;
}
#middlebar .menu li a:hover{
color:#666666;
}

...and this is the code for the sub-menu:

#middlebar ul .submenu {
border:solid 1px #c9dea1;
border-top:none;
background:#FFFFFF;
position:relative;
top:4px;
width:150px;
padding:6px 0;
clear:both;
z-index:2;
display:none;
}
#middlebar ul .submenu li{
background:none;
display:block;
float:none;
margin:0 6px;
border:0;
height:auto;
line-height:normal;
border-top:solid 1px #DEDEDE;
}
#middlebar .submenu li a{
background:none;
display:block;
float:none;
padding:6px 6px;
margin:0;
border:0;
height:auto;
color:#105cbe;
line-height:normal;
}
#middlebar .submenu li a:hover{
background:#e3edef;
}

Step 3: Javascript to show/hide submenu
Now, add this simple Javascript code to show/hide the sub-menu when an user clicks on a link contained into the menu.

function showlayer(layer){
var myLayer = document.getElementById(layer);
if(myLayer.style.display=="none" || myLayer.style.display==""){
myLayer.style.display="block";
} else {
myLayer.style.display="none";
}
}

This function get in input the parameter layer (the ID of sub-menu you want hide/display), in this case sm_1, passed from this link:

<li><a href="#" onclick="javascript:showlayer('sm_1')"> Profile</a></li>

Save all and try it!

Download this tutorial

Related content
Digg-like navigation bar using CSS