Skip to Page Content

Chris Cassell Dot Net

• Home
• Log
• Portfolio
• Projects
• Classes
• Contact

Other Entries

• Previous: Another Statistic
• Current: Log Home
• Next: Kung-Tunes-like Script for Windows
• Archives: Log Index

Log

Pressed Links in CSS Navigation Lists

There are some great tutorials out there about using unordered lists and css to mark up and present navigation bars, but they generally miss a point I made some time ago about removing the link to the current page. There’s often a method of visually distinguishing the current page, but it doesn’t actually remove the link. So here’s my solution.

It’s a simple trick: put the pressed style on the list items rather than on a “pressed” classed link. When you remove the link, the pressed style shows.

This requires placing the id on the li rather than the link and using contextual selectors to assign styles for the links. Additionally, the links and list items need to be exactly the same size and in the same position.

Let’s look at some code. Here’s the main nav bar on this site as it appears on the homepage:

<ul id="nav">
  <li id="home">Home</li>
  <li id="log"><a href="/log/">Log</a></li>
  <li id="portfolio"><a href="/portfolio/">Portfolio</a></li>
  <li id="projects"><a href="/projects/">Projects</a></li>
  <li id="classes"><a href="/classes/">Classes</a></li>
  <li id="contact"><a href="/contact/">Contact</a></li>
</ul>

Pretty basic: an unordered list with an id on each list item. We’ll use those ids to assign specific background images.

And here’s the relevant css:

ul#nav li, ul#nav a {
  display: block;
  width: 114px;
  height: 18px;
  text-indent: 200em;
  overflow: hidden;
  text-decoration: none;
  }
ul#nav li {
  float: left;
  position: relative;
  background-position: 0 -18px;
  }
ul#nav a {
  position: absolute;
  top: 0;
  left: 0;
  }
li#home, li#home a {
  background: url(/graphics/buttons/home.gif) no-repeat;
  }
li#log, li#log a {
  background: url(/graphics/buttons/log.gif) no-repeat;
  }
li#portfolio, li#portfolio a {
  background: url(/graphics/buttons/portfolio.gif) no-repeat;
  }
li#projects, li#projects a {
  background: url(/graphics/buttons/projects.gif) no-repeat;
  }
li#classes, li#classes a {
  background: url(/graphics/buttons/classes.gif) no-repeat;
  }
li#contact, li#contact a {
  background: url(/graphics/buttons/contact.gif) no-repeat;
  }
ul#nav a:hover {
  background-position: 0 -36px;
  }

And here’s the background image I’m using for the home button:

Most of this is pretty standard stuff: I’m using Dave Shea’s css sprite method for the background images and the standard method for making nav bars from unordered lists. Nothing groundbreaking. The difference is that rather than assigning a class to the home link, I’m actually removing the link.

Here’s a breakdown of the important css:

ul#nav li, ul#nav a {
  display: block;
  width: 114px;
  height: 18px;
  ...

The list items and the links inside them are both set to display as block and are given the same width and height.

ul#nav li {
  float: left;
  position: relative;
  background-position: 0 -18px;
  }

The list items are floated left and they’re positioned relatively, which doesn’t have any visual effect, but allows child elements to be positioned relative to them. The background position is set to the negative of their height; I haven’t set background images yet, but I will.

ul#nav a {
  position: absolute;
  top: 0;
  left: 0;
  }

The links are absolutely positioned to the top left corner of the relatively positioned list items. This prevents issues with line-height, even though they should display block. The links are now the same width and height as the list items and they occupy exactly the same spot.

li#home, li#home a {
  background: url(/graphics/buttons/home.gif) no-repeat;
  }

Each list item and nav link is assigned the same background image. Remember that the list item has the background position set, so that a different part of the background image shows up.

ul#nav a:hover {
  background-position: 0 -36px;
  }

Set the hover pseudo-class for the link, so a different part of the background image show up when hovering with the mouse.

And that’s it. The list items now have a pressed image that’s stacked beneath the links’ normal and hover images. Remove a link and you get the pressed image.

Applying this to a more complex nav bar with dropdown menus is simple—just add extra styles to include the nested lists.

07/06/05 09:53AM Accessibility and Usability Design Geekiness

Comments

Add a Comment

Have something to say about what I wrote here? Let’s hear it!

The Rules

• Your name and email address are required, but your email will not be displayed on the site
• If you provide a URL, a link to your site will appear
• You may use the following HTML:
  • <strong>bold</strong>
  • <em>italic</em>
  • <a href="http://url">links</a>
• Double line breaks will be converted to paragraphs.
• As you type, you should get a nice little preview of your comment directly below the text box.
• I reserve the right to edit any comment for any reason (I’ll be reasonable).