Auto‐Sizing Pure CSS Menus

Download

If you want to use the CSS menu stylesheet, you will probably want to right‐click and save this link. It includes nearly everything from this page in text format in the comments, as well as the actual CSS. Menu Stylesheet

Features

Arbitrarily nested submenus
Menu separators
No JavaScript (will function even if the user has turned scripting off)
Plain HTML list syntax (no new, complex format to learn)
Accessible (since it is just a list)
Degrades gracefully in the absence of sufficient CSS support (plain nested lists in Lynx, IE)
Fully functional in Firefox 1.0, Opera 8.0
Menus widen to handle long menu item labels
Automatically adds arrows for submenus
Documentation to aid in usage and customization

Example Menu Output

Example Menu Source

<ul class="menu">

      <li class="submenu">
      File
      <ul>
        <li><a href="http://www.google.com/">Open</a></li>
        <li><a href="http://www.google.com/">Save</a></li>
        <li class="submenu">
        More
        <ul>
          <li><a href="http://www.google.com/">Import</a></li>
          <li><a href="http://www.google.com/">Export</a></li>
        </ul>
        </li>
        <li class="separator">&#xa0;</li>
        <li><a href="http://www.google.com/">Exit</a></li>
      </ul>
      </li>

      <li class="submenu">
      Edit
      <ul>
        <li><a href="http://www.google.com/">Cut</a></li>
        <li><a href="http://www.google.com/">Copy</a></li>
        <li><a href="http://www.google.com/">Paste</a></li>
      </ul>
      </li>

      <li class="submenu">
      Search
      <ul>
        <li><a href="http://www.google.com/">Find</a></li>
        <li><a href="http://www.google.com/">Replace</a></li>
      </ul>
      </li>

      <li class="submenu">
      Help
      <ul>
        <li><a href="http://www.google.com/">About</a></li>
        <li><a href="http://www.google.com/">Index</a></li>
      </ul>
      </li>

    </ul>

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 <head> section of your HTML file:
<link rel="stylesheet" type="text/css" href="menu-stylesheet.css" />

Build your menu like the one shown above.

Main Points

Menus (including the menu bar, which I'm considering to be a menu) are ul's.
The top‐level ul should have class 'menu'.
Submenu ul's should use neither 'menu' nor 'submenu' as classes.
Menu items are li's.
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.
li's without children should have a link containing a text label as their only child.
Menu separators can be created with the following code:
<li class="separator"> </li>

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:

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)
menu_padding_left: padding on the left side of the menu items
menu_padding_right: padding on the right side of the menu items
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.

Legal

Auto‐sizing pure CSS/list menus.

I place this page and the CSS menu stylesheet 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 the GNU GPL FAQ):

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.