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

Cool, but when I visit my website (http://seifpic.piczo.com/), it works fine, the next time I visit it, it comes only the left picture.
Visit my site and see, please tell me what's wrong.

Posted by Seif Shawkat on 05/15, 09:54 AM

awesome menus..thanks

Posted by cosmin on 05/15, 03:56 PM

To Randy.... I had the same problem, I found out that you have to put the 3 pictures in your website and then right click on it, then click on properties, you'll find it's address(url), so copy the address(url) then put it in the place in the css that says "url". Do the same for all 3. It worked fine.

Posted by Seif Shawkat on 05/16, 12:45 AM

hi everyone, i am a newbie unfortunately and i have done a little web design in uni. i have been given the task to carry out a website for my brothers company but i would like to use the green tabs above.
does anyone have a set of instructions of what i need to do in order to get the green set to work?

please can some one please help me out

cheers
please email me at cragga_lfc@hotmail.com

cheers

Posted by Craig Nicholson on 05/19, 04:00 AM

I love this...
It is Awesome!

Posted by Nilesh on 05/20, 09:17 AM

How do you make the menu stay? When I minimize my browser by dragging it, it brakes the menu, check it out at www.parkscomputers.com/support/beta.htm

Posted by Ryan Parks on 05/20, 09:18 AM

Very cool menu! All I can say ... I used this menu on the blog that I've made with my friends. It comes in a right time. It is really compatible with my original design.

www.bloghi5.com

The only thing I wonder is when this will support "visited link" Or it is already but I don't know how to set this up or customize properly. I don't quite have time to develop the site. So anyone who setup the visited links on this kind of menu, pls let me know.

Great work Setty !
Thanks

Posted by Jonathan on 06/01, 04:41 PM

ho do u get to change the icon from home to others

Posted by shre on 06/03, 10:20 PM

These css menus are nice for simple layout.

Posted by Ethan on 06/07, 05:48 PM

Works fine in firefox but in IE each time I hover on a menu item the background images load from the site instead of using it from the cache(not only in my page in this page too). How can I solve it?

Posted by afzal on 06/07, 11:01 PM

Comment Pages 15 of 20 pages « First < 13 14 15 16 17 > Last »