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 PreviewStep 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">
</div>
<!-- SUB MENU -->
<div id="sublinks">
<ul id="s3">
</div>
<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><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>
</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><li><a href="#">Information</a></li>
<li><a href="#">News</a></li>
<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><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 id="s3">
<li><a href="#">Rock</a></li>
<li><a href="#">Pop</a></li>
<li><a href="#">Classical</a></li>
</ul><li><a href="#">Pop</a></li>
<li><a href="#">Classical</a></li>
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;}
/* ----------- 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>
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><li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
It's all!
Download source codeRelated Content
Simple CSS vertical menu Digg-like
Two CSS vertical menu with show/hide effects
