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 

 tags (menu and sub-menu):



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


"middlebar">

"menu">

"#" onclick="javascript:showlayer('sm_1')">Profile

"submenu" id="sm_1">

"p1.html">Profile

"p2.hmtl">Inbox 

"p3.hmtl">Log-out





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:


"#" onclick="javascript:showlayer('sm_1')">Profile


Save all and try it!

 Download this tutorial