Jump to content
Sign in to follow this  
Jo 90

TUTORIAL: CSS image rollover - horizontal navigation

Recommended Posts

Hi,

 

I have created a very simple and easy to configure CSS Image Rollover Tutorial that uses only one image so there's no loading times for the rollover states, resulting in smoother transitions.

 

It works by containing the normal and rollover states in one image, we simply use the css to move the image into it's hover state when a mouse is rolled over (see attached image). It's all controlled by ul and li html.

 

I have included a .zip containing the source with comments and the image used so you can see how it works and tweak it to suit your needs.

 

CSS Code:

<style type="text/css">

#navigation ul {
width: 320px; 
height: 30px; 
position: absolute;
top: 100px; 
left: 300px; 
background: url(menu.jpg) no-repeat 0 0;
list-style: none;
margin: 0; padding: 0;
}
#navigation li {
display: inline;
}
#navigation li a:link, #navigation li a:visited {
border: none;
width: 80px; 
height: 30px; 
display: block; 
position: absolute; 
top: 0; 
text-indent: -7000px;
outline: none;
}
#navigation li.blue a:link, #navigation li.blue a:visited { 
left: 0;
}
#navigation li.green a:link, #navigation li.green a:visited { 
left: 80px 
}
#navigation li.orange a:link, #navigation li.orange a:visited { 
left: 160px  
}
#navigation li.red a:link, #navigation li.red a:visited { 
left: 240px  
}

#navigation li.blue a:hover {
background: url(menu.jpg) no-repeat 0 -30px; 
}
#navigation li.green a:hover {
background: url(menu.jpg) no-repeat -80px -30px; 
}
#navigation li.orange a:hover {
background: url(menu.jpg) no-repeat -160px -30px;
}
#navigation li.red a:hover {
background: url(menu.jpg) no-repeat -240px -30px;
}

</style>

 

HTML:

<div id="navigation"> 
<ul>
	<li class="blue"><a href="#">Blue</a></li>
	<li class="green"><a href="#">Green</a></li>
	<li class="orange"><a href="#">Orange</a></li>
	<li class="red"><a href="#">Red</a></li>
</ul>
</div>

 

Image: (Attached)

 

Live example: Click here

 

Easy as that! As I say the .zip contains comments within the stylesheet so you know what each element does.

 

Any questions let me know.

 

Hope you find a it useful :)

menu.jpg

CSS_Image_Rollover_Tutorial.zip

Share this post


Link to post
Share on other sites

Great tutorial - saves me from writing one! I did mean to, but haven't had time!

 

the only thing I would change is adding outline:none; to the following:

 

#navigation li a:link, #navigation li a:visited {

border: none;

width: 80px; /** width of the button in active state **/

height: 30px; /** height of the button in active state **/

display: block;

position: absolute;

top: 0;

text-indent: -7000px; /** Removes li text from the screen **/

outline:none;

}

 

as this remove the annoying dotted outline you get around links - as you've indented the text by -7000px the dotted line goes right across the screen and I think it looks ugly - so I always use the outline:none; to remove this. Not sure if this has a bearing on accessibility though.

Share this post


Link to post
Share on other sites

Interesting code :)

I knew about this technique, but i'd use separated images for each of the buttons.

Right now i use background rollovers, because i think it's just easyer, but this does load faster indeed.

Might swith, but with each link it's own image tho :p i think it would be easyer t edit that way.

Share this post


Link to post
Share on other sites

If I had the time I would write a few...but too busy at the moment - what would you want tutorials on? If you list a few things you're interested in learning, then we can make tutorials that are actually wanted - hey lets start a tutorial request thread!

Share this post


Link to post
Share on other sites
If I had the time I would write a few...but too busy at the moment - what would you want tutorials on? If you list a few things you're interested in learning, then we can make tutorials that are actually wanted - hey lets start a tutorial request thread!

 

Great stuff, I think useful CSS tips and techniques that alot of us overlook, I always think back to the days when I was learning and what could have been useful.

 

I also think Graphics tutorials, could be simple as adding a gradient or a drop shadow etc or maybe some useful flash tips?

 

What do you think?

 

 

good idea :)

I'm up for that!

 

Oli

 

 

Great Stuff Olivier, always looking forward to your stuff :) You did some good Flash banners at work this week :)

Share this post


Link to post
Share on other sites

thank you ben :Db:

 

as E said, I think it'd be cool to get some requests so we can write things that are needed and will get used :)

Share this post


Link to post
Share on other sites

I've learnt a few cool CSS tricks recently so could write a couple of tutorials - if I get time this w/e I will.

Share this post


Link to post
Share on other sites

Excellent stuff guys! Nice to get some developments, you will see i'v re-arranged the forums! :)

 

Looking forward to some tutorials. :) I too will do some Fireworks tutorials soon. :)

Share this post


Link to post
Share on other sites

When I want to create image rollovers most of the time I use Dreamweavers method, I like the option to pre-load the hover images :)

 

Wildo

Share this post


Link to post
Share on other sites

Cheers, it's just a different take on your average rollover. Plus the hover effects are seamless and very smooth without having to pasue for image loads. :)

 

Glad you like.

Share this post


Link to post
Share on other sites

ok - just to recap with the tutorial - if someone has images disabled as that's the way they view the web - some people do - your navigation buttons disappear and as your text is indeneted 7000px to the left the text doesn't appear either - how do you over come this? I'm trying to imrove my website at the moment for better accessibility and have unfortunately used the text indent thing on my navigation...this is ok if the style sheet is disabled as the text links appear, but if someone has images disabled there is no navigation visible.

 

Anyone have any ideas?

Share this post


Link to post
Share on other sites

I can't wait for the release of the new CSS where we don't have to use images for the round corners. Very intimidating that they are taking their sweet time.

 

Great tutorial - saves me from writing one! I did mean to, but haven't had time!

Yea same here. I think I ignored writing a tutorial for all the basics of CSS since it can be found all over the web. I think some of us should gather and write one big tutorial.

Share this post


Link to post
Share on other sites
Guest

Eskymo - Try this example

 

http://www.sitepoint.com/article/header-images-css-xhtml

 

It overlays the image over the top of the text and therefore is much more accessible. The only problem I can see with it is that the text may be cropped in the box if the text size is enlarged but it's still a better alternative to using negative text indent or negative absolute positioning.

 

Also, I'd advise against removing the outline on links as suggested earlier as this will cause problems with accessibility for users who don't use a mouse for navigation.

 

Some users may simply use a keyboard or other device for tabbing between links and this outline serves the purpose of displaying where the focus currently lies. Removing outline will make the site completely unusable for this set of users.

 

Hope that helps.

Share this post


Link to post
Share on other sites

I know I've stopped using the outline:none for exactly that reason.

 

Thanks for the link - I will give that a go.

Share this post


Link to post
Share on other sites

Oh sorry Eskymo, I didn't notice your post. I think we were typing our posts at the same time. I ran to class after I posted and therefore I could not. Dave Woods actually has a point. You may want to give that a go. I normally stay away from outline:none and use the wireframe menu, that allows flexibility. If you want a sample of my wireframe, you could take a look at it here: http://mahmedin.info/ (its the horizontal navigation under the title image).

Share this post


Link to post
Share on other sites

Hi there, thanks for the great tutorial, however I am using it for a horizontal navigation bar across the top of a site and each button is a different width. I have created the graphic but can't see where to change the widths for each of the elements?

 

Presume this part of the CSS is stating that all the boxes should be 80px?

 

}

#navigation li a:link, #navigation li a:visited {

border: none;

width: 80px;

height: 30px;

display: block;

position: absolute;

top: 0;

text-indent: -7000px;

outline: none;

}

 

I have 5 buttons in total. Do I set the width for each one individually and then delete this width?

 

Any help most welcome.

Share this post


Link to post
Share on other sites

If you have the graphic all different widths then you will need to set the width of each button plus the left position of each button and the left position for the background image for the hover.

 

 

Perhaps for differing widths you should use a repeating background image for each li so it doesn't matter what the width is, or use the sliding doors technique instead?

http://www.alistapart.com/articles/slidingdoors/

Share this post


Link to post
Share on other sites

Hi Guys,

 

Ben I hope you don't mind. I have been playing with your tutorial today and have created a vertical version.

Thought I'd share it as it's cool to have both in the same place.

 

I have removed outline:none per the discussion here.

 

The main change is to #navigation li :

 

which has changed from

#navigation li {
	display: inline;
}

to

#navigation li { 
width: 80px;
height: 30px; 
}

 

The rest of the changes are mostly changing width and heights and movements so that it goes in the right direction.

Effectively all settings for "left" and "top" are switched around, as we now want the hover to move right and down rather than up and left.

 

The zip file includes the HTML file and a re-oriented image. It's all Ben's work really :)

 

Eris

CSS_Image_Rollover_Tutorial_Vertical.zip

Share this post


Link to post
Share on other sites

Thanks Ben! This is really helpful! :lol::yahoo::good:

Share this post


Link to post
Share on other sites

Thx Ben, and ErisDS, that was really helpful.

 

..but.. can one of the buttons be always pressed? Only with external css file?

 

edit: solution found

Share this post


Link to post
Share on other sites
Great tutorial - saves me from writing one! I did mean to, but haven't had time!

 

the only thing I would change is adding outline:none; to the following:

 

#navigation li a:link, #navigation li a:visited {

border: none;

width: 80px; /** width of the button in active state **/

height: 30px; /** height of the button in active state **/

display: block;

position: absolute;

top: 0;

text-indent: -7000px; /** Removes li text from the screen **/

outline:none;

}

 

as this remove the annoying dotted outline you get around links - as you've indented the text by -7000px the dotted line goes right across the screen and I think it looks ugly - so I always use the outline:none; to remove this. Not sure if this has a bearing on accessibility though.

 

Using 'overflow: hidden' instead of 'outline: none' will shrink the dotted line to the correct size.

 

James

Share this post


Link to post
Share on other sites

Pardon me if I am butting in in the wrong place... I can make rollovers, no problem, but I cannot figure out how to do the "change apperance to second image on click".. If you understand what I mean.

Here is the site, and what I need is the tabs to change to white when clicked. The rollovers only have two images.

Share this post


Link to post
Share on other sites

Hi boblet.

 

I think I can help you there, someone posted about this before and I've used the method ever since. Basically, you need to change your <body> tag to <body id="home"> on the home page, and on the "om" page change it to <body id="om">

 

Now, in your external CSS style sheet (styleEllen.css), you're going to need to create an id like this;

 

#home #menu .brolloverH {

background-position: -34px 0;

}

 

As you can see, now whenever a user is on your home page, the body tag will now be given the id "home", and that id home changes the appearance of your index.php link to appear as if it is always being hovered over.

 

Now you can duplicate this effect onto the rest of your links, for example;

 

#om #menu .brolloverK {

background-position: -20px 0;

}

 

I hope you understand what I've said, if not feel free to question!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing

    No registered users viewing this page.

  • Member Statistics

    • Total Members
      59,156
    • Most Online
      4,970

    Newest Member
    angelinafrancis
    Joined
  • Forum Statistics

    • Total Topics
      65,990
    • Total Posts
      454,466
×