Dynamic Drive CSS Library- Glossy Horizontal Menu

CSS Library

CSS Layouts

Web Graphics

Free Graphics

Online Tools:

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 1 of 22 pages 1 2 3 > Last »

I Absolutely love this new menu, it is visulay appealing and I now have insperation to make a template so just wait up and I'll post a link in the forums later. This is good, I just hope I don't find some Jeckal and Hyde issue somewhere along the way like last time. (Upsidedown inverted tab menu, I still have design nightmares.)

Posted by Asa B on 11/02, 07:41 PM

Hi, great menu. I had problems downloading the GIF's. Some are as GIF and some are as 'untitled' BMP's.
I would like to use it! :)

Posted by Nick on 11/03, 07:42 AM

Very nice menu i like it:P

Posted by nothing on 11/04, 01:24 AM

Nick, for what image set(s) are you having trouble downloading as gifs? Sounds like a IE problem. :)

Posted by ddadmin on 11/04, 03:26 AM

Simply Great Work...

Posted by Selvam on 11/04, 04:49 AM

Thanks.Beatiful a menu :)

Posted by mersindost on 11/05, 05:11 AM

I liked it and used it. Just added some js to enable user interaction..It looks buitiful..

tks.

Posted by Yoseph on 11/05, 07:36 AM

The menu looks great in firefox, but when i try to view it in IE it doesnt display correctly. It displays like a list. The funny thing is, when i view THIS page in IE, it displays correctly. Any ideas?

Url for my testpage:
http://home.hia.no/~fredms07/datafixkrs2/index.php?side=hjem

Posted by Toggy on 11/06, 04:50 AM

hi want to use tab onclick but this tabs auto selected

Posted by karan on 11/06, 09:24 AM

To "Toggy"....yeah, you probablly put it in a 'table' that is too small, so it is 'crunched'. When you hover over them it works so it strikes me that is the issue. Try putting it 'outside' of the table and see what happens

Posted by Alan on 11/06, 07:06 PM

Comment Pages 1 of 22 pages 1 2 3 > Last »
Commenting is not available in this weblog entry.