HTML / CSS Vertical Menu Using Image Buttons

Share

• Tweet
• Email
• Sharebar

• Tweet
• Email

In an earlier tutorial, I showed you an example of how you could create a vertical menu using text buttons.  For this tutorial, we’ll be using images.  Each image will be used for their specific button, so this is not a simple background edit.  This is useful if you want to add some custom effects to the text on the button.

Let’s use the same files created on the earlier tutorial.  The files can be downloaded below that tutorial.

I’ve created some buttons that will be used in this example.  We have the default:

..and the hover:

First thing’s first, we’ll have to change the HTML list a bit.  This is what it looks like right now:

<ul id="menu">
		<li><a href="">Home</a></li>
		<li><a href="">About Me</a></li>
		<li><a href="">Photo Album</a></li>
		<li><a href="">Family &amp; Friends</a></li>
		<li><a href="">Contact Me</a></li>
</ul>

I don’t know which method is used by others, but the method I use in this case is to give each item in the list, an ID of their own so they can have individual attributes.  So this is what the code looks like now:

<ul id="menu">
		<li id="home"><a href="">Home</a></li>
		<li id="about"><a href="">About Me</a></li>
		<li id="photo"><a href="">Photo Album</a></li>
		<li id="family"><a href="">Family &amp; Friends</a></li>
		<li id="contact"><a href="">Contact Me</a></li>
</ul>

On the stylesheet, the following should be deleted:

ul#menu li a {
	background: #CCCCCC; 	color: #FFFFFF; 	text-align: center; 	border-left: #999999 solid 1px; 	border-right: #999999 solid 1px; 	border-bottom: #999999 solid 1px; 	border-top: #666666 solid 1px; 	padding: 3px 0px 2px 0px;
	width: 150px;
	display: block;
	text-decoration: none;
}
 ul#menu li a:hover { 	border: 1px solid #333333; 	background: #FFFFFF; 	color: #999999; }

And we’ll be left with an un-styled menu:

Un-Styled Menu

…which we’ll be able to customize.

The height of each button should now be specified.  I’ve set them to 20 pixels which is the height of the button.  For each button, add the ID on the stylesheet and link to the images that corresponds to their buttons.  Also add their hover images.  Your edited CSS should look a bit like this:

ul#menu li a {
	width: 150px;
	height: 20px;
	display: block;
}

#home {
	background: url(../images/home.png) no-repeat;
}

#about {
	background: url(../images/about-me.png) no-repeat;
}

#photo {
	background: url(../images/photo-album.png) no-repeat;
}

#family {
	background: url(../images/family-friends.png) no-repeat;
}

#contact {
	background: url(../images/contact-me.png) no-repeat;
}

#home a:hover {
	background: url(../images/homeh.png) no-repeat;
}

#about a:hover {
	background: url(../images/about-meh.png) no-repeat;
}

#photo a:hover {
	background: url(../images/photo-albumh.png) no-repeat;
}

#family a:hover {
	background: url(../images/family-friendsh.png) no-repeat;
}

#contact a:hover {
	background: url(../images/contact-meh.png) no-repeat;
}

*If you are building a more elaborate site, it’s best to specify each item on the stylesheet, e.g. ‘ul#menu li#home’ rather than simply using #home.

Your menu will look like this:

To remove the hyperlinks from the visibility of the image buttons, add ‘text-indent: -9999px;’ to ‘ul#menu li a’:

ul#menu li a {
	width: 150px;
	height: 20px;
	display: block;
	text-indent: -9999px;
}

…and there you have it: vertical image buttons using only HTML and CSS.

Related posts:

1. HTML / CSS Vertical Menu Text With Text Buttons
2. HTML / CSS Horizontal Menu With Text Buttons
3. How To Edit WordPress Login Page
4. Linking Your HTML Page With Stylesheet
5. How To Create Custom-Shaped Pictures On Photoshop