Goal:
Create a
menu widget that does not require any javascript, extremely lightweight, very fast, soley based on CSS, compatible with FireFox and Chrome.
Issues:
May have some rendering issues in some versions of IE, sorry :-)
Instruments:
css file
html with specific
menu format
jQuery-ui library - optional if you want to use your own images/colors
Implementation Details:
HTML:
<div id="header">
<div id="header_Menubar">
<ul class="linkList0 ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
<li class="first more ui-state-default ui-corner-top ui-tabs-selected"><a title="Home" href="/Home">Home</a>
<ul class="linkList01 ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
<li class="ifirst ui-state-default ui-corner-top"><abbr title="Go Home"></abbr><a title="Home" href="/Home">Home</a></li>
</ul>
</li>
<li class="more ui-state-default ui-corner-top ui-tabs-selected"><a title="
Menu 2" href="/Menu2a">Menu 2</a>
<ul class="linkList01 ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
<li class="ifirst ui-state-default ui-corner-top"><abbr title="
Menu 2 a"></abbr><a title="
Menu 2 a" href="/Menu2a">Menu 2 a</a></li>
<li class="ilast ui-state-default ui-corner-top"><abbr title="
Menu 2 b"></abbr><a title="
Menu 2 b" href="/Menu2b">Menu 2 b</a></li>
</ul>
</li>
<li class="more red ui-state-default ui-corner-top ui-tabs-selected"><a title="
Menu 3" href="/Menu3 d">Menu 3</a>
<ul class="linkList01 ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
<li class="ifirst ui-state-default ui-corner-top"><abbr title="
Menu 3 a"><a title="
Menu 3 a" href="/Menu3a">Menu 3 a</a></abbr></li>
<li class="ui-state-default ui-corner-top"><abbr title="
Menu 3 b"><a title="
Menu 3 b" href="/Menu3b">Menu 3 b</a></abbr></li>
<li class="ui-state-default ui-corner-top"><abbr title="
Menu 3 c"><a title="
Menu 3 c" href="/Menu3c">Menu 3 c</a></abbr></li>
<li class="ilast ui-state-default ui-corner-top"><abbr title="
Menu 3 d"><a title="
Menu 3 d" href="/Menu3d">Menu 3 d</a></abbr></li>
</ul>
</li>
</ul>
</div>
</div>
CSS:
/* =Menu
----------------------------------------------------------------------------------------- */
#header #header_Menubar
{
margin: 0;
padding: 0;
border: 0;
width: 100%;
height: 22px;
}
#header
{
background-color: #99cccc;
background-color: #aaccee;
background-color: #5BA3E0;
background-color: #006cb1;
}
/* Set
menu bar background color */
#header #header_Menubar
{
background-attachment: scroll;
background-position: left center;
background-repeat: repeat-x;
}
/* Set main (horizontal)
menu typology */
#header .linkList0
{
padding: 0 0 1em 0;
margin-bottom: 1em;
font-family: 'Trebuchet MS', 'Lucida Grande',
Verdana, Lucida, Geneva, Helvetica,
Arial, sans-serif;
font-weight: bold;
font-size: 1.085em;
font-size: 1em;
}
/* Set all ul properties */
#header .linkList0, #header .linkList0 ul
{
list-style: none;
margin: 0;
padding: 0;
list-style-position: outside;
}
/* Set all li properties */
#header .linkList0 > li
{
float: left;
position: relative;
font-size: 90%;
margin: 0 0 -1px;
width: 9.7em;
padding-right: 2em;
z-index: 100; /*IE7: Fix for IE7 hiding drop down list behind some other page elements */
}
/* Set all li properties */
#header .linkList01 > li
{
width: 190px;
}
#header .linkList0 .linkList01 li
{
margin-left: 0px;
}
/* Set all list background image properties */
/*#header .linkList0 li a
{
background-position: left center;
background-image: url( '../Content/Images/VerticalButtonBarGradientFade.png' );
background-repeat: repeat-x;
background-attachment: scroll;
}*/
/* Set all A ancor properties */
#header .linkList0 li a
{
display: block;
text-decoration: none;
line-height: 22px;
}
/* IE7: Fix for a bug in IE7 where the margins between list items is doubled - need to set height explicitly */
*+html #header .linkList0 ul li
{
height: auto;
margin-bottom: -.3em;
}
/* Menu: Set different borders for different nested level lists
-------------------------------------------------------------- */
#header .linkList0 > li a
{
border-left: 10px solid Transparent;
border-right: none;
}
#header .linkList0 > li a
{
border-left: 0px;
margin-left: 0px;
border-right: none;
}
#header .linkList0 .linkList01 > li a
{
border-left: 8px solid #336699;
border-right: none;
border: 1px solid Transparent;
-moz-border-radius: 5px 5px 5px 5px;
-moz-box-shadow: 3px 3px 4px #696969;
}
#header .linkList0 .linkList01 .linkList001 > li a
{
border-left: 6px solid #336699;
border-right: none;
border: 1px solid Transparent;
-moz-border-radius: 5px 5px 5px 5px;
-moz-box-shadow: 3px 3px 4px #696969;
}
#header .linkList0 .linkList01 .linkList001 .linkList0001 > li a
{
border-left: 4px solid #336699;
border-right: none;
border: 1px solid Transparent;
-moz-border-radius: 5px 5px 5px 5px;
-moz-box-shadow: 3px 3px 4px #696969;
}
/* Link and Visited pseudo-class settings for all lists (ul) */
#header .linkList0 a:link, #header .linkList0 a:visited
{
display: block;
text-decoration: none;
padding-left: 1em;
}
/* Hide all the nested/sub
menu items */
#header .linkList0 ul
{
display: none;
padding: 0;
position: absolute; /*Important: must not impede on other page elements when drop down opens up */
}
/* Hide all detail popups */
#header .detailPopup
{
display: none;
}
/* Set the typology of all sub-menu list items li */
/*#header .linkList0 ul li
{
background-color: #AACCEE;
background-position: left center;
background-image: url( '../Content/Images/VerticalButtonBarGradientFade.png' );
background-repeat: repeat-x;
background-attachment: scroll;
}*/
#header .linkList0 ul li.more
{
background: Transparent url('../Content/Images/ArrowRight.gif') no-repeat
right center;
}
/* Header list's margin and padding for all list items */
#header .linkList0 ul li
{
margin: 0 0 0 1em;
padding: 0;
}
#header .linkList01 ul li
{
margin: 0;
padding: 0;
width: 189px;
}
/* Set margins for the third li sibling (Plan a Call) to display to the
right of the parent
menu
to avoid the sub-menu overlaying the
menu items below */
#header .linkList0 li.more .linkList01 li.more > ul.linkList001
{
margin: -1.7em 0 0 13.2em; /*Important, must be careful, if tbe EM since gap increases too much bewteen nested lists the gap will make the nested-list collapse prematurely */
}
/* Set
right hand arrow for list items with sub-menus (class-more) */
#header li.more
{
background: Transparent url('../Content/Images/ArrowRight.gif') no-repeat
right center;
padding-right: 48px;
}
/* Menu: Dynamic Behavior of
menu items (hover, visted, etc)
----------------------------------------------------------- */
#header .linkList0 li a:link, #header .linkList01 li a:link
{
display: block;
}
#header .linkList0 li a:visited, #header .linkList01 li a:visited
{
display: block;
}
#header .linkList0 > li:hover
{
}
#header .linkList01 > li:hover a
,#header .linkList001 > li:hover a
{
text-decoration: underline;
}
#header .linkList0 > li abbr:hover span.detailPopup
{
display: block;
position: absolute;
top: 1em;
left: 17em;
border: double 1px #696969;
border-style: outset;
width: 120%;
height: auto;
padding: 5px;
font-weight: 100;
}
#header .linkList0 > li:hover
,#header .linkList0 .linkList01 > li:hover
{
}
#header .linkList0 .linkList01 .linkList001 > li:hover
{
}
#header .linkList0 .linkList01 .linkList001 .linkList0001 > li:hover
{
}
/* Display the hidden sub
menu when hovering over the parent ul's li */
#header .linkList0 li:hover > ul
{
display: block;
}
/* Display the hidden sub
menu when hovering over the parent ul's li */
#header .linkList0 .linkList01 li:hover > ul
{
display: block;
background: -moz-linear-gradient(top, #1E83CC, #619FCD);
/* Chrome, Safari:*/
background: -webkit-gradient(linear,
center top, center bottom, from(#1E83CC), to(#619FCD));
}
/* Display the hidden sub
menu when hovering over the parent ul's li */
#header .linkList0 .linkList01 .linkList001 li:hover > ul
{
display: block;
}
/* Set
right hand arrow for list items with sub-menus (class-more) on hover */
#header li.more:hover
{
}
Also some CSS for global settings that will affect this
menu, you of course will have some other styling, but included it here so you can see how/why some css properties were set here:
/* Neutralize styling:
Elements we want to clean out entirely: */
html, body
{
margin: 0;
padding: 0;
font: 62.5%/120% Verdana, Arial, Helvetica, sans-serif;
}
/* Neutralize styling:
Elements with a vertical margin: */
h1, h2, h3, h4, h5, h6, p, pre,
blockquote, ul, ol, dl, address {
margin: 0; /* most browsers set some default value that is not shared by all browsers */
padding: 0; /* some borowsers default padding, set to 0 for all */
}
/* Apply left margin:
Only to the few elements that need it: */
li, dd, blockquote {
margin-left: 1em;
}
