Dynamic Drive CSS Library- Glossy Horizontal Menu

CSS Library

CSS Layouts

Web Graphics

Free Icons

Online Tools:

PSD to HTML

HTML Editor

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 21 of 22 pages « First < 19 20 21 22 >

For the commenter having problems with downloading the image as GIFs, odd as it sounds, delete your temporary files from Internet Explorer, Tools... Internet Options... click Delete Files from the General Tab.

Posted by Jim Clark on 01/03, 08:29 AM

Hi, I have this menu in JavaScrip (http://www.simonlycontractdeals.co.uk/) but I want to do the same thing in css. I need it to be multi colour. Can anybody help? I not too good with css so i'd rather use some kind of css menu generating tool. Would appreciate any help

Posted by Sim Only Deals on 01/03, 05:11 PM

I'm using the blue scheme and the tabs work fine except the background for the inactive tabs doesn't show! It's white instead of the grey w/ the blue line underneath. I didn't make any changes to the code....?

Posted by Irina on 01/09, 12:34 PM

Thanks to Alan's post, I found the error...background image now shows properly. Thanks Alan!

Posted by Irina on 01/09, 01:35 PM

There's this black diamond shape dot in the beginning of each word. How can I get rid of those dots?

Posted by abraham on 01/16, 10:18 PM

Okay. I got them all right when i open it in IE, but htere's still the black diamon dot everytime i open it in firefox. Is there anything I can do to fix it for firefox?

Posted by abraham on 01/16, 10:52 PM

Its asked a few times, but no solution...
I downloaded and installed that wonderfull menu.

But pls let us know how to add submenu to it.
Very important for me.
Thank you!!

Posted by goosh on 01/17, 05:40 PM

how do i inset this on my web designe?
I want to put it on, but don´t know how does it works!
I´d like to use the green menu. That´s what i need!
thanks! need your help!

Posted by Santiago on 01/17, 06:36 PM

ı use thiss menu but ı have ı problem

ex:

ı use blue one
when ı clıck inactive parts of the menu it goes to url but blue part of the menu doesnt come on the clicked part of the menu...
how can fix it?

please help me...

Posted by onder on 03/15, 11:38 PM

menu on the page centre:

.ccc
{
align:center;
}

<table border=0 cellspacing="0" celpadding="0" width=100%; align=center>
<tr>
<td align="center" valign="top" style="background:url(media/menur_bg.gif); background-position: 4px">
<table class="ccc" border=0 cellspacing="0" celpadding="0" align=center>
<tr>
<td align=center>
<ul class="glossymenu" align="center">
<li class="current">Home</li>
<li>Монтаж</li>
<li>Производство</li>
<li>Сертификаты</li>
<li><a href="http://www.javascriptkit.com/"><b>Бизнес</b></a></li>
<li>Представители</li>
<li>FAQ</li>
<li>Скачать</li>
<li>Контакты</li>
</ul>
</td>
</tr>
</td>
</tr>
</table>
</table>

Posted by ArtyX on 03/21, 02:52 PM

Comment Pages 21 of 22 pages « First < 19 20 21 22 >

Commenting is not available in this weblog entry.