Dynamic Drive CSS Library- Glossy Horizontal Menu

CSS Library

CSS Layouts

Web Graphics

Free Graphics

Online Tools:

Web Templates

Website Hosting

HTML Editor

Page Flip Creator- aXmag

Website Usability Testing

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

Fantasic Great work!

Posted by martynb on 11/13, 06:18 AM

Great menu, I like it and I would to use it. Thanks

Posted by cHul3x on 11/14, 07:28 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! :)
Url for my testpage:
http://java2java.net/index.shtml

Posted by anshu on 11/22, 10:06 PM

wonderwall source , thanks..

Posted by saho on 11/24, 02:02 AM

Not working to my site
please help me ...
send zip file to my email
thanks

Posted by Sadi on 11/25, 06:33 PM

Great menu.

Can we add a vertical menu to this menu?
I'd like to add vetical menu to CSS in order to display options or another links items to this categorie.

Thanx.

Posted by CSharp on 11/27, 04:39 AM

i want to stop color on every current link.
suppose i click on css than color stop on css.

Posted by mukesh on 11/27, 05:23 AM

how do i highlight the tab of the selected page? currently only the "home" is highlighted. I'm using frames for an application that has static navigation and loads different content into the main frame or left frame. I'm probably missing something obvious, but i thought I'd check.

Posted by jmg on 11/27, 04:20 PM

Greeeeeeat ;

How can we add sub-menu !!!

Thanx

Posted by Gollum on 11/29, 05:52 AM

How can we add sub-menu ?

Posted by arscghy on 11/29, 06:05 AM

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

Commenting is not available in this weblog entry.