/*
* Auto-sizing pure CSS/list menus.
* Copyright (C) 2005 Chris Povirk (beigetangerine (AT) gmail (DOT) com)
* http://twofoos.org/content/cssmenus/
*
* I place this stylesheet, including all comments, in the public domain.
* You may use, modify, and distribute them for whatever purposes you wish, with or without this notice.
* No further permission is required.
*
* Disclaimer (adapted from GNU GPL):
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
*/
/*
FEATURES
o Arbitrarily nested submenus
o Menu separators
o No JavaScript (will function even if the user has turned scripting off)
o Plain HTML list syntax (no new, complex format to learn)
o Degrades gracefully in the absence of CSS support (e.g., plain nested lists in lynx)
o Fully functional in Firefox 1.0, Opera 8.0
o Menus widen to handle long menu item labels
o Automatically adds arrows for submenus
o Documentation to aid in usage and customization
*/
/*
USAGE
First, of course, you must put some code in your HTML file to tell browsers to use this stylesheet.
If this stylesheet is located in the same directory as the HTML file that you want to use it, it is sufficient to put this line in the section of your HTML file:
Build your menu like the one shown below.
Main points:
o Menus (including the menu bar, which I'm considering to be a menu) are ul's.
o The top-level ul should have class 'menu'.
o Submenu ul's should use neither 'menu' nor 'submenu' as classes.
o Menu items are li's.
o li's with child menus should have class 'submenu' and should have no other children except some text before the ul child. This text will be the menu label, and it should NOT be a link, nor should it contain any links.
o li's without children should have a link containing a text label as their only child.
o Menu separators can be created with the following code:
*/
/*
CUSTOMIZATION
You can, of course, safely fiddle with fonts and colors without breaking anything.
The same goes for borders.
The other changes you may be interested in are those relating to menu size.
Because CSS does not support constants, these changes are not as easy to make as I would like.
To simplify the process, I have labeled the places where I would have used constants.
At the time of this writing, the "constants" are:
o menu_line_spacing: line height of menu items (not to be confused with font size, which you can set by adding an appropriate rule in the 'ul.menu, ul.menu ul' section)
o menu_padding_left: padding on the left side of the menu items
o menu_padding_right: padding on the right side of the menu items
o min_menu_width: minimum width of menu items, NOT including padding. Note that menus WILL widen to accomodate larger menu item labels; HOWEVER, submenus from any of their menu items will not appear to their far right (as they would if each menu item fit into min_menu_width) but instead somewhere toward the middle of the menu item
Thus, the code contains lines like these:
margin-left: 5.1em; / * min_menu_width + menu_padding_right * /
The above line indicates that if you want min_menu_width to be 5em and menu_padding_right to be .6em, you should change 5.1em to 5.6em, since 5em + .6em = 5.6em.
*/
/**************/
/* BEGIN CODE */
/**************/
/* Menu bar and menus */
ul.menu,
ul.menu ul
{
/* Using table instead of block because otherwise, list will not expand if an item label is too long. */
display: table;
line-height: 1.5em; /* menu_line_spacing */
/* [firefox] */
padding-left: 0em;
/* [/firefox] */
/* [opera] */
margin-left: 0em;
/* [/opera] */
cursor: default;
font-family: sans-serif;
/* [opera] */
/* Both of these lines are necessary to properly size submenus in Opera. */
min-width: 6.1em; /* min_menu_width + menu_padding_left + menu_padding_right */
/* Anything but 0 seems to work. */
width: .1em;
/* [/opera] */
}
/* Menu bar */
ul.menu
{
border: .1em solid #404040;
}
/* Open menus */
ul.menu li:hover > ul
{
visibility: visible;
}
ul.menu li.submenu,
ul.menu li.submenu:after
{
/* Keep arrow on the same line as the label. */
white-space: nowrap;
}
ul.menu li.submenu:after
{
content: "\002023";
direction: rtl;
width: 100%;
display: block;
margin-top: -1.5em; /* -menu_line_spacing */
/* [opera] */
padding-left: .6em; /* based subjectively off menu_padding_right */
/* [/opera] */
/* [firefox] */
margin-right: -.4em; /* based subjectively off menu_padding_right */
/* [/firefox] */
}
/* Menus */
ul.menu li > ul
{
/* [firefox] */
/* We use 'visiblity: collapse' instead of 'visibility: hidden' because when we use the latter, Firefox displays nested submenus at the top of their parent menus instead of next to the appropriate menu items. */
visibility: collapse;
/* [/firefox] */
position: absolute;
margin-left: 5.1em; /* min_menu_width + menu_padding_right */
margin-top: -1.5em; /* -menu_line_spacing */
border: .1em outset #404040;
/* Keep arrows from appearing on top of submenus. */
z-index: 1;
}
/* Menu items */
ul.menu li
{
display: block;
color: #000000;
}
/* Menu bar, menus, and menu separators */
ul.menu,
ul.menu ul,
ul.menu li.separator:hover
{
background-color: #dbdbdb;
}
/* Menu items on hover */
ul.menu li:hover
{
/* background-color: #4040b0;*/
background-color: #2c2ca0;
color: #ffffff;
}
/* Links in menu bars and menus */
ul.menu :link,
ul.menu :visited
{
text-decoration: inherit;
color: inherit;
/* Make them wide. */
display: block;
/* Comment out for hand/pointer cursor over links in menu. */
cursor: default;
}
/* All menu items, sort of. We use link blocks, rather than li blocks, where possible in order to make the padding part of the link. */
ul.menu :link,
ul.menu :visited,
ul.menu li.submenu
{
padding-left: 1em; /* menu_padding_left */
padding-right: .6em; /* menu_padding_right */
min-width: 4.5em; /* min_menu_width */
}
/* Menu separators */
ul.menu li.separator
{
font-size: .1em;
margin-top: .1em;
margin-bottom: .1em;
border-top-width: .1em;
border-top-style: groove;
border-top-color: #404040;
height: .1em;
}
/* You want li.submenu, not ul.submenu -- show that it's broken. */
ul.menu ul.submenu,
ul.menu ul.submenu:before
{
display: block;
color: red;
background-color: yellow;
font-weight: bold;
content: "Warning: Use li.submenu, not ul.submenu";
}
/*
* Implementation note:
*
* The use of 'visibility' instead of 'display' works around the following menu bug, which appeared in Firefox:
* o Submenu arrows jump slightly to the right.
* This seems to occur only once you have hovered over each of the items in the main menu.
* It seems to occur only when the min_menu_width is set larger than necessary.
*/