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.

opera msie

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:


1 menu_1

2 menu_2

menu_3

4 menu_4

menu_5


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

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

heits

2008-06-25

thanks from Estonia!

Hamid

2008-07-05

thanks from algeria

A.Ata??

2008-08-07

Thanks for good tutorial.
Nice job.

demian

2008-08-28

suuuuuup from Mexico!!!
good css, crossbrowser! yeah!

kuper

2008-09-18

3ymEdp hf6Snb9Ula10Hdf74n

Stoyan

2009-02-15

Hi from Bulgaria, this a very good and well explained tutorial thank you!

colin

2009-02-27

Chris

2009-03-06

great job man, yer the best!

siva

2009-03-09

Nice work keep it up

Gus

2009-04-24

Excellent tutorial!

baby

2009-05-31

very look

baby

2009-05-31

very look

lee

2009-06-09

very good lesson

NEVER

2009-08-27

very nice

NEVER

2009-08-27

Mirza

2009-09-07

hi from bosnia

Natalie

2010-01-06

Awesome! I was able to modify this to create a menu with glossy buttons. Thanks!

HoHoL(XD)

2010-01-08

thanks a lot)
It helps me create nice site)

geot

2010-01-15

Thanks a lot

gc roy

2010-02-15

thanks a lot
really excellent

2010-02-28

Mickey

2010-02-28

very Nice,,,,,,pecrfect

lee

2010-03-08

hi from china..

khan

2010-04-30

thank's buddy

The-Marshal

2010-05-01

Thank you very much

pranay

2010-05-22

thnk's man

rawdon

2010-05-25

chinese pigs ~

to rawdon

2010-07-17

you are realy...

ray

2010-08-19

nice tut.........

Matt Sullivan

2010-08-21

Well done...

Dave R

2010-09-02

Why doesn't your contact page work. I keep being told that I have some missing element.
Please complete the missing item(s) indicated.

burner

2010-11-13

more more.........

danny

2010-11-18

very excelent tutrial.

Grover

2010-12-14

Thanks...it's great!!!...excelent menu...again thanks

JemySoft

2010-12-19

nice work ,
thanks

sup kid!

2010-12-29

This ain't bad, ain't bad, son!

rohit

2011-01-04

nice tutorial

thanks alot

ram

2011-02-02

thanks nice work......

sankha

2011-04-08

it wil b mch btr if its selct d hvr colr

Pratham

2011-05-05

thnxx..

hi

2011-05-05

heey from Turkey.. thank you :) :)

zaman

2011-06-10

It is really good tutorial with simple and easy to understand. Thank you.

jovy

2011-07-20

i really like the tutorial...it helps me a lot..

nectar

2011-08-19

cool tutes

67t

2011-09-24

u767

aj

2011-10-14

nice..

hyper

2011-11-08

Hi form Poland! Very usefull tut. Thaks!

Zec

2011-11-19

Hi from france and this tutorial is very simple and easy to made for my web site thank you a lot

hdb

2012-01-04

ok

Jerome

2012-01-09

From philippines
Great explanation on the code, can easily understand this tutorials.
Looking forward to your next tutorials :)

Vivek

2012-02-02

From India
Very good, easy way to how make it

Vivek

2012-02-02

From India
Very good, easy way to how make it

mansi

2012-03-03

vrey nic tut

King.jpg

2012-03-21

from Tanzania..thanks best tutorials

g

2012-05-10

nycccc...........

pathania

2012-05-10

awsome...........tutes

Jay_mapagmahal

2012-06-06

hi from Philippines...

i Like your tutorials... its awesome eventhough its not like yours. ahahh thanks..

Jan_freakz

2012-06-06

i have one problem.. what if i have a subtitle under position 3... im trying to fix it.. sorry im newbie in in this field..

khaled_webdev

2012-06-14

nice, i m inspired and used part from it

kawean : indonesi

2012-06-22

very nice

waqas

2012-07-05

very very nice

Faisal Awa

2012-09-07

nice work....

Myo Kyaw Thu (Myanmar)

2012-10-06

Thank You

Ioana Mocanu

2012-10-29

I am a Romanian dating scammer from Bucharest

Raghavan

2012-11-28

Nice but ithu enaku jujupi...

Xu

2012-12-14

Nice

sekhar

2012-12-31

nice

asdf

2013-03-30

adsf

dhal

2013-03-31

nice

Yousif

2013-05-30

thanks from Sudan

j23n

2013-05-30

Hey , wait a minute , how did you do that ?

thisman

2013-06-28

thank you from Colombia. Is very complete the lessons menu

fuck

2013-07-02

fuck this..

Ranjan Pani

2013-09-03

very handy...

shamshad

2013-09-10

nice

rwfybcmwd

2013-12-31


egligbvws

2014-01-01


uygxcnyfi

2014-01-01


fxudqwoyn

2014-01-03


oetqzdzsr

2014-01-03


yara

2014-01-04

Thank you very mutch

xltlxgama

2014-01-04


dqfjfcvjq

2014-01-05


zyiixvmol

2014-01-07


ofztxdxtb

2014-01-08


mcauclnmy

2014-01-08


zjywunmpo

2014-01-10


ykdtvjmxd

2014-01-10


ewybcopub

2014-01-12


wenbtthne

2014-01-15


bbmwuzxpg

2014-01-16


Johnf828

2014-06-16

Thanks again for the blog post.Thanks Again. Cool. bafdafedeacg