Dynamic Drive CSS Library- Glossy Horizontal Menu

CSS Library

CSS Layouts

Web Graphics

Free Icons

Online Tools:

Website Templates

Social Media Applications

PSD to HTML

Web Templates

Website Hosting

HTML Editor

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

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 16 of 20 pages « First < 14 15 16 17 18 > Last »

I got this menu working great in IE, but in firefox I am getting some black squares on the corners of each menu tab. And the menu items are not in a straight line, they are making more kind of a wave line.
Any sugestions.....

Posted by cesar110 on 05/05, 09:32 AM

hello friend how are u. i am shahbaz and i am travels agent . i want u desighn my web site pls

Posted by shahbaz on 05/06, 10:45 PM

i find this as awesome code.. because earlier i used frames . but its not attractive . now it looks gr8 :)

Posted by kanthiri on 05/12, 08:13 PM

I have the right and left hovers working fine. Everything seems to work fine except the gifs for the background of the non-current, non-hovering links. The gif - menur_bg.gif only gives me a 1px wide vertical line. I've downloaded it a number of times and I've even tried the blue one. I can't seem to get a workable download of that gif!

Posted by Randy on 05/14, 08:30 PM

Cool, but when I visit my website (http://seifpic.piczo.com/), it works fine, the next time I visit it, it comes only the left picture.
Visit my site and see, please tell me what's wrong.

Posted by Seif Shawkat on 05/15, 09:54 AM

awesome menus..thanks

Posted by cosmin on 05/15, 03:56 PM

To Randy.... I had the same problem, I found out that you have to put the 3 pictures in your website and then right click on it, then click on properties, you'll find it's address(url), so copy the address(url) then put it in the place in the css that says "url". Do the same for all 3. It worked fine.

Posted by Seif Shawkat on 05/16, 12:45 AM

hi everyone, i am a newbie unfortunately and i have done a little web design in uni. i have been given the task to carry out a website for my brothers company but i would like to use the green tabs above.
does anyone have a set of instructions of what i need to do in order to get the green set to work?

please can some one please help me out

cheers
please email me at cragga_lfc@hotmail.com

cheers

Posted by Craig Nicholson on 05/19, 04:00 AM

I love this...
It is Awesome!

Posted by Nilesh on 05/20, 09:17 AM

How do you make the menu stay? When I minimize my browser by dragging it, it brakes the menu, check it out at www.parkscomputers.com/support/beta.htm

Posted by Ryan Parks on 05/20, 09:18 AM

Comment Pages 16 of 20 pages « First < 14 15 16 17 18 > Last »