CSS graphic menu with rollovers

Rate this tutorial:

Currently Note: 3/5
1
2
3
4
5

Tip: Check Your works at least on three most popular browsers.

This tutorial will show You how to code website menu using unordered lists, and valid xHTML/CSS. No JavaScript was used!

First we have to get nice graphic for this menu. I'll use this set:

You can make, and slice it Yourself by going through my two other tutorials

1. Nice, clean vertical menu.
2. Slice Your web graphic properly.

Our goal will be:
Nice, clean menu

First we have to take care of the xHTML skeleton for our menu

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

</p>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />

<title>Sample menu</title>

<link href="style.css" rel="stylesheet" type="text/css" />

</head>

<body>

<div id="menu">

 <div id="menubody">

 <ul id="menulist">

 <li><a href="#">Position 1</a></li>

 <li><a href="#">Position 2</a></li>

 <li><a href="#">Position 3</a></li>

 <li><a href="#">Position 4</a></li>

 <li><a href="#">Position 5</a></li>

  </ul>

 </div>

<div id="menubottom"></div>

</div>

</body>

</html>

Explanation

First seven lines are only doctype and headers. Only inportant thing is
<link href="style.css" rel="stylesheet" type="text/css" />
which is CSS stylesheet link (We will make it soon)

<div id="menu">...</div> - this div contains all menu structure (we will use it for top image part too)

<div id="menubody">...</div> - this div contains menu body, and unordered list (we use it for center repeated part - image no.2, and as InternetExplorer 6 fix)

<ul id="menulist">...</ul> - this is menu structure - unordered list.

<li><a href="#">Position 1</a></li> - this is one menu position (anhor inside list) - href="#" can be replaced by URL

<div id="menubottom"></div> - this gif contains bottom image part.

You can save this file for example as menu.html

Now it's time for most important CSS part:

* {margin:0; padding:0;}

div#menu {width:184px; background:url(menu_1.gif) top no-repeat; padding-top:44px;}

div#menubody {background:url(menu_2.gif) repeat-y; padding-left:21px;}

div#menubottom {height:26px; background:url(menu_4.gif) bottom no-repeat;}

ul#menulist {width:144px; list-style-type:none;}

ul#menulist li {height:27px; background:url(menu_3.gif) bottom repeat-x;}

ul#menulist a {width:122px; height:20px; border-left:#75c5de 10px solid; font:bold 10px Verdana, Arial, sans-serif; color:#ffffff; text-decoration:none; padding:5px 0 0 10px; display:block !important; display:inline-block;}

ul#menulist a:hover {background:url(menu_5.jpg) left repeat-y;}

You can save it as style.css

Explanation

* {margin:0; padding:0;} - this is global reset. It sets margins and paddings to 0. I use it almost in any project.

div#menu - nothing special here. Just width declaration, and background image (top one - number 1). Padding was set to 44px (that is the height of top image)

div#menubody - again, only background was set (with repeat-y) , and padding left (we place ul in right position)

div#menubottom - again, background and height - nothing special

ul#menulist - we use list-style-type:none to hide "bullets"

ul#menulist li - here the magic starts. We set height for li elements, and background image which is placed bottom (it's this small 1px to 2px rectangle) and repeat-x - it is our separator line

ul#menulist a - we set width and height of a element, than set border-left to 10px with right color. Then font color and type and paddings for right placement. Last thing is: display:block !important; display:inline-block; . Because of InternetExplorer, we have to use two declarations. First is for firefox, opera and other browsers they use it because !important value, and last is for IE which is ignoring !important. Both does almost this same thing.

ul#menulist a:hover - this is for hover effect (rollover). We use 1px strip repeat-y.

And that's all. You can check final result here

Comments

S?©rkan

2007-10-07

hi from Turkei
good lesson

rusher

2007-10-09

hi from russia (:

good, very good set of tutorials (:.
helps me a lot.
I found this tut from good-tutorials.com

smeck

2007-10-09

wow thanks, this is just the clear and simple explanation I was looking for!

romfi

2007-10-09

wow.....thats really a great idea,specially with my website i am creating now....thanks for that info...hope theres still more..

I like your tutorial

2007-10-19

Good,coding in css is very sweet.

Jordan

2007-10-23

hi from BULGARIA

Jan Schraal

2007-10-27

Very good tutorial. I learned a lot from it!

Rani

2007-11-01

This tutorial really help mefor getting more information about css
Thanks a lot

ginux 26

2007-11-01

tnx 4 d codes. its helpful!

Qutubuddin

2007-11-10

Thanks a lot,,,,the tutorial is very good and helpful.but i need more tutorial regarding CSS,,,can anybody help me

real man

2007-11-11

Thank you very much for thus simple tutorial

Tronic

2007-12-04

Thx for your simple and useful tutorials. Helped me allot to understand simple CSS like this. Kudos

Taylor

2007-12-05

Great tutorial. Very minimal code for an excellent looking menu.

-Taylor
http://www.getwebwarped.com

Sebastian

2007-12-09

To many DIV-ID donÂ´t you think? itÂ´s great but try changing to DIV-CLASS, so you dont have problems with inheritance.

prabhat

2007-12-30

Hi..any method to make a similar menu bar for horizontal bar.
Please end one to prabhatkr@gmail.com

spooxas

2008-01-05

Hey, nice tut. I think it's very useful for everyone ^^

wagner

2008-01-29

very look!! ^^

Sameer

2008-04-09

Yes, this is really helpful css.

Abhisek

2008-05-03

"this is global reset. It sets margins and paddings to 0. I use it almost in any project."
I think eric meyer's css reset would be nice for you

Lukasz

2008-05-03

This is an awseme menu
I love this menu