• CSS Photo Gallery
• CSS Gradients
• CSS
  Menus
• CSS Image Rollovers
• Javascript Tooltips

Menu Five - css background image, button effect

The HTML

The HTML for this menu can be found on the menu index page.

CSS notes

Adjust the width & height for the menu background image size, change the line-height (highlighted in red) to match the height for vertically aligning the text.

Change the background: url(path/file.gif) 0 0 no-repeat; to the path and image file name you want loaded.

The background-position: -100px 0; shifts the x axis of the image on hover by 100px. Set it to your image width.

Change the #content to whatever your container id is.

• Menu One
• Menu Two
• Menu Three
• Menu Four
• Menu Five

Horizontal menu css

/* change the #content to whatever your container id is */
#menu_h li {
float: left;
list-style: none;
margin: 2px;
text-align: center;
}
#content #menu_h li.nav1 a, #content #menu_h li.nav1 a:visited {
display: block;
width: 100px;
height: 28px;
background: url(../css_dev/images/button5.gif) 0 0 no-repeat;
color: #fff;
font: bold 12px/28px verdana;
text-decoration: none;
}
#content #menu_h li.nav1 a:hover {	
background-position: -100px 0;
}

• Menu One
• Menu Two
• Menu Three
• Menu Four
• Menu Five

Vertical menu css

/* change the #content to whatever your container id is */
#menu_v li {
list-style: none;
width: 100px;
margin: 2px;
text-align: center;
}
#content #menu_v li.nav1 a, #content #menu_v li.nav1 a:visited {
display: block;
width: 100px;
height: 28px;
background: url(../css_dev/images/button2.gif) 0 0 no-repeat;
color: #333;
font: bold 12px/28px verdana;
text-decoration: none;
}
#content #menu_v li.nav1 a:hover {	
background-position: -100px 0;
}

Coloured background images used