0 users
Search

Friday, May 30, 2008

Pastel color menu with dynamic submenu using CSS

0 users

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

Sponsored Links

11 comments

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.

Facebook | Feeds rss About Me

Antonio Lupetti
Engineer, Pro Blogger, Mac user, Musician, Web Addicted.
ROME - ITALY antonio.lupetti@gmail.com

Subscribe feeds rss Feed RSS

Your Email (Subscribe my feed via e-mail)

Recent Entries

What's new on woork...

Twitter

What I'm doing?

Categories and Links

Categories

Browse this blog for topic...

Social Networks

My Social Networks identity...

Table of content

Did you miss something? Take a look at my table of content.
Read more...

Advertising

How to promote a site, a product or a service on woork
Read more...

Buy a review Site reviews

Technorati Authority

Technorati
Woork authority on technorati
Add this blog to your faves
View blog authority