COMM 223 - Introduction to Web Site Design and Construction

CSS Cheat Sheet: Menus

 

Basic CSS Menus
 

Create a vertical list of your navigation names.

Link them to their pages.

Put a title tag into your bulleted links like this for accessibility:

<li><a href="index.htm" title="Homepage">Home</a></li>
Remove bullets and set margins
ul, li {
        margin: 0;
        padding: 0;
        list-style: none;
        }
Decorate the menu
li a {
display: block; width: 8em; line-height: 2em; font-size: 1em; text-decoration: none; background: #D5973C; color: white; padding: .2em 0 .2em 1em; margin-bottom: .2em; /*either use this to separate the boxes, or*/ border-bottom: .125em solid white; /*...use this to separate the boxes with a border*/ }
Create a rollover color
li a:hover, li a:focus {
        background: #87492F;  
        }
If you don't like the look of the border at the bottom of your menu, try this.
li:last-child a {
        border-bottom: none;
        } 

How to create a horizontal menu with HTML and CSS.

Create a vertical list of your navigation names. Wrap the list with a <nav> tag. To make the Micro-Clearfix code below work, change the opening <nav> tag by adding a class of cf, like this:
<nav class="cf">

Link them to their pages. Put a title tag into your bulleted links like this for accessibility:
 <li><a href="index.htm" title="Home page">Home</a></li>

Put the following code into the CSS. It prevents problems with the float property we're about to use.
/*micro-clearfix by Nicolas Gallagher http://nicolasgallagher.com/micro-clearfix-hack/*/
/* For modern browsers */
.cf:before, .cf:after { content:""; display:table; } .cf:after { clear:both; }
/* For IE 6/7 (trigger hasLayout) */ .cf { zoom:1; }
Create a background color and size for menu (this will wind up being a colored line at the bottom of the menu
nav {
        background: #916A31;
        height: 2.3em;
        }
Remove bullets, set margins and display horizontaly
ul, li {
        margin: 0;
        padding: 0;
        list-style: none;
        float: left;
        }
Optional: create a background color for the menu bar (covers most of the menu)
ul {
        background: #D5973C;
        height: 2em;
        width: 100%;
        }
Decorate the menu
li a {
display: block; line-height: 2em; padding: 0 1em; color: white; text-decoration: none; }
Optional: Create roll-over effect
li a:hover {
        background: #916A31; /*same as nav background*/
        height: 2em;
        padding-top: .3em;
        position: relative;
        top: -.3em;
        border-radius: .3em .3em 0 0;
        }

Optional: Having a menu item (from above menu) indicate the page you are on

Add the class comment to the menu item on the individual page in question (for instance, on the home page put it in this line)
<li><a href="home.htm" title="Home page" class="current">Home</a></li>
Then, add this code to the CSS (modify to taste)
.current, a:hover.current  {
        background: #AD9B7F;
        color: #eee;
        padding-top: .3em;
        border-radius: .3em .3em 0 0;
        position: relative;
        top: -.3em;
        border-bottom: .3em solid #917F63;
        cursor: default;
        }
If you are using different colors you will have to address that in the code above.