Horizontal navbar with hover effect

**JohnoLFC** · Dec 17, 2012 08:38

Hello everyone,

Just wondering if anyone is able to help me out with a CSS question. I'm trying to create a horizontal navigation bar for a home page, and I would like it so when the user hovers over the link, the image is changed.

Here is the code I have at the minute, but this puts one image for all links (the home.gif image). I would like to be able to target each href in the ordered list so that I can change the home.gif, to about_us.gif etc;

Code:

<!DOCTYPE html>

<html>
<head>
	<title>Bar Zest</title>
	<link rel="stylesheet" type="text/css" href="stylesheet.css" />
</head>
<body>
<div id="container"> 
<div id="navmenu">
	<ol>
		<li><a href="#">About us</a></li>
		<li><a href="#">Products</a></li>
		<li><a href="#">VIP</a></li>
		<li><a href="#">Contact us</a></li>
	</ol>
</div>		
</div>

	
</div>
</body>

</html>

and here is the CSS:

Code:

#container {
	text-align: center;
	margin: 15px;
}

#navmenu {
	width: 900px;
	height: 60px;
	padding: 0px;
	margin: 0px auto;
}

#navmenu ol {
	list-style-type: none;
	margin: 4px;
	padding: 0px;
	text-align: center;
}

#navmenu ol li {
	width: 200px;
	float: left;
	margin: 4px;
}
#navmenu ol li a {
	text-decoration: none;
	display: block;
	color: transparent;
	width: 200px;	
	height: 60px;
	line-height: 40px;
	font-size: 14pt;
	background-image: url(images/home.gif);
}

#navmenu a:hover {
	background-image: url(images/home.gif);
	background-position: -207px 0px;
	
}

#navmenu ol li a {
	text-decoration: none;
	display: block;
	color: transparent;
	width: 200px;	
	height: 60px;
	line-height: 40px;
	font-size: 14pt;
	background-image: url(images/home.gif);
	background-repeat: no-repeat;

}

#navmenu a:hover {
	background-image: url(images/home.gif);
	background-position: -207px 0px;
	
}

Any help would be very much appreciated,

Cheers

**PicnicTutorials** · Dec 17, 2012 09:02

The best way is to do it with sprites. Here is the css code and how to make the image. http://www.visibilityinherit.com/code/sprites.php

**JohnoLFC** · Dec 17, 2012 09:19

Originally Posted by EricWatson

The best way is to do it with sprites. Here is the css code and how to make the image. http://www.visibilityinherit.com/code/sprites.php

Thanks for the quick reply Eric

With that, it seems be one complete image, is there a way to have individual images for each button as the ones I have aren't on the one image. For some reason, I'm unable to load one of the images on here to aid,

Cheers

**PicnicTutorials** · Dec 17, 2012 10:00

Originally Posted by JohnoLFC

Thanks for the quick reply Eric

With that, it seems be one complete image, is there a way to have individual images for each button as the ones I have aren't on the one image. For some reason, I'm unable to load one of the images on here to aid,

Cheers

No prob. Keeps me busy. Ya you can do that. Just make the sprite different. There will of course be more and complicated css though.

If you didn't want to do the sprite there are other ways. You could use one of these methods. http://www.visibilityinherit.com/cod...image-swap.php. Or place one image on top of the other and say opacity 0 onHover. That's most of them that won't give you a flicker when hovered the first time before cached.

**JohnoLFC** · Dec 17, 2012 10:12

Hello Eric,

Thanks for your help, I managed to do it using your method;

<!DOCTYPE html>

<html>
<head>
<title>Bar Zest</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
</head>
<body>
<ul id="nav">
<li><a href="#" id="a">ABOUT US</a></li>
<li><a href="#" id="b">MENU</a></li>
<li><a href="#" id="c">PRODUCTS</a></li>
<li><a href="#" id="d">CONTACT US</a></li>
</ul>

</body>

</html>

And heres the CSS;

* {
margin:0;
padding:0;
}
body {
background:#eee;
}
#nav {
list-style:none;
width:1200px;
height:50px;
margin:20px auto;
overflow:hidden;
}
#nav li {
float:left;
}
#nav a {
float:left;
width:200px;
padding-top:50px;
padding-bottom: 50px;
outline:0;
margin-right: 4px;
}
/* Default State */
#nav #a{background:url(images/aboutus.gif); background-repeat: no-repeat; background-position:0px -5px;}
#nav #b{background:url(images/menu.gif); background-repeat: no-repeat; background-position:0px -9px;}
#nav #c{background:url(images/products.gif); background-repeat: no-repeat; background-position: 0px -7px;}
#nav #d{background:url(images/contactus.gif); background-repeat: no-repeat; background-position: 0px -7px;}

/* Hover/Focus State */
#nav #a:hover {background-position: -207px -5px;}
#nav #b:hover {background-position: -207px -9px;}
#nav #c:hover {background-position: -207px -7px;}
#nav #d:hover {background-position: -207px -7px;}
#nav #e:hover {background-position: -197px 5px;}

Thanks again for your help with this, you have done something a whole morning on youtube couldnt teach me! haha

Cheers

**PicnicTutorials** · Dec 17, 2012 10:17

Good. Np prob. I'm glad to be of help.

User Tag List

Thread: Horizontal navbar with hover effect

Thread Tools

Display

Horizontal navbar with hover effect

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions