Creating CSS Mouseover Buttons Menu

Heading Tags Info

Instructions on how to create a rollover or mouseover menu using CSS and just 2 images. This was normally done using JavaScript to preload the images and you had to have a different image for each link, but by using CSS you can use the same 2 images for all your links.

 

Another good thing of using CSS is that you can have text overlay on your blank images as well as being able to use the "Alt" attribute, both of which are very Search Engine friendly.

 

Pageload time is reduced because of less code on the page plus you will not be preloading all the images.

 

The first thing you need to do is create your graphic, here are the 2 I will be using:-

main rollerover image  Mouse rolled over image


Example of a Vertical CSS Button Menu



Copy this Code above the </head> tag within your page.

 


<style type="text/css">
.cssbutton
{
position: relative;
font-family: Tahoma, Georgia, sans-serif, helvetica, arial;
background: url(roll/over.jpg) no-repeat;
white-space: nowrap;
display: block;
width: 100px;
height: 28px;
margin: 0 0 2px 0;
padding: 0;
}

.cssbutton a
{
display: block;
color: #000000;
font-size: 12px;
font-weight: bold;
text-align: center;
width: 100px;
height: 28px;
display: block;
float: left;
color: #ffffff;
text-decoration: none;
}

.cssbutton img
{
width: 100px;
height: 28px;
border: 0
}

* html a:hover
{
visibility:visible
}

.cssbutton a:hover img
{
visibility:hidden
}

.cssbutton span
{
position: absolute;
left: 5px;
top: 5px;
margin: 0px;
padding: 0px;
cursor: pointer;
}
</style>

 

An explanation about a few of the entries in the class above:-

.cssbutton - width and height:-
You will need to change this to the size of your own buttons. You will also need to change it in the other classes below:-
.cssbutton a
.cssbutton image

color:-
Change this to your own personal choice.


The actual link code for the vertical menu

 

Place the code below to where you would like your css menu to appear.

 

<div class="cssbutton">
<a href="index.html"><img src="roll/down.jpg" alt="Home" /><span>Home</span></a>
</div>
<div class="cssbutton">
<a href="menubar.html"><img src="roll/down.jpg" alt="Menu Bar" /><span>Menu Bar</span></a>
</div>
<div class="cssbutton">
<a href="competition.html"><img src="roll/down.jpg" alt="Competition" /><span>Competition</span></a>
</div>
<div class="cssbutton">
<a href="links.html"><img src="roll/down.jpg" alt="Links" /><span>Links</span></a>
</div>

 

If you followed the instructions correctly, you should now be able to make a site menu using rollover CSS buttons.