Dynamic Drive CSS Library- Glossy Horizontal Menu

CSS Library

CSS Layouts

Web Graphics

Free Graphics

Online Tools:

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 (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 9 of 22 pages « First < 7 8 9 10 11 > Last »

please add submenu glossymenu

Posted by einstein on 02/16, 05:01 PM

could some let me know how i can use this glossy menu
with cube cart software i am new at coding but have been playing with cube cart code just need to know were to paste the code above into my cube cart file would be very greatful thanks

Posted by ash on 02/17, 05:15 PM

how can we add sub menu?

Posted by web hosting on 02/19, 11:41 PM

Hi,
Its very very good menu's. Great work.

John
http://www.seomaterial.com

Posted by John on 02/20, 12:03 AM

hi. How to use the css. Its not working in IE7.

Posted by adroit on 02/22, 08:44 AM

Yeap, its very simple and very cute menu. I like it too :]

Posted by tom on 02/23, 04:11 PM

is there some sort of way you can center this menu so that its always in the center what ever screen size you are using?

Posted by Dave on 02/24, 12:05 PM

how to place in a site plz explain me

Posted by shanmuka sreenivas on 02/26, 11:48 AM

um hi im new at this stuff and i have no clue on to how to put this on my website can someone please tell me!!!!

Also i LOVE the tabs!!!!!!!!!!!

Posted by nickswebworld on 02/26, 01:47 PM

Hi,

i love this menu very much, i try to implement this but found some difficulty...
i am not able to implement this, even though i follow the same procedure as mention...

please i need help from some one....please tell em how i do this...please send the detail on my mail id:- baljeet.itpro@gmail.com

thansk in advance

Posted by baljeet on 02/29, 06:30 AM

Comment Pages 9 of 22 pages « First < 7 8 9 10 11 > Last »

Commenting is not available in this weblog entry.