Dynamic Drive CSS Library- Glossy Horizontal Menu

CSS Library

CSS Layouts

Web Graphics

Free Icons

Online Tools:

Website Templates

PSD to HTML

Web Templates

Website Hosting

HTML Editor

Social Media Applications

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

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

I want set up class="current" when I press on a link of the menu.

How I make?

Thanks

Posted by Antonio on 04/24, 01:34 AM

Really slick menu. I'm going to work something similar into one of my upcoming free Dreamweaver templates at JustDreamweaver.com

Posted by Ryan on 04/25, 09:25 AM

cool but when i use css code as a link file the image does not work i have placed the pictures in folder www\MY_Project\Practic\images. can some tell me how to fix the path in css file

Posted by Faridullah on 04/26, 04:53 AM

I am not getting this piece of code to work on my computer, can someone please help?

I am a student.

I copied the CSS code in the <head> tags and the HTML code in the <body> tags. I removed the /media because I don't have a media folder within my folder.

If you can help, I will appreciate it.

Posted by jaywalking on 04/30, 08:43 AM

Looks fantistic, and you are probably tired of working on the menu by now. but one question?
running on IE 7.0 (works great except) the Home menu stays hightlighted when hovering over other items. It even works that way on your site.

Do I have to use javascript to change the action??

thanks for such nice work.

chuck

Posted by Chuck Snyder on 05/01, 02:42 PM

Looks good! can I get i in black?

Posted by drm1963 on 05/02, 12:20 AM

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

Comment Pages 14 of 20 pages « First < 12 13 14 15 16 > Last »