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:
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.
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>