Menu widget - no jQuery nor Javascript required - pure CSS

Posted by Renso on Geeks with Blogs See other posts from Geeks with Blogs or by Renso
Published on Thu, 17 Feb 2011 14:19:48 GMT Indexed on 2011/02/17 15:26 UTC
Read the original article Hit count: 494

Filed under:

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>

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;
}

Developer IT