CSS for Navigation

• CSS For Navigation
• www.Seybold365.com/sf2003

Tripping the list fantastic

• Navbars, toolbars, sidebars—they all have one thing in common: they're collections of links
• We can represent such a collection as a list and style it
• With this simple structure, we have a lot of presentational flexibility
• Whether the list is ordered or not is up to you; unordered is more likely the sensible choice

<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

• By removing the bullets and indentation, we have what looks like break-separated text
• We can get a lot done just by styling the li elements
• Separators are a breeze, and you can cap the list using the ul element
• It can be a panel, an open list, almost anything you want

/* 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

• It's a little trickier, but you can turn a list into a horizontal navbar
• Instead of blocking out links, we need to make the list itself inline
• Now we can visually separate the links with borders
• Watch out for how inline elements behave in different browsers, especially whitespace between them
• With some creative styling, we can even create a "tabbed" interface

/* 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

• Highlighting the current page (or section) can be driven using IDs and classes
• For example, we could class the page while ID'ing the links... or vice versa
• The CSS is a little convoluted, but it beats most alternatives
• Another possibility is just to insert a "current" ID on the appropriate link (a great approach for CMS systems)

/* 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

• Let's go back to the panel and add a heading
• By making the heading inline, we end up "shrink-wrapping" the text
• Adding a background color obscures pieces of other elements
• Relative positioning moves the element out of its usual place
• Some changes to backgrounds, borders, and text alignment, and we have a whole new menu look

<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?

• Maybe none—it depends on your visitor demographics
• NN4.x is not going to respond well to the inline list technique, and IE4 isn't likely to be much happier
• If you hide the styles from old browsers, they'll just render an unordered list
• That could be okay for a sidebar, depending on how you place it on the page
• Weigh the old-browser situation against the accessibility and efficiency wins

The Future?

• It's possible to create popup menus without JavaScript!
• The key here is arbitrary-element hover styling
• Suppress sublists by default, then reveal them on hover
• There are some limitations versus JS-driven menus

• Pure CSS Menus (css/edge)

In Closing

• Please give us feedback on this session and the event as a whole
• Contact paths:
  • Eric A. Meyer: eric@meyerweb.com | http://www.complexspiral.com/contact/
  • Conference site: http://www.seybold365.com/
  • Craig Cline: Craig.Cline@medialiveintl.com
  • Bill Cullifer: bill@joinwow.org
  • Molly Holzschlag: molly@molly.com
• Many thanks for your time and attention!