In this tutorial we’ere going to learn how to create a custom CSS based menu that uses images. We’ve grabbed a beautfiuly designed menu from http://bestuipsd.blogspot.com/ that we are going to convert into a working css menu. Let’s get started!

Step 1 – Markup our HTML.

Create an html file and fill it with the following html. We will use this as the base for our menu, and code the rest with CSS.

HTML

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type"content="text/html; charset=UTF-8"/>

<title>CSS Image Based Rollover Menu</title>

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

</head>

<body>

<ul id="menu">

<li id="home"><ahref="#">Home</a></li>

<li id="flights"><ahref="#">Flights</a></li>

<li id="events"><aclass="current"href="#">Events</a></li>

<li id="hotels"><ahref="#">Hotels</a></li>

<li id="restaurants"><ahref="#">Restaurants</a></li>

<li id="transport"><ahref="#">Transport</a></li>

<li id="settings"><ahref="#">Settings</a></li>

<br class="clear">

</ul>

</body>

</html>

Step 2 – Add our CSS (common rules)

First the code, then the explanation.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

body{

background:url(images/bg.jpg);

}

#menu{

width:675px;/*---Give our UL a width ---*/

list-style:none;/*--- Makes the bullets go away ---*/

margin:0;/*--- Take out any default margin on the UL tag ---*/

padding:0;/*--- Take out any default padding on the UL tag ---*/

margin:0auto;/*--- Center the menu ---*/

}

#menu li{

float:left;/*--- Make the list go horizontal ---*/

margin:0;

}

#menu li a{

display:block;/*--- Make the entire button are clickable rather than the text alone ---*/

text-indent:-9999px;/*--- Push the text off screen to hide text---*/

overflow:hidden;/*--- Makes text outside of bounding box hidden ---*/

height:33px;

}

These css rules define a few properties as such:

Line 1: The body tag, defines our gray background image that repeats across the entire screen

Line 5: The #menu tag defines our un-ordered list

Line 14: This css rule floats all of our list items to the left, enabling the horizontal menu layout

Line 20: We define all of our anchor tags as block, which makes it so we can click on the button in the entire button area. We also make our text that is part of our anchor text in HTML move way off screen, as the text is embedded in our button images. We set the height of the anchor tags to the height of our images.

Step 3 – Add our custom images to each button

1

2

3

4

5

6

7

8

9

10

#menu li#home a{

background:url(images/home.jpg)no-repeat;

width:81px;

}

#menu li#flights a{

background:url(images/flights.jpg)no-repeat;

width:79px;

}

I’ve only added two rules, but you’ll rinse and repeat the code outlined above for each button. A few things to note are:

Set the width property on each of these specific anchor ID rules to the width of their respective images.

Step 4 – Add the images for the “hover” state using css pseudo selectors.

1

2

3

4

5

6

#menu li#home a:hover{

background:url(images/home-over.jpg)no-repeat;

}

#menu li#flights a:hover{

background:url(images/flights-over.jpg)no-repeat;

}

Again, I’ve only listed just two examples here. You’ll do this same process for each of your images.

Step 5 – Adding the “Down/Selected/Current” selector.

In this step we will add the css that makes our page “current”. Whichever html menu item has the class of .current will automatically get it’s current image applied because of the CSS below:

1

2

3

4

5

6

7

8

9

#menu li#home a.current{

background:url(images/home-down.jpg)no-repeat;

cursor:default;/*--- Show pointer instead of hand cursor for the current page ---*/

}

#menu li#flights a.current{

background:url(images/flights-down.jpg)no-repeat;

cursor:default;

}

Again, I’ve just shown two samples. You’ll do this for each menu item image.

The last bit of CSS if to ‘clear the float’. There are many methods of doing this, but we are going to add the class of .clear to a break tag. Because we floated all of our list items left, they are now not ‘contained’ in the parent un ordered list tag. We need to do what is referred to as ‘clear the float’ in order to make the UL tag ‘contain’ it’s floated children. Otherwise bad things end up happening in our design/layout.