This blog has moved here: woorkup.com | FOLLOW ME ON TWITTER @woork
Friday, January 18, 2008

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

blog comments powered by Disqus
Anonymous said...

I recently found your site. I like the tutorials, but you really should have online examples so we can see them in use without having to download.

Anonymous said...

To the commenter above -> Or, you could just go to Digg where he clearly states this effect is found.

To the blogger -> Good tutorial, thanks!

Jason K. said...

Hi Antonio, thanks for this post. I like your site. Have a nice day.

xyz said...

This works well, as long as you keep in mind that the menu will drop down over a portion of the screen.

That portion can NOT overlap a native HTML select list, or you will encounter issues in all versions of IE before v7.

See bug report #111 here:
http://webbugtrack.blogspot.com/2007/11/bug-111-ie-broke-web-20.html

Anonymous said...

its nice, but the manu will not close when you click elsewhere on page

Antonio said...

@anonymous: no, to close it you have to click on the arrow :)

Anonymous said...

Nice tutorial! You improve on it so that it degrades gracefully when javascript is turned off. i.e the menu automatically opens if javascript is disabled

D said...

great blog so far, but you should put the examples on your site!

Also, fyi, I tried clicking your 'Woork Blog' logo to go back to your homepage, but it's not a link... Might wanna add that.. just a suggestion.. good day sir.

Al said...

good but not doesn't align right on IE6

schemogroby said...

to me it seems like it doesn´t work in IE6 at all. thx anyway!

Anonymous said...

hi how can i use this menu with frames?

i am using top frame and bottom frame.please help.

Ruff Edgz said...

hey, love the tutorial and the example.

I did find however that when making multiple links, I found some problems that I thought would be good to tell you about.

I found that if you rapped the:
li tags around the ul class="submenu" id="sm_1". You can change the CSS for the #middlebar ul .submenu to have a position of "absolute" instead of "relative". This will help so when you want to make multiple links with this code, you don't have a problem with any collisions.

I also noticed that if you click on the link once and you click on another link, both menus stay up. I changed the 'show_layer.js' to look something like this:

var last_clicked="";

function showlayer(layer){
var myLayer=document.getElementById(layer);

if (last_clicked==""){
last_clicked=document.getElementById(layer);
}

if((myLayer.style.display=="none" || myLayer.style.display=="") && last_clicked.style.display=="block"){
last_clicked.style.display="none";
myLayer.style.display="block";
last_clicked = myLayer;
} else if(myLayer.style.display=="none" || myLayer.style.display==""){
myLayer.style.display="block";
last_clicked = myLayer;
} else {
myLayer.style.display="none";
}
}

There is probably a easier way to do this but this is what I came up with. If one link submenu is open and you click on another link, it will close the previously clicked link and open the new links submenu.

I hope this makes sense and thanks again for the tutorial :D

John Smith said...

I agree,
It would be pretty sweet if you had online examples. Maybe you should use another blogger blog.

PhilGill said...

Can anybody claify how to use multiple buttons in a row across the bar. Much thanks to anyone who can.

Excellent post yet again Antonio :)

Anonymous said...

Could you tell me how to add one more menu item?

Nikki said...

Anonymous,

To add another menu item, copy and paste the code from Step 1 and make sure you change the 'sm_1' snippet (it's listed in there twice!) to 'sm_2', 'sm_3' so on and so forth for each additional menu item. Hope that helps!

ruff_edgz,

That code works great! Now if I could just get the menu to disappear when someone clicks on another part of the site....

Anonymous said...

i think all in all the world would be a happier place without IE...the only place where bad things happen to good code

Anonymous said...

To make it go away when you click anywhere, and not jsut the same link again, add:

onblur="javascript:showlayer('sm_1')"

to the link. Also, I removed the height: auto from the .submenu li a as it was buggy in IE7.

cheers!

Blue Circle Media said...

Awesome tutorial! I'm a huge fan of digg, so this is right up my alley.

Kendrick said...

great script, just doesn't work worth a crap in IE6

potty said...

ciao antonio!

ho fatto una prova del tuo menu css ma no funziona molto benne sopra IE 7

:( sai che cosa sucede? mi piace tantísimo il tuo menu css like digg mà non so perche sopra IE 7 puoi guardare questo:


http://s2.subirimagenes.com/otros/previo/thump_732851digg.jpg



grazie mille! e scusate ma il mio italiano ancora non è troppo bueno.

ciao!

Sally said...

Nice header. :)

Chris said...

Cool. I was looking for something like this.

Works well in FF, but screwy in IE7.

I'm using it as a vertical menu, like this:

HOME
ABOUT
CONTACT

The subheads expand, but everything else should move down, but it doesn't. The submenu just expands above the rest of the text. Any ideas?

Chris said...

^^^ Nevermind. Got it working!

Thanks again for the tutorial!

eric said...

The Javascript seems to make IE6 angry (don't ask why I'm doing something for IE6, haha). Something in this line:

if(myLayer.style.display=="none" || myLayer.style.display==""){

I'm not very knowledgeable with Javascript. Could you help me out?

Anonymous said...

Not only will the menu not close when you click somewhere else on the page, the overall functionality that you attempted to mirror is far off from what digg.com implements.

You have 2 options for each of these links:
1. Click the text-link to go to that page -OR-
2. Click on the down arrow to display the menu.

Your script displays the menu in both cases (text and down-arrow).

This is not a solution.

Thanks for trying though.

elvisparsley said...

Can you make this by onhover rather than onclick?

I want to see sub-menu when I hover one of main menu.
Thanks.

Anonymous said...

Could someone please past the html code in this blog for me so i can have two links on the same bar and not just the "profile" menu.

Thanks

Anonymous said...

Thanks for the tutorial i'm having a tough time getting more than 2 sub menus to show up why is that? the menu items stack on top of them self.

can some one send me a working copy or show me a tutorial with it?

DesignBro said...

This is my jQuery approach to do this Digg effect. I am sorry if putting url is not allowed. :)

http://customthemedesign.com/digg-menu/

Elisabeth said...

Ciao!
I have done everything you said to do and I still have a menu bar which has a few design problems. Perhaps you could see how to fix this? There is also a small problem in IE7 as you will see.
On click the layer which is exposed seems too big or too long so the rest of the menu items move under the navigation bar.
Check the problems at
http://www.dolcevia.com/navigation/navigation.html
The styles are navigation.css in the same folder.
Thanks!!

KenFX Studios said...

Great tutorial.

Anybody knows how to integrate that with a WordPress category drop down list? What PHP page will I need to modify?

thank you in advance.

Suparna said...

I have used this CSS vertical menu code and it works perfectly.
Thank you very much for sharing this tutorial with us.

Emil said...

Antonio,

First of all I would like to thank you for such nice tutorial, very easy to understand and true web 2.0 css style.

I will use it on my Wordpress Theme.

Thanks,
Emil

68cuda said...

Good post. Thanks!

frank said...

Would it be possible to build the menu from the bottom to the top. So first item on the bottom of its containing div. Like in a horizontal float right, will build the menu fro right to left. I need that vertically from botton to top.

  • Twitter Follow woork on Twitter
  • RSS Feed Subscribe to stay up to date
  • Podcast Coming soon...
  • 0 delicious lovers save
Share your links. Do you want to suggest any interesting link about web design or tech news? Submit your link.
Submit a News