05 Styling the Navigation

Anchors make the Word Wide Web. These hyperlinks are the essence of the web, so styling them is no small matter. They play the central roll in information architecture and user experience design; everything depends on the navigation and what it looks like, and that is what we look at here.

Styling the <a> Pseudo Classes

Pseudo-classes affect the document as if — and this is what makes them pseudo — they add a class to the document. The document will display that whether or not a a:link has been a:visited or not, based on the browser history.

The other three pseudo links indicate interactive feedback. The a:hover link applies while the user is over the element with the cursor, the a:active pseudo-class applies while an element is being clicked on by the user.

Notice that a:hover and a:activehave be placed after a:link and a:visited otherwise the cascade can hide their color property. To avoid that, make sure to write them in the order you see here, for it makes a difference.

CSS Code View

<a href="#key" accesskey="a">Click Me or press Control-Option-a</a> anywhere in the document.

 

Keyboard Focus

The a:focus pseudo-class applies to an element that accepts a keyboard event. It is not widely used. There is no feedback in Safari, but Firefox and Opera show that you have pressed the key before executing the link. In Safari you hold down both control and option and the key, in Firefox, just the control button and the key, in Opera, you press shift escape and then select the key and in Internet Explorer, the alt key. In case you want to include keyboard access, you need to add the attribute and the key to the link element, like this: accesskey="a".

Using Lists for Navigation

It was decided a long time ago that menus are really lists, and should be wrapped in a list to be semantically correct. The code for most of these demonstrations use the following code:

<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Topic 1</a></li>
<li><a href="#">Topic 2</a></li>
<li><a href="#">Topic 3</a></li>
<li><a href="#">Topic 4</a></li>
</ul>

Which, when it has no CSS styling, takes the default look:

  • Home
  • Topic 1
  • Topic 2
  • Topic 3
  • Topic 4

The remaining sections will use CSS to style what are otherwise lists of menu choices.
     

Using Display: Block and Inline-Block

The most obvious CSS changes to the menu are to give it a color (color: white;), to remove the underline (text-decoration: none;), to give it a background (background: orange;), a border (border-left: 5px solid a00;), padding (padding: 42px 0px;), and margins (margin: 5px 5px;). You can use the pseudo classes to target the hover, active and visited states with different attributes, so that the user gets feedback when they go over, click or have visited that link.

You can change the list item li that creates the menu to be either vertical or horizontal by changing its display from display: block which is the default and renders the list vertical to display: inline-block;. This creates a horizontal menu.

CSS Code View

     

Using Display: Table to Make Horizontal or Vertical Menus

If the <ul> is displayed as a table, then the <li> can be displayed as a table-cell. That also creates a horizontal menu. Changing the display to table-row makes the menu vertical.

CSS Code View

     

Using Floats to Layout the List

Floats can also be used to layout the list. Just float all of the <li>s left. You have to remember to clear: left the that follows the list, but otherwise it works well. To make this horizontal, reduce the width of the <ul> to 100px. If you want two rows going down, change the width to 185px.

CSS Code View

Image Rollovers

Now buttons with the CS3 goodness have come a long way, but when the menu needs more pizzaz than even CSS3 can provide, you turn to pictures, so when you hover over a link, the picture changes. This is easily accomplished in CSS using a single image divided into three, where the first part is what you see as a link, the second part is what you see when you hover over, and the third part is what you see when you click the link. The picture looks like this:    

rollover folder icon

    
The picture is simple enough, with a folder in three colors. The strategy is to show only the first icon, and with each state, move the picture so that it shows a different icon. That way, its blue, red when rolled over and green when clicked. If you want to tell the audience that they have clicked the link before, you can add a forth icon. The HTML is an empty anchor tag <li><a href="0"></a></li>.

CSS Code View

    

Making the Links Accessible

Because screen-readers cannot read anything from a picture, it’s necessary to put in a title. You get a popup after a second or so of hovering, with the title on it. <li><a title="link to Home" href="#"></a></li>

CSS Code View

Image Sprites

To have three pictures on an image and to seamlessly move between them is called an image sprite. It works very well for one link, and it works even better when there are more links, as in the following example with three variations per link for four links on one image file. Each pseudo class calls up the same image but at a different position, using the background-position: no-repeat 0 0 property to easily indicate where the pictures are on the image. The first number after no-repeat is the horizontal (x) offset, and the second is the vertical (y) offset. You can easily get this information from PhotoShop or Illustrator, but that still quite a chore.

To make this process even easier is Sprite Cow, which can take an image with lots of sprites on it, and easily provide you with the code containing the coordinates that makes this process a snap. Take the following image, load it into Sprite Cow, click on each image and copy and paste the coordinates into your stylesheet. Once you get the idea, you’ll never go back.

rollover sprites for menu

Since it is necessary to target each link individually, every link gets its own id.     

CSS Code View

Sprites Save Time

Every time that the browser has to request an image from the server, it takes time, not only for the image to download, but for the server-request. In fact, the server request can take more time than the downloading of the image. The ability to gang up all of your web pictures into one image is for that reason, a real time saver and significantly speeds up the loading of a web page.

As the process for doing so is exactly the same, using Sprite Cow, we do not need to go into a sprite / background image demonstration, as we have covered a lot of ground already, but be prepared to combine all of the smaller pictures into one large image like this for your final web site.

Drop Down Menus

While drop down menus are not really appropriate for small web sites of the kind that you will build here, I include a demonstration of a CSS only drop down menu just in case you do not feel complete if you do not have one, or better yet, build a really big site.

CSS Code View

The HTML Code

<ul id="nav">
	<li class="current"><a href="#">Home</a></li>
	<li><a href="#">Menu_A</a>
		<ul>
			<li><a href="#">Menu_A-1</a>
				<ul>
					<li><a href="#">Menu_A-1-a</a></li>
					<li><a href="#">Menu_A-1-b</a></li>
					<li><a href="#">Menu_A-1-c</a></li>
					<li><a href="#">Menu_A-1-d</a></li>
				</ul>
			</li>
			<li><a href="#">Menu_A-2</a>
				<ul>
					<li><a href="#">Menu_A-2-a</a></li>
					<li><a href="#">Menu_A-2-b</a></li>
				</ul>
			</li>
			<li><a href="#">Menu_A-3</a>
			<li><a href="#">Menu_A-4</a>
		</ul>
	</li>
	<li><a href="#">Menu_B</a>
		<ul>
			<li><a href="#">Menu_B-1</a>
				<ul>
					<li><a href="#">Menu_B-1-a</a></li>
					<li><a href="#">Menu_B-1-b</a></li>
					<li><a href="#">Menu_B-1-c</a></li>
				</ul>
			</li>
			<li><a href="#">Menu_B-2</a>
			<li><a href="#">Menu_B-3</a>
			<li><a href="#">Menu_B-4</a>
				<ul>
					<li><a href="#">Menu_B-4-a</a></li>
					<li><a href="#">Menu_B-4-b</a></li>
					<li><a href="#">Menu_B-4-a</a></li>
					<li><a href="#">Menu_B-4-b</a></li>
				</ul>
			</li>
		</ul>
	</li>
	<li><a href="#">Menu_C</a>
		<ul>
			<li><a href="#">Menu_C-1</a>
			<li><a href="#">Menu_C-2</a>
			<li><a href="#">Menu_C-3</a>
				<ul>
					<li><a href="#">Menu_C-3-a</a></li>
					<li><a href="#">Menu_C-3-b</a></li>
				</ul>
			</li>
			<li><a href="#">Menu_C-4</a>
			<li><a href="#">Menu_C-4</a>
				<ul>
					<li><a href="#">Menu_C-4-a</a></li>
					<li><a href="#">Menu_C-4-b</a></li>
					<li><a href="#">Menu_C-4-a</a></li>
					<li><a href="#">Menu_C-4-b</a></li>
				</ul>
			</li>
		</ul>
	</li>
</ul>