Building a Mouse-Over Menu Using CSS

By Eddie Machaalani

I remember when I started building web sites. Creating a dynamic menu’s meant creating a series of images: one for the static image, one for the mouse-over image, and at times a separate image for when a click occurred. After this, I piled on the JavaScript to preload the mouse over images and change the images, depending on which menu button had the mouse cursor over it. Phew! It was a lot of work.

This in itself was tedious. Not only because I had to create up to 3 separate images, but also because it increased page load time, as well as being a pain when the time came to create a new menu item for the same site. With the evolution of CSS over the past couple of years, however, this process has been greatly simplified.

In this article I’ll show you a very simple technique to create mouse over menu’s that load almost instantly, that look great, and that are very easy to maintain.

Anyway, let’s get started!

Before I get started, here’s a picture of what the end result will look like. Keep in mind that you can easily change the fonts, sizes, colors to match your web sites look and feel.



If you’ve been involved in any form of search engine optimization then you’ll know that search engines use links quite heavily to determine search rankings and relevancies.

Why does this matter? Simply because using text or style sheet driven menu’s mean search engines such as Google can read your links. If we used images for our menus, Google would know there’s a link, but it wouldn’t be able to index the actual words used to create the link.

Building the menu is a simple process. First, we’ll start by creating the background of the menu. This is the dark gray bar that you can see above.

Insert this div inside the body tags of your web page, where you want the menu to appear:

<div class=toolbar></div>

Next, create the stylesheet class for the toolbar and add it before the closing </head> tag in your web page:

<style>

.toolbar {
background-color: #313031;
padding: 5px 0px 5px 0px;
}

</style>

We added some padding to the top and bottom of the toolbar div tag to create some spacing between the text and the background border.

Notice the following expression in the style sheet:

padding: 5px 0px 5px 0px

Here, we’re setting the padding on the top, right, bottom and left sides of the div respectively.

Now we’ll place some menu links inside of the toolbar div, and then add some CSS to format the links, thus emulating that menu button look that we’re after:

<div class=toolbar><a class="menu" href="menu1.html" title="Visit Menu Item 1">&nbsp;Menu Item 1</a></div>

The title tag causes a tool tip to be displayed when the cursor is placed over the link (or menu button). Here’s the CSS to create the basic menu buttons:

.menu {
     border-right: 1px solid white;
     text-decoration: none;
     background-color: #313031;
     padding: 5px;
}



Here, we simply place a border on the right side of each button to create the 1 pixel of white space which acts as a separator between menu items.

We then remove the underline from each link, by using the text-decoration: none attribute. Finally, we replace the background color of the menu item to match the background color of the toolbar div and add a padding of 5 pixels to create our menu button.

Whilst this works, it obviously doesn’t look very pretty. So let’s add some formatting to the text of the buttons:

.menu {
     border-right: 1px solid white;
     text-decoration: none;
     background-color: #313031;
     padding: 5px;
     color: white;
     font-family: Tahoma;
     font-size: 8pt;
     font-weight: bold;
}


Ah. Much better! We’re almost done -- all we need now is the mouse-over color change. Whilst this used to involve Javascript and can still be done using some simple Javascript code, I find it easier to use the CSS hover attribute, which basically defines the look of a link when the mouse cursor moves over it:

.menu:hover {
     background-color: #5A8EC6;
}

Remember that the hover attribute only works on links, i.e. <a href…></a> tags.

That’s really all there is to it! We can now add more link tags to create the rest of the menu. The complete code looks like this:

<style>
    .menu {
    color: white;
    font-family: Tahoma;
    font-size: 8pt;
    font-weight: bold;
    border-right: 1px solid white;
    text-decoration: none;
    background-color: #313031;
    padding: 5px;
}

.menu:hover {
    background-color: #5A8EC6;
}

.toolbar {
    background-color: #313031;
    padding: 5px 0px 5px 0px;
}

</style>

<div class=toolbar><a class=menu href="menu1.html" title="Visit Menu Item 1">&nbsp;Menu Item 1</a><a class=menu href="menu1.html" title="Visit Menu Item 2">&nbsp;Menu Item 2</a><a class=menu href="menu1.html">&nbsp;Menu Item 3</a></div>

And there you have it. A complete menu for your next website, in only a few lines of code!