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

Pastel color menu with dynamic submenu using CSS

Do you want to add dynamic features to your menu?

This tutorial illustrates how to design a nice pastel color menu with a dynamic submenu which appears when you select a link in the main menu, using CSS and some lines of javascript code. The result is like this:


Download the source code to reuse it in your pojects (images included).

Download source code Live Preview


Step 1: HTML Code
HTML code is very simple: you can use the flexibility of elements ul, li to design the menu / Submenu structure. I added also a green header above the menu, which you can use to add for example your site logo:

<!-- HEADER -->
<div id="top-navigation">
<!-- Something in the header here -->
</div>

<!-- Main Menu -->
<div id="navigation">
<ul id="mymenu">
<li><a href="#" onmouseover="javascript:showsubmenu(1)">Home</a></li>
<li><a href="#" onmouseover="javascript:showsubmenu(2)">Movies</a></li>
<li><a href="#" onmouseover="javascript:showsubmenu(3)">Music</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>

<!-- SUB MENU -->
<div id="sublinks">
<ul id="s1">
<li><a href="#">General</a></li>
<li><a href="#">Information</a></li>
<li><a href="#">News</a></li>
</ul>

<ul id="s2">
<li><a href="#">Drama</a></li>
<li><a href="#">Thriller</a></li>
<li><a href="#">Action</a></li>
<li><a href="#">Horror</a></li>
<li><a href="#">Colossal</a></li>
</ul>

<ul id="s3">
<li><a href="#">Rock</a></li>
<li><a href="#">Pop</a></li>
<li><a href="#">Classical</a></li>
</ul>
</div>

How you can see each link in the main menu calls a javascript function showsubmenu() which takes in input the ID of the submenu you want to display.
Each <ul> element into the layer #sublinks is a submenu related to a link in the main menu. You can identify each submenu with a progressive id, for example in this case with: S1, S2, S3...


Step 2: CSS Code
Copy and paste this code in the <head> tag of your page:

ul, li{border:0; padding:0; margin:0; list-style:none;}

/* ----------- Navigation ----------- */
#top-navigation{
background:url(img/topnav-bg.gif) repeat-x;
width:auto;
height:48px;
margin:0 auto;
}
#navigation{
background:url(img/nav-bg.gif) repeat-x;
height:32px;
margin:0 auto;
width:auto;
}
#navigation ul{
height:32px;
line-height:32px;
}
#navigation ul li{
display:inline;
}
#navigation ul li a,
#navigation ul li a:visited {
background:url(img/line-a.gif) right no-repeat;
padding:0 20px;
display:block;
text-decoration:none;
float:left;
color:#4261df;
font-weight:bold;
text-shadow:#ffffff 2px 2px 2px;
}
#navigation ul li a:hover{
color:#1532a5;
}

/* ----------- Sub Menu ----------- */
#sublinks{
width:auto;
margin:0 auto;
background:#888888 url(img/sublink.gif);
height:30px;
font-size:11px;
}
#sublinks ul{
height:32px;
line-height:31px;
}
#sublinks ul li{
display:inline;
}
#sublinks ul li a,
#sublinks ul li a:visited {
padding:0 20px;
display:block;
text-decoration:none;
float:left;
color:#FFFFFF;
}
#sublinks ul li a:hover{
text-decoration:underline;
}

/* ----------- Hide Sub menu ----------- */
#s2, #s3{display:none;}

When the page is loaded for the first time I want to display by default the submenu with ID #S1. So, I have to set CSS display property for #S2 and #S3 to "none";


Step 3: Javascript Code
Now add this simple javascript function showsubmenu() to shows/hides the submenu related to the link on the main menu. This function takes in input a parameter which is the ID of the submenu you want to display (take a look at the step 1):



Copy this code in the <head> tag of your page:

<script type="text/javascript">
function showsubmenu(id){
submenu = document.getElementById('s'+id);
for(i=1;i<=3;i++){
if(i==id){
submenu.style.display="block";
} else {
document.getElementById('s'+i).style.display="none";
}
}
}
</script>

This line of code execute a for cycle from 1 to 3, where 3 is the total number of submenu you have in your HTML code (in this example #S1, #S2, #S3):

for(i=1;i<=3;i++)...


If you want to add a new link in the main menu with a new submenu related at this link, increase the condition (3) of one unit (4):

for(i=1;i<=4;i++)...


...and in the HTML code (step 1), remember to add a new ul element with ID="s4" in this way:

<ul id="s4">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>


It's all!

Download source code


Related Content
Simple CSS vertical menu Digg-like
Two CSS vertical menu with show/hide effects

blog comments powered by Disqus
Jaswinder Virdee said...

Very Simple with minimal javascripting just what i was looking for. Thanks!

karim said...

This could so easily be done without javascript!
Only with CSS, remember eric meyer's tooltip?

Sindre Sørhus said...

Another fantastic article!

ijajaja said...

I have never expected that it's so easy like that to create that kinda menu. Good job!!! Thanks

Shushu said...

Would also be cool to see css only solution. Good work never the less.

Leon said...

Not very accessible. You could have given each a href and a class of, say "submenu" and then had external javascript return the value of false. The href attribute, if javascript was disabled, would then link to a page with each category.

Anonymous said...

Nice post, and nice design. Thanks!

Ross said...

Cool idea, the javascript could be a little more friendly however. Using hijax method instead of inline.

Binny V A said...

@karim and others
A CSS only solution is possible - but it will not work on substandard *cough*IE*cough* browsers.

ellen said...

Is there a way to have the hover on "contact us" (no submenu) not have the drop-down menu residual from the neighboring tab. In other words, have the drop-down menu be blank for tabs without submenus.

Jonathan Melville said...

I think this is a nice tutorial, but the menu becomes completely unusable without javascript. Instead of being real links to something useful, the anchors are just "#". It would be nice if you had used javascript to cause the transition on the submenu for those visitors who do have javascript enabled, but used actual clickable links for those who have disabled javascript or if by chance the javascript failed to execute. I feel like all anchors should be real (not #), and javascript can be used to change the behavior of those anchors.

Hasanga said...

Woow! nice code this is....

one question!
is there a way to indicate the current page with this menu?
say if im at news page, so can i higlight the "news" on the menu?

Thanks!

Joel said...

When CSS is turned off/screen readers used I have found that submenus works best as a nested UL instead of a separate list.

Also I know that loop is small with only 4 items but I have found as it gets larger the script will get slower. So a solution is to store the last submenu on and turn that submenu off before turning the new submenu on and you will get a more responsive UI.

That's just my two cents, your mileage may vary.

Anonymous said...

I wish there was a way to do this and the menu still able to work to some degree even if java was disabled.

Anonymous said...

Forgive me, I'm just getting started with web coding. How would I get the whole menu to be contained in a css sheet so that the nav bar is there on every page?

Advocatus D. said...

Nice resource! I find these menus really irritating, though. But it's très cool to see one way it could be done. Thanks.

diego jimenez said...

Anyone knows how to validate the script code?

This menu is really simple and easy, but it should be valid too...

Dark Jels said...

I liked your post.
Will you help me to know
how to do this in blogger?

please explain me
Submenu....!!!

Anonymous said...

Very tidy - thanks for the code!

south side hospital said...

hey

this menu is very good..i really like it...i would like to create another row in menu items..is it possible to do it?..please,let me know

thank you

Tony said...

Couple of questions regarding this code.
1.) how would you go about displaying the sub menu if an selection was made in the main menu?

2.) keep the sub menu displayed if selecting an item in the sub menu.

Also, how might someone go about using an active or current css class on the main while moving through pages in the sub nav menu?

Anonymous said...

Thanks, i was searching for something to get me going in the right direction and not just taking complex code and trying to change it to fit the spec. I can now build a dynamic menu system with as little code as possible. K.I.S.S.

Pbirdblog said...

Hey,Antonio

That's Very Simple with minimal javascripting just what i was looking for.


Thanks!

Penang Factory Admin said...

Thanks for the tutorial. However I cannot get the submenu to work. Any idea what could be wrong?

Business Blog said...

you did very well,
I was loking for somthing like that.
thank you and I will tray it for suer..

Anonymous said...

Great menu, works very fine in firefox but,
Is there any way to make this menu work in internet explorer 7? The submenu isn't changing when the page is browsed in IE.
Thanks

sindhu said...

very helpfull article..great work..Thanks!!!

Mak said...

Please, how can I set the selected tab with another color to be distinguished from the other tabs?
Thanks

  • 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