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 17 of 20 pages « First < 15 16 17 18 19 > Last »

Hi all,

sorry to be a thicko but i cannot understand how the current ul works in the html? am i missing somthing as i usally use visited to show current page?

Thanks
M

Posted by Michael on 06/30, 02:39 AM

check out my test site for this. It is http://mcconnie.adesignlink.com and that will give you the html code you need

Posted by CHAD on 06/30, 06:37 AM

Hi, Santosh!

This is a BRILLIANT navigation! I had trouble getting it to work in IE, but realized that I hadn't changed one of the graphic references in the style sheet to point to my site instead of to Dynamic Drive's site. Figured it out this AM and it's PERFECT!

Thank you Santosh and Dynamic!!!

Posted by Toni Thompson on 06/30, 09:25 AM

Looks nice. Downside is, it doesn't work.

Posted by Paul on 07/02, 04:11 PM

how would I create vertical css menu with this code? and sub menu. please help, thank you.

Posted by ken on 07/03, 05:06 PM

Hallo, I have a problem with drupal in: "li a b", "active a b", etc. Nothing appears with "b" (right image).
Any ideas?

Posted by gio on 07/06, 01:59 PM

ya really funky and simple
hope it will bring great look to my site

Posted by xual on 07/08, 03:29 AM

please how do i configure the css menu to start working thanks

Posted by IKenna on 07/15, 09:22 AM

Thanks a ton. Code is simple and flawless, and this is only my 12th week of self-taught CSS. No problems with IE 7, Flock, FF, or Opera. Anyone claiming it doesn't work has a mistake in their code or is using antiquated browsers. My misleadingly named url is simply to my Team Fortress2 gameserver and community site. I changed the color scheme of the tab and bg images to a black, dark blue, light blue, and light gray.

Thx again for the clarity of your work!

Posted by jeff on 07/16, 12:30 PM

I used all the code and the original images, changed where it was trying to pick the images up and things, but it doesn't want to display the images, even when I use absolute address to the images. Everything else works fine.

I am using IE6 on Win XP SP2, any suggestions would be fantastic.

Posted by Pete Sibun on 07/25, 03:05 AM

Comment Pages 17 of 20 pages « First < 15 16 17 18 19 > Last »