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

Color Inspiration Tool

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

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

Hi, I am trying to install this menu but it does'nt work, this is the first css menu I have worked with and so it very much trial and error.

what I did was:

1) copy css and pasted it into my own style sheet and added images to my image folder and updated the image urls.

2) copied the HTML and added it to the head

what happen is the links appear in a vertical line.

any idea's, do I need to add any more files ? or do something else.

Patrick

Posted by Patrick on 04/11, 10:39 AM

how do i put this onto my webpage in dreamweaver mx 2004

sorry if its a dumb question

Posted by Mike on 04/11, 02:31 PM

I have the same problem as 2 others: how to get menu_b_hover_right to work. I only get the back ground and ....._left to work. Any suggestions?

Same error on both FF 3beta5, FF 2 and IE 6
any help appreciated.

http://pizza.allemaal.info

Posted by m. de ruijter on 04/12, 11:34 AM

In Internet Explorer 6, which I am required to use for school (bleck), I get a 16-pixel margin between the left of the screen and the start of the menu. I checked my CSS and frame margins and padding and they are all set to 0. Any clues?

Posted by scl98029 on 04/14, 04:00 PM

@ Patrick: It looks like CSS is not enabled. Did you enable CSS in your browser? Also, you said you copied the HTML into your head. Try copying it into your body and see what happens.

@ Mike: Choose the code view and copy the CSS into your head, then save the images in your root directory and update the links in the CSS (see the comments). Copy the HTML where you want the menu.

Posted by scl98029 on 04/14, 04:03 PM

Thanks for the Great Stuff!

Posted by Gazebo on 04/17, 08:51 PM

I get these black dots that appear above the links....what is the problem?

Posted by Derek B on 04/21, 01:10 PM

Got bless U for this tech pro-menu

Posted by Arthur on 04/23, 09:39 AM

where do I download this glossy looking horizontal menu.

Posted by David London on 04/23, 02:28 PM

This menu is really great!! The best of CSS

Posted by Web Design Melbourne on 04/24, 12:43 AM

Comment Pages 13 of 21 pages « First < 11 12 13 14 15 > Last »