Nifty Navigation Tricks Using CSS Article

We’ve just released the new 3rd edition of the SitePoint book The CSS Anthology: 101 Essential Tips, Tricks & Hacks, by Rachel Andrew. To celebrate, we’ve updated this popular article, comprising chapter 4 of the book, with content from the new edition. It’s also available in PDF format, and includes 3 more chapters from the book.Unless you limit yourself to one-page web sites, you’ll need to design navigation. In fact, navigation is among the most important parts of any web design, and requires a great deal of thought if visitors are to move around your site easily.Making site navigation easy is one area in which CSS really comes into its own. Older methods of creating navigation tended to rely on lots of images, nested tables, and JavaScript – all of which can seriously affect the usability and accessibility of a site. If your site cannot be navigated using a device that lacks JavaScript support, for example, you risk blocking users who have turned JavaScript off, as well as locking out text-only devices such as screen readers and search engine robots – they’ll never penetrate past your home page to index the content of your site. If your design clients seem unconcerned about accessibility, tell them their clunky menu is stopping them from achieving a decent search engine ranking!CSS allows you to create attractive navigation that, in reality, is no more than text – text that can be marked up in such a way as to ensure that it’s both accessible and understandable by all those who are unable to physically see your design, but still want to access your content. In this chapter, we’ll look at a variety of solutions for creating CSS-based navigation. Some are suited to implementation on an existing site, to make it load more quickly and boost its accessibility by replacing an old-fashioned, image-based navigation. Others are more suited to incorporation within a pure CSS layout.

How do I style a structural list as a navigation menu?

Navigation is essentially a list of places to visit on your site, so marking up navigation menus as lists makes sense semantically and we can hook our CSS styles to the list elements themselves. However, we want to avoid our navigation looking like a standard bulleted list as rendered by the browser’s internal style sheet.

Solution

The navigation in the figure below is marked up as a list and styled using CSS, as you can see here.Creating navigation by styling a listHere’s the markup required to create the navigation list:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="en-US"><head><title>Lists as navigation</title><meta http-equiv="content-type" content="text/html;charset=utf-8" /><link rel="stylesheet" type="text/css" href="listnav1.css" /></head><body><div id="navigation"><ul><li><a href="#">Recipes</a></li><li><a href="#">Contact Us</a></li><li><a href="#">Articles</a></li><li><a href="#">Buy Online</a></li></ul></div></body></html>

Here’s the complete CSS that transforms our dull unordered list into an attractive menu:#navigation {width: 200px;}#navigation ul {list-style: none;margin: 0;padding: 0;}#navigation li {border-bottom: 1px solid #ED9F9F;}#navigation li a:link, #navigation li a:visited  {font-size: 90%;display: block;padding: 0.4em 0 0.4em 0.5em;border-left: 12px solid #711515;border-right: 1px solid #711515;background-color: #B51032;color: #FFFFFF;text-decoration: none;}

Discussion

To create navigation based on an unordered list – first create your list, placing each navigation link inside a li element: <ul><li><a href="#">Recipes</a></li><li><a href="#">Contact Us</a></li><li><a href="#">Articles</a></li><li><a href="#">Buy Online</a></li></ul>Next, wrap the list in a div with an appropriate ID:<div id="navigation"><ul><li><a href="#">Recipes</a></li><li><a href="#">Contact Us</a></li><li><a href="#">Articles</a></li><li><a href="#">Buy Online</a></li></ul></div>As the following figure shows, this markup looks fairly ordinary with the browser’s default styles applied.A very basic, unstyled listThe first job we need to do is style the container in which the navigation sits – in this case, navigation:#navigation {width: 200px;}I’ve given navigation a width. If this navigation system were part of a CSS page layout, I’d probably add some positioning information to this ID as well.Next, we style the list:#navigation ul {list-style: none;margin: 0;padding: 0;}As the figure below illustrates, the above rule removes list bullets and the indented margin that browsers apply, by default, when displaying a list.Viewing the list after indentation and bullets are removedThe next step is to style the li elements within navigation, to give them a bottom border:#navigation li {border-bottom: 1px solid #ED9F9F;}Finally, we style the link itself:#navigation li a:link, #navigation li a:visited  {font-size: 90%;display: block;padding: 0.4em 0 0.4em 0.5em;border-left: 12px solid #711515;border-right: 1px solid #711515;background-color: #B51032;color: #FFFFFF;text-decoration: none;}Most of the work is done here, creating CSS rules to add left and right borders, removing the underline, and so on. The first property declaration in this rule sets the display property to block. This causes the link to display as a block element, meaning that the whole area of each navigation “button” is active when you move the cursor over it – the same effect you’d see if you used an image for the navigation.

How do I use CSS to create rollover navigation without images or JavaScript?

Site navigation often features a rollover effect: when a user holds the cursor over a menu button, a new button image displays, creating a highlighting effect. To achieve this effect using image-based navigation, you need to use two images and JavaScript.

Solution

Using CSS to build your navigation makes the creation of attractive rollover effects far simpler than it would be if you used images. The CSS rollover is created using the :hover pseudo-class selector – the same selector you’d use to style a hover state for your links.Let’s take the above list navigation example and add the following rule to create a rollover effect:#navigation li a:hover {background-color: #711515;color: #FFFFFF;}The figure below shows what the menu looks like when the cursor is positioned over the first menu item.The CSS navigation showing a rollover effect

Discussion

The CSS we’ve used to create this effect is very simple. You can create hover states for heavily styled links just as you can for standard links. In this example, I simply changed the background color to make it the same as the left-hand border; however, you could alter the background, text, and border color to create interesting effects for the navigation.Hover Here? Hover There!In modern browsers, including Internet Explorer 7, you can apply the :hover pseudo-selector to any element you like, but in Internet Explorer 6 and below, you can apply it only to links.Older versions of Internet Explorer allow only the anchor text to be made clickable, because the link fails to expand to fill its container (in this case, the list item). This means that the user is forced to click on the text, rather than the red background, to select the menu item.One way to rectify this issue is to use a CSS hack that expands the width of the link – but only in Internet Explorer version 6 and earlier. Here’s the rule that does just that:* html #navigation li a {width: 100%;}Of course, you may decide that leaving the links as is and avoiding the hack is an acceptable compromise. We’ll cover cross-browser techniques in more detail in Chapter 7, Cross-browser Techniques.

Can I use CSS and lists to create a navigation system with subnavigation?

The examples we’ve seen so far in this chapter have assumed that you only have one navigation level to display. Sometimes, more than one level is necessary – but is it possible to create multi-leveled navigation using styled lists in CSS?

Solution

The perfect way to display subnavigation within a navigation system is to create a sublist within a list. The two levels of navigation will be easy to understand when they’re marked up in this way – even in browsers that lack support for CSS.To produce multilevel navigation, we can edit the example we saw in the previous figure, adding a nested list and styling the colors, borders, and link properties of the new list’s items:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="en-US"><head><title>Lists as navigation</title><meta http-equiv="content-type"content="text/html; charset=utf-8" /><link rel="stylesheet" type="text/css" href="listnav_sub.css" /></head><body><div id="navigation"><ul><li><a href="#">Recipes</a><ul><li><a href="#">Starters</a></li><li><a href="#">Main Courses</a></li><li><a href="#">Desserts</a></li></ul></li><li><a href="#">Contact Us</a></li><li><a href="#">Articles</a></li><li><a href="#">Buy Online</a></li></ul></div></body></html>#navigation {width: 200px;}#navigation ul {list-style: none;margin: 0;padding: 0;}#navigation li {border-bottom: 1px solid #ED9F9F;}#navigation li a:link, #navigation li a:visited  {font-size: 90%;display: block;padding: 0.4em 0 0.4em 0.5em;border-left: 12px solid #711515;border-right: 1px solid #711515;background-color: #B51032;color: #FFFFFF;text-decoration: none;}#navigation li a:hover {background-color: #711515;color: #FFFFFF;}#navigation ul ul {margin-left: 12px;}#navigation ul ul li {border-bottom: 1px solid #711515;margin:0;}#navigation ul ul a:link, #navigation ul ul a:visited {background-color: #ED9F9F;color: #711515;}#navigation ul ul a:hover {background-color: #711515;color: #FFFFFF;}The result of these additions is shown in the figure below.The CSS list navigation containing subnavigation

Go to page: 1 | 2 | 3 | 4

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • Free

    A lot of these were fun. I particularly liked the Intercall Mobile Assistant. It is such a pain to try and remember access codes or toggle between Blackberry screens when you are late for or just got dropped from a conference call