CSS tabbed menu with submenus
The CSS styles:
/*** GLOBAL ***/
HTML {
cursor: default;
}
/*** MENU ***/
DIV#MenuManagerDiv {
width: auto !important;
height: auto !important;
text-align: left !important;
vertical-align: top !important;
margin: 0px 0px 0px 0px; /* T R B L */
padding: 0px 0px 0px 0px; /* T R B L */
}
UL.MenuList {
display: block !important;
list-style-type: none;
margin: 0px 0px 0px 0px; /* T R B L */
padding: 0px 0px 0px 0px; /* T R B L */
text-align: center;
}
LI.MenuListItem {
list-style-type: none;
float: left;
}
LI.MenuListItem > DIV.CaptionWrapper {
/* Set the Menu Caption width */
width: 80px;
height: auto;
display: block;
text-align: center;
}
DIV.CaptionWrapper:hover > SPAN.CaptionText {
font-family: Verdana, Sans-Serif;
font-size: 9pt;
color: #ff0000; /* Red */
}
SPAN.CaptionText {
font-family: Verdana, Sans-Serif;
font-size: 9pt;
color: #030; /* Green */
}
/************************************** SUBMENUS ***/
TABLE.GlobalSubmenuContainer {
display: none;
}
TD.GlobalSubmenuWrapper_Cell {
background-color: #FFFFDC;
color: #000; /* Black */
border: solid 1px #ff9900;
padding: 2px 2px 2px 2px; /* T R B L */
cursor: hand;
}
/**............................... PRODUCTS SUBMENU **/
TABLE.SubmenuWrapper_Products {
/* the table width must be set */
width: 300px;
}
A.ProductsSubmenuLink:link, A.ProductsSubmenuLink:visited {
font-family: Verdana, Sans-Serif;
font-size: 9pt;
color: #000; /* Black */
text-decoration: none;
}
A.ProductsSubmenuLink:hover {
font-family: Verdana, Sans-Serif;
font-size: 9pt;
color: #FF0000; /* Red */
text-decoration: underline;
}
/***.............................. SHOW / HIDE THE PRODUCTS SUBMENU ***/
DIV.CaptionWrapper:link > TABLE.SubmenuWrapper_Products {
display: none;
}
DIV.CaptionWrapper:visited > TABLE.SubmenuWrapper_Products {
display: none;
}
DIV.CaptionWrapper:hover > TABLE.SubmenuWrapper_Products {
display: block;
}
/**............................... SERVICES SUBMENU **/
TABLE.SubmenuWrapper_Services {
/* the table width must be set */
width: 300px;
}
A.ServicesSubmenuLink:link, A.ServicesSubmenuLink:visited {
font-family: Verdana, Sans-Serif;
font-size: 9pt;
color: #FF0000; /* Red */
text-decoration: none;
}
A.ServicesSubmenuLink:hover {
font-family: Verdana, Sans-Serif;
font-size: 9pt;
color: #000; /* Black */
text-decoration: underline;
}
/***.............................. SHOW / HIDE THE SERVICES SUBMENU ***/
DIV.CaptionWrapper:link > TABLE.SubmenuWrapper_Services {
display: none;
}
DIV.CaptionWrapper:visited > TABLE.SubmenuWrapper_Services {
display: none;
}
DIV.CaptionWrapper:hover > TABLE.SubmenuWrapper_Services {
display: block;
margin-left: -80px; /* minus the width of the first DIV.CaptionWrapper */
}
The XHTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS tabbed menu with submenus</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="MasterStyleSheet.css" media="screen" rel="stylesheet"
type="text/css" />
</head>
<body>
<div id="MenuManagerDiv">
<ul class="MenuList">
<li class="MenuListItem">
<div class="CaptionWrapper">
<span class="CaptionText">Products</span>
<table cellpadding="0" cellspacing="3" class="GlobalSubmenuContainer
SubmenuWrapper_Products">
<tr>
<td class="GlobalSubmenuWrapper_Cell">
<a class="ProductsSubmenuLink" href="#">Product 1</a></td>
<td class="GlobalSubmenuWrapper_Cell">
<a class="ProductsSubmenuLink" href="#">Product 2</a></td>
<td class="GlobalSubmenuWrapper_Cell">
<a class="ProductsSubmenuLink" href="#">Product 3</a></td>
</tr>
</table>
</div>
</li>
<li class="MenuListItem">
<div class="CaptionWrapper">
<span class="CaptionText">Services</span>
<table cellpadding="0" cellspacing="3" class="GlobalSubmenuContainer
SubmenuWrapper_Services">
<tr>
<td class="GlobalSubmenuWrapper_Cell">
<a class="ServicesSubmenuLink" href="#">Service 1</a></td>
<td class="GlobalSubmenuWrapper_Cell">
<a class="ServicesSubmenuLink" href="#">Service 2</a></td>
<td class="GlobalSubmenuWrapper_Cell">
<a class="ServicesSubmenuLink" href="#">Service 3</a></td>
</tr>
</table>
</div>
</li>
</ul>
</div>
</body>
</html>
To add another Tab Menu and Submenus to the current menu, append this list item code block to the existent list showed above:
<li class="MenuListItem">
<div class="CaptionWrapper">
<span class="CaptionText">Another</span>
<table cellpadding="0" cellspacing="3" class="GlobalSubmenuContainer SubmenuWrapper_Another">
<tr>
<td class="GlobalSubmenuWrapper_Cell">
<a class="AnotherSubmenuLink" href="#">Another 1</a></td>
<td class="GlobalSubmenuWrapper_Cell">
<a class="AnotherSubmenuLink" href="#">Another 2</a></td>
<td class="GlobalSubmenuWrapper_Cell">
<a class="AnotherSubmenuLink" href="#">Another 3</a></td>
</tr>
</table>
</div>
</li>
When you add another code block as the one above, you should rename:
- the table second class
- the links class name (if you want it to look different)
and add another code block in the css file:
/**............................... ANOTHER SUBMENU **/
TABLE.SubmenuWrapper_Another {
/* the table width must be set */
width: 300px;
}
A.AnotherSubmenuLink:link, A.AnotherSubmenuLink:visited {
font-family: Verdana, Sans-Serif;
font-size: 9pt;
color: #FF0000; /* Red */
text-decoration: none;
}
A.AnotherSubmenuLink:hover {
font-family: Verdana, Sans-Serif;
font-size: 9pt;
color: #000; /* Black */
text-decoration: underline;
}
/***.............................. SHOW / HIDE THE Another SUBMENU ***/
DIV.CaptionWrapper:link > TABLE.SubmenuWrapper_Another {
display: none;
}
DIV.CaptionWrapper:visited > TABLE.SubmenuWrapper_Another {
display: none;
}
DIV.CaptionWrapper:hover > TABLE.SubmenuWrapper_Another {
display: block;
margin-left: -160px; /* minus the width of the first DIV.CaptionWrapper and the width of the previous DIV.CaptionWrapper */
}
This code was tested in:
- FireFox 2.0
- Opera 9
- IE 7
