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

Anyone know how to get the menu to center on the page. I'm using PHP include to get it on the page and I want it to center. I have used the div tag with align center for my header and body content and it works fine. The menu is not centering though. It seems to left justify.

Posted by terry on 11/06, 09:54 PM

To "Terry":
Since this menu uses float:left, centering the menu items can be tricky. You may want to search on Google for general techniques on how to do this.

Posted by ddadmin on 11/07, 01:06 AM

Im having a hard time getting menu_b_hover_right to work. I only get the back ground and ....._left to work. Any suggestions?

www.shopvsc.com

Posted by Paul on 11/07, 11:09 AM

Paul (www.shopvsc.com)

In IE7 doesn't even work on your www.shopvsc.com
Just a note :-)

Posted by Lime on 11/07, 11:39 PM

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

Lime, its not working on any browser :(
I cant get the right part of the tab to show up. I know the url is right because it works for the other parts of the tab. Im stumped

Posted by Paul on 11/08, 06:05 AM

These menu's are the best! I tried them out and the work wonderfully. Thanks for adding them.

Posted by Billie on 11/08, 05:54 PM

Nice, great work.

Posted by Doogie Talons on 11/09, 03:04 AM

it dosn't freaken work...i use freewebs to do dis and dosn't work =(

Posted by dkdjkdj on 11/11, 04:14 PM

could someone please tell me how to do dis on freewebs... i pasted the html from here to freewebs.com and its gived me the links to the horzontal menue onlly... no image.. i even saved the the images they used to this.. it still didn't work. =P PLEASE HELPPP!!!!!!!!!!!!!!!!!!!!!!!=)

Posted by dkdjkdj on 11/12, 04:05 PM

Comment Pages 2 of 22 pages < 1 2 3 4 > Last »

Commenting is not available in this weblog entry.