CSS Simple Menu Bar

In this tutorial we will create a simple rollover using CSS and an unordered list. The images for this tutorial are in this menus.zip (732.17 kb). Extract the zip file into a new local website (or a folder in an existing site) to get the code and see a working example of this and the other two CSS menus we have tutorials for.

Creating the Menu Container

Begin by adding a div by dragging it out from the Toolbox. You can do this on a new page or in the sidebar of an existing page.

Next, with the div you just created selected, use the New Styles button in the Apply Styles Task Pane or Format > New Style to launch the new styles dialog box. Make sure there is a check in the Apply new style to document selection box and you won't have to manually apply the style to your div when you have finished creating it.

 

Next, change the name of the selector to #menu and give it the following style definitions:

#menu {
	background-color: #858585;
	width: 150px;
}

This provides a width for our menu and sets the background color so that the link text will be readable even if the link background image doesn't load. If you are using this menu in a sidebar with a width already applied you do not need to use the width in your menu style.

Add Your Links

Inside the menu div add your links in the form of an unordered list:

<div id="menu">
<ul>
	<li><a href="javascript;;">Home</a></li>
	<li><a href="javascript;;">Link 1</a></li>
	<li><a href="javascript;;">Link 2</a></li>
</ul>
</div>

Next, we will remove the list item and any default margin or padding from the unordered list:

#menu ul, #menu li {
	padding: 0px;
	margin: 0px;
	list-style-type: none;
}

Creating the Link Effect

In this case we will be using an image to create the rollover. You could create a rollover effect using just background color with or without borders but in this tutorial we'll be using the same mbar.jpg used in the simple horizontal rollover tutorial.

The mbar.jpg is 79px tall and we want the menu to be able to grow in height if the person is using larger fonts so this gives the text room to be enlarged but still keeps the center of the gradient in the middle of the link text. You do not need to use the apply checkbox this time because it will automatically be applied to any hyperlink we put in the menu div.

Now we will add a descendent (also known as a contextual) selector for our links. Using the New Style dialog box type in #menu a for the selector. The link style I am using is:

#menu a {
	background-image: url('images/mbar.jpg');
	background-position: center;
	display: block;
	color: #F9F9F9;
	text-decoration: none;
	text-align: center;
	font-size: .9em;
	padding: 0 .5em;
}

To give the rollover effect we will also define the hover state:

#menu a:hover {
	background-image: url('images/mbar-ovr.jpg');
	color: #000000;
}

You only need to put the properties you want to change in the hover pseudo class definition, the rest of the style definition will be inherited. As with the menu div background we are centering the background image for the rollover to allow room to grow. Use Page > Text Size (View > Zoom > Text only in Firefox) to increase the font size of this page to see how it works in the example below.

I used "javascript;;" to create the null links in this example because Expression Web won't let you use the # to create a hyperlink in the hyperlink properties dialog box and I wanted a null link so you could see how the rollover will function on a link.

IE Bug

Because of a bug in IE 6 and below gaps will appear between the list items which would make your menu have the background show up in-between each link. This is not the look you want so we will add a conditional comment for IE that will eliminate the gap.

<!--[if lte IE 7]>
	style type="text/css"> 
	#menu ul a { height: 1%; 
}  
<![endif]-->

The zip file contains a working example of this menu.



Outstanding Hosting