Dynamic Drive CSS Library- Glossy Horizontal Menu

CSS Library: Horizontal CSS Menus: Here

Glossy Horizontal Menu

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 (211)

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 4 of 22 pages « First < 2 3 4 5 6 > Last »

gr8 menu.

it looks great and totally professional.

thnx

Posted by Paul on 11/29, 07:22 AM

EXCELLENT! This is outstanding tutorial, thank you very much!

Posted by Johnny on 12/06, 01:42 PM

This was a great idea to put on my schools website, its really good and im satisfied

Posted by Mason on 12/07, 09:46 AM

super menu. i love it

Posted by ranjit on 12/11, 12:01 AM

I really enjoy using CSS. I give Kudos to this one. Thanks for providing me with suck excellent service.

Posted by Yume Itsumo on 12/11, 10:41 AM

Why is it that the last bullet item rollover won't show up in IE? All the other rollovers work, but the last one doesn't. Please get back to me. Thanks!

Posted by Jeff on 12/11, 01:04 PM

Great on firefox, but not in IE...

Posted by thurrz on 12/14, 04:55 AM

great css menu
thanks dd

Posted by embrium on 12/14, 05:04 AM

To Toggy,
Message Sent: "Ok, i got the menu thing working kinda, but i still have a question. How do i remove the space between the left edge of the page and where the menu starts? I would like it to start from the very outer edge, but im not sure what to change

Posted by Toggy on 11/08, 04:26 AM"

The answer is to go to the Css file. where it said
.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;
}

Change "margin: 0 auto 0 auto;" to "margin: 0 0;"

It will be fine.

Posted by Gaelle on 12/17, 09:04 AM

Beautiful menu and easy to modify to meet my requirements. Love it!

Posted by Carlos M. Sepulveda on 12/23, 12:26 AM

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