Make CSS Rollovers Options

(Updated November 2003: Since writing this article several months ago, I have learnt more about CSS and better ways to use it.
It turned out the method I had used here wasn't as good as it could have been, so felt it was in need of an update.
Please see www.camaban.co.uk/cssroll.php for the updated version, feel free to compare this old version and that newer one, you may learn something from the differences!)


There have been a few comments about rollovers recently and though I?ve linked to an article about it I thought I?d put up a little How To? about CSS Rollovers.

I?ll do it from the point of view of rollovers for text links in a left hand nav bar to get the general principle across, of course there are LOADS more thing you can do with when you start experimenting.

First off, we need an HTML page to apply it all to, to save typing all this out before getting to the good stuff, download it here.

If you have a look at it you?ll notice there isn?t a lot there at all and no layout what so ever. I?ve seen a few of these type of tutorials using tables for the layout, I on the other hand want to try and promote CSS Layout and XHTML Web Standards and so am skipping tables altogether

So to actually get our left-hand nav bar we?re going to need a basic CSS file to set things up. To save this, again download from here.

I don?t plan to go through the CSS, though if there are some requests I could do so in another post.

Anyway, the important bit in the HTML is the <div id=?navbar?>, its in this that were going to do all the work, the rest is just there to make it look a bit ?site like?.
In this div we have a list of standard text links to imaginary. They are all given the same CSS class identifier, navbut.

The only CSS we have affecting the text in this div at the moment is setting the font, making the size 80% of the normal size, centring it and giving it some padding from the edges of the div.

Now in order to make a rollover we need to set a style for the link in its normal state, one for its hover state, and then tell it to return to the normal state again after. If you?ve fiddled with CSS before you?ll probably be aware of the a:link, a:active, a:visited and maybe a:hover. CSS2 states that you can use these with objects other than JUST <a> links, you can make standard images have those states if you want!!

In this case we want to apply the same style to normal links and to visited links with a different style to links being hovered over.

To start with lets create a style for the standard links. First thing is the selector we need to use.

We want to apply a style to any a tags and to a tags that have already been visited. We also only want to apply these styles to links in the navbar. Fortunately we have set a class for all the links in the navbar so that part is easy enough.

With this in mind we are looking to apply the style to any a tag with the class selector navbut whether in normal state or the visited state. Thus the full selector will be

CODE

a.navbut, a:visited.navbut{}

We could split it out and set each separately but would only be duplicating code, this way we can apply the style to both states at the same time.

So now we need to make some styles. First off just some general text formatting. Make it all look nice by align the text to the centre, take away the underline and add a bit colour. Were also going to make the links block level elements rather than the default inline to help with consistancy (I?ll admit that I?ve not really got my head round this inline/block level stuff yet, but what Eric Meyer says is good enough for me!) so we get?

CODE

a.navbut, a:visited.navbut{

display:block;

text-align: center;

text-decoration:none;

color: #a54105;

}

Nothing special yet so lets add a border to it, make it look a bit button like.

CODE

a.navbut, a:visited.navbut{

display:block;

text-align: center;

text-decoration:none;

color: #a54105;

border-style: ridge;

border-width: 2px;

border-color: #EEC #EEC #C66 #C66;

}

Now that?s a bit more styled (whether stylish or not is upto you ), the ?buttons? are pretty close together though, so lets add some margin to space it out a little and in case we ever want to change the navbar background colour while keeping the buttons background, we?ll set that as well. So the finished product will look like?

CODE

a.navbut, a:visited.navbut{

display:block;

text-align: center;

text-decoration:none;

color: #a54105;

border-style: ridge;

border-width: 2px;

border-color: #EEC #EEC #C66 #C66;

margin-top: 3px;

margin-bottom:3px;

background: #ccc;

}

So we have our styled links, you could just leave them as they are and they would work fine as your navigation bar. To a bit more to it though, make it a little nicer and maybe more usable we can pretty easily add a rollover to accentuate the links.

This pretty easy to do, all we need to do is create a slightly different version of what we already have. First off we need our new selector for the hover state of the a tags with the class navbut. Following what we did with the last bit its not too difficult to work out we need?

CODE

a:hover.navbut{}

Then we?ll just copy the other rules into this one and then make a couple of changes for the rollover effect.

So, we?ll get our styling ready by copying the info over to get

CODE

a:hover.navbut{

display:block;

text-align: center;

text-decoration:none;

color: #a54105;

border-style: ridge;

border-width: 2px;

border-color: #EEC #EEC #C66 #C66;

margin-top: 3px;

margin-bottom:3px;

background: #ccc;

}

We only need make a couple of change to the text colour and the border colour and we?ll have a working rollover for our whole navbar using about 20 lines of CSS code!

CODE

a:hover.navbut{

display:block;

text-align: center;

text-decoration:none;

color: #00F;

border-style: ridge;

border-width: 2px;

border-color: #C66 #C66 #EEC #EEC;

margin-top: 3px;

margin-bottom:3px;

background: #ccc;

}

And there you have it, your finished product should look something like this. Nothing too fancy but it does show the basic working of CSS rollovers. You incorporate images quite easily, using the background attribute you could set a background image, using a different one for the hover state. Have a play and see what you can come up with, I?m sure a lot of you are more imaginative than I?ve been here!

Oohh Adrian! Thanks so much for this!

Kim

Hey, this is cool! Should be looking at "how To's" more often (also FAQs hee hee)

... and you can also easily add a background statement to any of your styles to make the background color change depending on the mousestate.

Or a background image.

Theres loads of other things you can do, have a look round, find something inspiring

is it possible to create different colour rollovers on the same page using CSS?

if so how.......please

Hi Yaris,

Welcome to the forums

It is possible to create different colored rollovers on the same page, and it's not very difficult to do. All you have to do is create a couple of different classes, very similar to the first classes that Adrian used. You could even call them navbar2 and navbut2.

If you look at Adrian's example page, you'll see the html for the menu (URLs slightly changed for this example):

<DIV id=navbar>
<A class=navbut href=\"http://www.domain.co.uk/link1.htm\">Link 1</A> 
<A class=navbut href=\"http://www.domain.co.uk/link2.htm\">Link 2</A>
<A class=navbut href=\"http://www.domain.co.uk/link3.htm\">Link 3</A> 
<A class=navbut href=\"http://www.domain.co.uk/link4.htm\">Link 4</A> 
<A class=navbut href=\"http://www.domain.co.uk/link5.htm\">Link 5</A> </DIV>

To add another menu on the same page, you could quite simply add a couple of new classes to the external style sheet, and them refer to them in the new menu that you add to the page:

<DIV id=navbar2>
<A class=navbut2 href=\"http://www.domain.co.uk/link1.htm\">Link 1</A> 
<A class=navbut2 href=\"http://www.domain.co.uk/link2.htm\">Link 2</A> 
<A class=navbut2 href=\"http://www.domain.co.uk/link3.htm\">Link 3</A> 
<A class=navbut2 href=\"http://www.domain.co.uk/link4.htm\">Link 4</A> 
<A class=navbut2 href=\"http://www.domain.co.uk/link5.htm\">Link 5</A> </DIV>

The external style sheet determines an absolute position from the top of the page for navbar, so if I want to change the position for navbar2, I change it in the different navbar classes. Here is the original, and the new class:

#navbar {
PADDING-RIGHT: 10px; PADDING-LEFT: 10px; FONT-SIZE: 0.8em; BACKGROUND: #ccc; LEFT: 15px; PADDING-BOTTOM: 10px; WIDTH: 120px; PADDING-TOP: 10px; FONT-FAMILY: \"comic sans ms\", \"arial\"; POSITION: absolute; TOP: 90px; TEXT-ALIGN: center
}

#navbar2 {
PADDING-RIGHT: 10px; PADDING-LEFT: 10px; FONT-SIZE: 0.8em; BACKGROUND: #ccc; LEFT: 15px; PADDING-BOTTOM: 10px; WIDTH: 120px; PADDING-TOP: 10px; FONT-FAMILY: \"comic sans ms\", \"arial\"; POSITION: absolute; TOP: 280px; TEXT-ALIGN: center

}

I also need to include my new navbut2 in the external stylesheet. I'll just show the hover state here, but you can change the normal appearance (A.navbut ), the visited appearance (A.navbut:visited ), and the hover appearance (A.navbut:hover ) all in the same manner. Here, I just changed the color of the text. The original, and the new class:

A.navbut:hover {
BORDER-RIGHT: #c66 2px ridge; BORDER-TOP: #c66 2px ridge; MARGIN-TOP: 3px; DISPLAY: block; BACKGROUND: #ccc; MARGIN-BOTTOM: 3px; BORDER-LEFT: #eec 2px ridge; COLOR: #00f; BORDER-BOTTOM: #eec 2px ridge; TEXT-ALIGN: center; TEXT-DECORATION: none
}

A.navbut2:hover {
BORDER-RIGHT: #c66 2px ridge; BORDER-TOP: #c66 2px ridge; MARGIN-TOP: 3px; DISPLAY: block; BACKGROUND: #ccc; MARGIN-BOTTOM: 3px; BORDER-LEFT: #eec 2px ridge; COLOR: #0f0; BORDER-BOTTOM: #eec 2px ridge; TEXT-ALIGN: center; TEXT-DECORATION: none
}

That's one way of doing this. Note, it may be possible to use less lines of code to get the same result, but I used this method just to show how easy it was to create additional classes.

Adding on a post late in the day, I know - but it's a useful point about the cascading bit of cascading style sheets.

Rather than having

CODE

a.button {

border-style: groove;

color: white;

background-color: black;

margin: 10px;

padding: 5px;

}



a:hover.button {

border-style: groove;

color: yellow;

background-color: black;

margin: 10px;

padding: 5px;

}

you could employ cascading as follows:

CODE

a.button {

border-style: groove;

color: white;

background-color: black;

margin: 10px;

padding: 5px;

}



a.button:hover {

color: yellow;

}

The second statement in the CSS file automatically inherits all aspects of the first statement except for the changes specified.

Similarly, rather than having

CODE

<div class=container>

<a class=containerbutton href="http://www.domain.co.uk/link1.htm">Link 1</a>

<a class=containerbutton href="http://www.domain.co.uk/link2.htm">Link 2</a>

<a class=containerbutton href="http://www.domain.co.uk/link3.htm">Link 3</a>

<a class=containerbutton href="http://www.domain.co.uk/link4.htm">Link 4</a>

<a class=containerbutton href="http://www.domain.co.uk/link5.htm">Link 5</a>

</div>

with

CODE

div.container {

background-color: yellow;

}



a.containerbutton {

color: black;

}



a.containerbutton:hover {

color: red;

}

in the CSS, you could again simplify it using cascading as follows:

CODE

<div class=container>

<a href="http://www.domain.co.uk/link1.htm">Link 1</a>

<a href="http://www.domain.co.uk/link2.htm">Link 2</a>

<a href="http://www.domain.co.uk/link3.htm">Link 3</a>

<a href="http://www.domain.co.uk/link4.htm">Link 4</a>

<a href="http://www.domain.co.uk/link5.htm">Link 5</a>

</div>

and

CODE

div.container {

background-color: yellow;

}



div.container a {

color: black;

}



div.container a:hover {

color: red;

}

In other words, rather than specifying the class for every single anchor, the second version specifies that any anchor within div class="container" is of the type specified in the CSS.

(hope that works and is clear!)

Vertical CSS Menu

Ah, the beauty of CSS, tis a very powerful tool!

Months ago, I developed my own CSS Menu complete with rollover effects using color, border attributes and a background image, see link above. There is a vertical and horizontal example shown.

What makes this particular menu unique is that I am using <li> to structure the links which is more semantically correct. It took me a while to figure out all of the styling but finally nailed it after about a month of testing.

With the help of my peers, I was able to add some additional functionality such as the on page state of links all by using CSS, no javascript. If you visit our directory, you'll see the CSS on page state in action.

You can be very creative when using CSS to control your link states. You can literally do all of your image rollovers with CSS, you don't need the javascript anymore.

I meant to get back to this sooner, but being busy and tired from other things has prevented me from getting it updated.

I've learnt a fair bit more about CSS Rollovers and nav bars in the last 9 months and yes, your perfectly correct grey squirrel, using a containing div with the appropriatte class is as good, and almsot certainly better than setting a class for all the individual links.

And as you say pageonereults, using lists for your nav bars is a lot more semantic, I linked to the List-o-matic and its partner, the List-o-rama to help create navigation lists in vertical or horizontal formt.

My tutorial above does help explain the principle, but I probably need to update it to be better in line with the way I do them now.

Howdy, pageone, it's good to see you here.

As you poke around the forums, you'll see I've been admiring your coding at seoconsultants for quite a while.

Welcome.

As per the edit in my orignal post, I've now updated the version on my site, I was thinking of going into the idea of having the links in a proper semantic list, but thought that was maybe going a bit far to get the idea of CSS Rollovers over, heh.

Adrian,

May I use your tutorial(s) in my 'tutorials' section on my website? I will provide whatever backlink/resource box you would like.

Please let me know.

Thanks,

Todd Going
todd@sitetutor.com

Feel free to link TOO it, I'd rather you didn't copy the content and place it on your own site though.

I've been messing around with the CSS rollover's for a bit now and one thing eludes me maybe you guys can help.

I would like to set a "You are here" type reminder on the current page maybe the same image as the hover state image. I've done it in JS but would like to change it in my redo of a site to CSS if I can figure it out.

Nice example here:

http://css.maxdesign.com.au/listamatic/vertical11.htm#

That example uses the "visited" state for the current page. It is possible to modify it to use the hover state instead of the visited state.

#navcontainer a:link, #navlist a:visited in the example, then your CSS navigation button for the current page would have the same appearance as a button you were hovering over.

Thanks Bill. I'll have to check it out a little more and tweak it a bit.

Hey bragadocchio the link was about the same as I had but used it anyway and tweaked it just a little using Java works real good. Have my site to NO javascript except on one page. An example of what I did with it is at my site the whole nav bar has no js in it. Gotta love css for the clean approach and it doesn't exclude the 13% of people that don't have js enabled.

Thanks for the link

That looks pretty sharp. I like the hover look on those "uberlink" buttons.

Nice going.

hi The Alien
you can use <span> to make things show when you roll over a butom so if that what you want this how you do it...
But then it will only show when you roll over

style part...
#menu a span {
display:none;
}

#menu a:hover span {
display: block;
font: 11px verdana;
color: black;
}

in the body part.....
<a href="x.html">Art<span>Some of my work</span></a>
but if you want a permanet/allways showing reminder on wich page your at I would probably do that in a sparte code on the the specifik page
something like


#menu a span {
display: block;
font: 11px verdana;
color: black;
}


<div id="menu">
<a href="x.html">Konst<span>Your here!</span></a><br>
<a href="x.html">Who</a><br>
<a href=x.html>Photos</a><br>

hmmmmmm has not tested that idea but well I am still consider myself a newbee with css but its soooo much fun to play with good luck!!1
lirys