CSS Tricks: Using the Span Tag and the Display Parameter to Provide Enhanced Menus

CSS is a great way to make your web pages more dynamic. It offers a platform independent and search engine friendly approach when compared to alternatives such as Javascript and Flash. Images or Flash files are not detected by search engines, so using CSS to change the formatting retains content which can be detected by the search engine.

Probably the most common use of CSS is to change the font-color or background-color property by specifying different values for the a:hover tag from the a tag. This can be done for all hyperlinks, or if it is only for a menu, then a dedicated tag is needed.

An example would be as follows:

a:link { text-decoration: none; color: white; background-color:black;}

a:visited { text-decoration: none; color: gray; background-color:black;}

a:active { text-decoration: none; color: white; background-color: black;}

a:hover { text-decoration: none; color: black; background-color:silver;}

In this example, the link appears as white on a black background. As the mouse moves over the text, the text changes to black, and background becomes silver. Once the mouse is clicked and the link has been followed, the text becomes grey and the background reverts to black. In this example, the text-decoration parameter is set to none to remove the underlining that is otherwise associated with a hyperlink.

To see a more sophisticated menu system defined using CSS, go to

http://www.alangillies.info/demos/cancer/

The source for the index page includes the following code for the first item:

<div id="nav1"><a href="intro1.html" title="Introduction">Introduction<span><img alt="Dr Thorndyke" src="narrator.jpg" height="100" width="80" />Introduction:Select this option to read the introduction to these resources.</span></a></div>

When the mouse moves over the menu item, the menu item changes colour and an explanatory box appears below the item:

click to enlarge

The contents of the yellow explanatory box are contained within the <span>…</span> tag inside the <a>…</a> tag.

This is generated by the following CSS tags:

#nav1 a,#nav1 a:visited { position: relative; display:block; width:100px; margin:0; text-decoration: none; }

#nav1 a span { display: none; }

#nav1 a span img { border: 1px solid black; float:right; margin-left:10px; margin-bottom:5px; }

#nav1 a:hover span { display: block; position:relative; height:100px; width:240px; color: black; font:14px ; margin-top: 20px; padding: 10px; background-color: #ffff88; border: 1px solid black; }

#nav1 a:hover span {width:240px;margin-left: 0px;} #nav1 a:hover {text-indent: 0;}

The key property is display which is set to none for the span tag but block for a:hover span, which causes the contained content to be displayed. The same page uses the same technology to display a box when the mouse moves over the main image. The result is a dynamic page generated by only HTML and CSS.

You can also use this approach to generate a photo gallery for your web site.