Pin Me

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

written by: Profacgillies•edited by: Simon Hill•updated: 2/19/2010

You can use CSS tricks to enhance the interactivity of your web pages without compromising platform independence and search engine optimisation. This article will show you how to generate a horizontal menu which goes beyond simple colour changes as the mouse moves over an option.

  • slide 1 of 4

    Why Use CSS?

    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.

  • slide 2 of 4

    CSS Tricks 1: Using CSS To Make Menus Appear Dynamic

    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.

  • slide 3 of 4

    CSS Tricks 2:A More Sophisticated CSS Menu System

    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:

    menu1 

    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.

  • slide 4 of 4

    Further reading

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