Dynamic Drive CSS Library- Glossy Horizontal Menu

CSS Library

CSS Layouts

Web Graphics

Free Graphics

Online Tools:

Web Templates

Website Hosting

HTML Editor

Page Flip Creator- aXmag

Website Usability Testing

Advertise Here

CSS Library: Horizontal CSS Menus: Here

Glossy Horizontal Menu

Author: Santosh Setty

A nicely curved, glossy looking horizontal menu. Three images are used to create the interface- an underlining repeating gradient image, plus left and right parts of a sliced tab image for the selected tab. The author (Santosh) has kindly created five different color schemes:

Demo:

The images used:

Red scheme (3 images):

Blue scheme (3 images):

Green scheme (3 images):

Orange scheme (3 images):

Purple scheme (3 images):

The CSS:

<style type="text/css">
  
/*Credits: By Santosh Setty (http://webdesigninfo.wordpress.com) */
/*Posted to: Dynamic Drive CSS Library (http://www.dynamicdrive.com/style/) */

.glossymenu{
	position: relative;
	padding: 0 0 0 34px;
	margin: 0 auto 0 auto;
	background: url(media/menur_bg.gif) repeat-x; /*tab background image path*/
	height: 46px;
	list-style: none;
}

.glossymenu li{
	float:left;
}

.glossymenu li a{
	float: left;
	display: block;
	color:#000;
	text-decoration: none;
	font-family: sans-serif;
	font-size: 13px;
	font-weight: bold;
	padding:0 0 0 16px; /*Padding to accomodate left tab image. Do not change*/
	height: 46px;
	line-height: 46px;
	text-align: center;
	cursor: pointer;	
}

.glossymenu li a b{
	float: left;
	display: block;
	padding: 0 24px 0 8px; /*Padding of menu items*/
}

.glossymenu li.current a, .glossymenu li a:hover{
	color: #fff;
	background: url(media/menur_hover_left.gif) no-repeat; /*left tab image path*/
	background-position: left;
}

.glossymenu li.current a b, .glossymenu li a:hover b{
	color: #fff;
	background: url(media/menur_hover_right.gif) no-repeat right top; /*right tab image path*/
}

</style>

The HTML:

<ul class="glossymenu">
	<li class="current"><a href="http://www.dynamicdrive.com/"><b>Home</b></a></li>
	<li><a href="http://www.dynamicdrive.com/style/"><b>CSS</b></a></li>
	<li><a href="http://www.dynamicdrive.com/forums/"><b>Forums</b></a></li>	
	<li><a href="http://tools.dynamicdrive.com"><b>Webmaster Tools</b></a></li>	
	<li><a href="http://www.javascriptkit.com/"><b>JavaScript</b></a></li>	
	<li><a href="http://www.cssdrive.com"><b>Gallery</b></a></li>	
</ul>

Code Info

Rate this code:

Date Posted: 11/01/2007

Revision History: None

Usage Terms: Click here

Your Comments (218)

Got a question or need help customizing this CSS code? Post it in the CSS Forums. If you have a comment or suggestion instead, post it in the comments section below.

Comment Pages 5 of 22 pages « First < 3 4 5 6 7 > Last »

Wow, thats an amazing CSS menu..... i just can't use it anywhere.... :)

Posted by Travis on 12/31, 09:17 AM

I love your css nav. One question how can i get this to work with sub navigation.

Posted by Will on 01/01, 03:37 PM

Very nice.
But not working for me ? :(

I added the CSS in my main css at the top to override other settings.

Posted by meet on 01/05, 11:09 PM

Can someone tell me how I can implement this, I see no zip file so it makes it difficult for me to implement. Thanks!

Posted by Dallas Alexander on 01/06, 10:04 PM

Hi,

Looks good, but I have a problem when I resize my window the text in the menu is messing up, any idea why ?

I use IE 6

Posted by gasma1975 on 01/06, 10:42 PM

I can make it work in firefox or in IE7 but not both with the same paths.
But here work in both browsers.
Anyone can help?

Posted by Viajante on 01/07, 10:29 AM

nice one Gaelle i had the same problem and you sorted it right out!

Thanks Dan

Posted by Daniel Hegarty on 01/14, 04:19 PM

Crazy thing is this:

I can get all other menus to work, but this one will absolutely not work. I don't know what is going on. If anybody can help, please reply to this comment on this page. Thanks!

Tory

Posted by Tory on 01/15, 01:17 PM

Can someone guide me as to what is wrong with the code in this page?
http://orkutwares.blogspot.com/2007/12/scrapall-without-ads.html

everything seems to be fine, but the tabs just dont seems to work fully. only one of the background images appear when hovering above a link...

help??

Posted by xtreme on 01/16, 08:52 AM

It's working in firefox or in IE7 but not both at the same time with the same image paths.
But in your exemple page work in both browsers.
Anyone can help please?

Posted by Viajante on 01/16, 09:04 AM

Comment Pages 5 of 22 pages « First < 3 4 5 6 7 > Last »

Commenting is not available in this weblog entry.