Blocky Mouseover Menus

Deprecated

Times move on, I've learnt quite a bit since I wrote this guide and have found better ways to achieve the same effect and discovered flaws in the techniques described below. Please consider this article for historic interest only (which is one reason I haven't updated it to reflect the fact that the menu style it refers to is no longer used here)).

If you want to implement a menu such as described below, please see Listamatic which describes modern techniques for this.

---

This website has a menu that, assuming you are using a graphical browser with sufficient support for CSS, has large sections of colour change when you move the mouse over them. This is a not uncommon effect, but many sites use JavaScript combined with table cells to pull it off. This site uses a pure CSS technique that degrades cleanly and so looks good even in lynx!

Before we continue I'll make a confession, I've learnt some more techniques since I designed the menu on this site so this tutorial will walk you through creating a menu that is better then this site uses, one day I will get around to updating this site's menu.

Getting started

You need to know the basics of CSS to get this to work, if you don't know CSS already then I suggest you take some time and learn the basics, it is very useful and allows you to create HTML that is somewhat lighter then it would be otherwise (it also lets you create more accessable, faster loading sites).

Resources

• Tutorial
• Specification
• Examples

The HTML

First you need to create the HTML source for the menu, this is a simple container with the links inside it, between each link is a seperator to make it clear where each link begins and ends for browsers without the CSS support.

<div id="myMenu">
  <a href="http://dorward.me.uk/">David Dorward</a> <span>|</span>
  <a href="http://www.w3c.org/">Web Standards</a> <span>|</span>
  <a href="http://www.mozilla.org/">Best Webbrowser</a> <span>|</span>
  <a href="http://news.bbc.co.uk">News Service</a>
</div>

It looks very simple, doesn't it? This is one of the advantages of CSS, you can make very simple pages but use CSS to make them visually stunning (and then update just the one CSS file to change the look of the entire site!).

The CSS - Positioning The Menu

First we need to position the menu on the canvas. In this example we will give it a fixed width, a border and allow content to flow around it. You might like to use a different positioning scheme, but I'll just remind you about the tutorials I mentioned earlier and leave you to look through the sizable collection of options.

#myMenu { 
  width: 175px;
  border: solid black 1px;
  float: left;
}

The CSS - Hiding The Link Separators

It is going to be very clear where each link begins and ends, so we don't need the link separators to display is browsers that support CSS.

#myMenu span {
  display: none;
  visibility: hidden;
}

The CSS - Blowing Up The Links

We want to put each link on a line of its own, to do this we ask the browser to render it as a block level element. We then give it a border to make it clear where each link begins and ends, then we add padding to give a larger area for the user to click on. We also remove the underline.

#myMenu a {
  display: block;
  width: 100%;
  border-top: solid black 1px;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  text-decoration: none;
}

The CSS - Reactive Links

Finally we need to do something to make the links react to the mouse. This is just a matter of assigning color and background-color for each state.

#myMenu a:link {
  background-color: white;
  color: black;
}

#myMenu a:visited {
  background-color: #eee;;
  color: black;
}

#myMenu a:hover {
  background-color: black;
  color: white;
}

#myMenu a:active {
  background-color: red;
  color: yellow;
}

Over To You

You now have all the basics you need to create a menu similar to the one on this site, its not up to you to personalise it. I suggest you start by changing the colours, and follow that up by making use of the knowledge you gained in the CSS Tutorial (you did take it, didn't you?).