CSS for Navigation

Eric A. Meyer

Principal, Complex Spiral Consulting

http://www.complexspiral.com/

Tripping the list fantastic

<ul id="navigation">
<li><a href="index.html" id="home">WidgetCo Home</a></li>
<li><a href="products.html" id="products">Products</a></li>
<li><a href="services.html" id="services">Services</a></li>
<li><a href="fun.html" id="fun">Widgety Fun!</a></li>
<li><a href="support.html" id="support">Support</a></li>
<li><a href="about.html" id="current">About Us</a></li>
<li><a href="contact.html" id="contact">Contact</a></li>
</ul>

Making a sidebar

/* simple separators */
#navigation {padding: 0; margin: 0;
  font: bold 12px Verdana, sans-serif;
  border-bottom: 1px solid gray; width: 13em;}
#navigation li {list-style: none; margin: 0; padding: 0.25em;
  border-top: 1px solid gray;}
#navigation li a {text-decoration: none;}
/* panelize */
#navigation {padding: 1px; margin: 0;
  font: bold 12px Verdana, sans-serif;
  border: 2px solid; border-color: #AAA #EEE #EEE #AAA;
  background: #CCC; width: 13em;}
#navigation li {list-style: none; margin: 0; padding: 0.25em 1em;
  border: 1px solid; border-color: #FFF #AAA #AAA #FFF;
  text-align: center;}
#navigation li a {text-decoration: none;}
#navigation li a:link {color: black;}
#navigation li a:visited {color: gray;}
/* highlighting and border effects */
#navigation {padding: 0 1px 1px; margin: 0;
  font: bold 12px Verdana, sans-serif;
  background: gray; width: 13em;}
#navigation li {list-style: none; margin: 0; border-top: 1px solid gray;
  text-align: left;}
#navigation li a {display: block; padding: 0.25em 0.5em 0.25em 0.75em;
  border-left: 1em solid #AAB; background: #CCD;
  text-decoration: none;}
#navigation li a:link {color: #448;}
#navigation li a:visited {color: #667;}
#navigation li a:hover {border-color: #FE3; color: #FFF; background: #332;}

Making a navbar

/* simple inlining of previous example */
#navigation {padding: 0 1px 1px; margin: 0;
  font: bold 12px Verdana, sans-serif;}
#navigation li {list-style: none; margin: 0; border-top: 1px solid gray;
  display: inline;}
#navigation li a {padding: 0.25em 0.5em 0.25em 0.75em;
  border-left: 1em solid #AAB; background: #CCD;
  text-decoration: none;}
#navigation li a:link {color: #448;}
#navigation li a:visited {color: #667;}
#navigation li a:hover {border-color: #FE3; color: #FFF; background: #332;}
/* traditional navbar */
#navigation {padding: 3px 0; margin: 0;
  border: 1px solid #BBC; background: #DDE;
  font: bold 12px Verdana, sans-serif;}
#navigation li {list-style: none; margin: 0;
  display: inline;}
#navigation li a {padding: 3px 0.5em;
  border-right: 1px solid #BBC;
  text-decoration: none;}
#navigation li a:link {color: #448;}
#navigation li a:visited {color: #667;}
#navigation li a:hover {border-color: #88C; color: #000; background: #AAE;}
/* tabbed styles */
#navigation {padding: 3px 0; margin: 0;
  border-bottom: 1px solid #778;
  font: bold 12px Verdana, sans-serif;}
#navigation li {list-style: none; margin: 0;
  display: inline;}
#navigation li a {padding: 3px 0.5em; margin-left: 3px;
  border: 1px solid #778; border-bottom: none;
  background: #DDE;
  text-decoration: none;}
#navigation li a:link {color: #448;}
#navigation li a:visited {color: #667;}
#navigation li a:hover {color: #000; background: #AAE;
  border-color: #227;}
/* "current tab" style */
#navigation li a#current {background: white; border-bottom: 1px solid white;}

Link Highlighting

/* approach using classes and IDs */

body.home a#home, body.products a#products, body.services a#services, 
body.fun a#fun, body.support a#support, body.about a#about, 
body.contact a#contact {background: white; border-bottom: 1px solid white;}

/* approach using "current" ID inserted into page */
#navigation li a#current {background: white; border-bottom: 1px solid white;}

Another quick effect

<ul id="navigation">
<li id="title"><h4>Navigation</h4></li>
<li><a href="index.html">WidgetCo Home</a></li>
<li><a href="products.html">Products</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="fun.html">Widgety Fun!</a></li>
<li><a href="support.html">Support</a></li>
<li><a href="about.html" id="current">About Us</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
#navigation {padding: 0; margin: 2em 0 0;
  font: bold 12px Verdana, sans-serif;
  background: white; width: 11em;
  border: 1px solid gray; border-width: 1px 1px 0 0;}
#navigation li {list-style: none; padding: 0; margin: 0.5em 0;
  text-align: right;}
#navigation li a {padding-right: 0.5em; border-bottom: 1px solid gray;
  text-decoration: none;}
#navigation li a:link {color: #448;}
#navigation li a:visited {color: #667;}
#navigation li a:hover {border-color: red; color: #000;}
#navigation h4 {display: inline; margin: 0; padding: 1px 0.33em;
  position: relative; top: -1em; font-size: 1.1em;
  background: white; border: 1px solid gray;}
#navigation #title {text-align: left;}

So what's the catch?

The Future?

In Closing