Geekcave

In this tutorial we will be making our menu items into rollover buttons using nothing but CSS.  This tutorial will be useful for anyone wanting to make a horizontal css menu.  But if you have been following the tutorials for beginners and intermediates here at geekcave.co.uk you should have a website that looks something like this. 

If you are familiar with CSS but would like to work on the same example site from our earlier tutorials you can download it here.

Lets get started

Open up your CSS file and add the following code:

.sidemenu{
	list-style-type: none;
	margin: 0;
	padding: 0;
	width: 180px;
}

Setting the list-style attribute to none gets rid of the discs (bullet points) and setting the width to 180px gives you the overall width of your buttons.  If you have a wide sidebar, you may want to increase this a little.

Add the following code to your css file:

.sidemenu li{
	margin-bottom:5px;
}

Setting the bottom margin on the list item (li) adds a bit of spacing in between buttons.  Adjust this according to taste.

Add the following code to your css file:

.sidemenu li a{
	background: #9fb1fd;
	display: block;
	color: white;
	width: auto;
	padding: 5px 0;
	text-indent: 8px;
	text-decoration: none;
	border-width:1px;
	border-style:solid;
	border-color:#c4cffe;
}

.sidemenu li a:visited, .sidemenu li a:active{
	color: white;
}

Set the background to the color you want for your buttons while they are not being hovered over and set border to a lighter version of your background colour.  Also, make sure you set the color attribute for the text to a colour that contrasts well with your background.

Add the following code to your css file:

.sidemenu li a:hover{
	background: #506ff5;
	color: white;
	border: 1px solid #3f5ee2;
}

Set your background and border to the colour you want for when the mouse is hovering over your button.  I have gone for a darker version of the regular color, but feel free to experiment with different color combinations here.

Bookmark It

Hide Sites