Advanced Search Usage Terms Submit Contact
Dynamic Drive CSS Library
 
CSS Library
Submit an original CSS code
CSS Layouts
Web Graphics
Online Tools:

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:

The HTML:

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 6 of 20 pages « First  <  4 5 6 7 8 >  Last »

To make the current page appear to have the selected tab you need to move the class="current" the right heading e.g. if you would like the third tab appear select it should look like this in the code of that page.

<ul class="glossymenu">
<li >Home</li>
<li>CSS</li>
<li class="current">Forums</li>
<li>Webmaster Tools</li>
<li><a href="http://www.javascriptkit.com/"><b>Javascript</b></a></li>
<li>Gallery</li>
</ul>
Hope this solves some of you guy’s problems
Posted by Daniel Hegarty on 01/19, 04:55 PM
Great work ....
please add more comments on the page,so beginners can understand more easier.
Posted by RabeeshKUmar on 01/20, 07:33 AM
very nice , can i use it in a free wordpress theme ?
Posted by arindra on 01/22, 01:15 PM
I wonder if the problem with IE isn't a difference between the DOCTYPE.

Tim
Posted by Tim Kelley on 01/23, 05:07 AM
I'm having serious problems converting it to joomla, can anyone help me ... the result I get is that only the left background is shown ... below is the code. Thank you all.

.glossymenu
{
/* position: relative; */
padding: 0 0 0 34px;
margin: 0 auto 0 auto;
background: url(../images/menur_bg.gif) repeat-x; /*tab background image path*/
height: 46px;
list-style: none;
}

ul#mainlevel-nav li
{
float:left;
}

ul#mainlevel-nav 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;
}

ul#mainlevel-nav li a b{
float: left;
display: block;
padding: 0 24px 0 8px; /*Padding of menu items*/
}

#mainlevel-nav li a#active_menu-nav, ul#mainlevel-nav li a:hover{
color: #fff;
background: url(../images/menur_hover_left.gif) no-repeat; /*left tab image path*/
background-position: left;
}

#mainlevel-nav li a b, #mainlevel-nav li a:hover a b{
color: #fff;
background: url(../images/menur_hover_right.gif) no-repeat;
background-position: right top; /*right tab image path*/
}
Posted by goldie on 01/23, 09:56 AM
Very nice who ever did this:)
Posted by Abbey on 01/23, 08:32 PM
Thanks you, beatiful css.
Posted by e-okul on 01/24, 05:12 PM
Hi guys,, Great menu..
but i am a bit newbie.
where must i place the CSS?
and where the HTML?
if i have a Blanco page?
Posted by Marc on 01/25, 06:09 AM
Does NOT work in BOTH IE7 and FF2. Just wasted 1 hr on this Grrrrrr!
Posted by Raj on 01/25, 07:52 AM
Itīs working on both firefox and IE7, i think i have a css conflict and thatīs why it was not working but it works on bothe browsers
Posted by Viajante on 01/25, 10:01 AM

Comment Pages 6 of 20 pages « First  <  4 5 6 7 8 >  Last »

Name: (Required)

Email: (Required)

(NOT shown on page)

URL:

(Shown on page if entered)

Comments: (Required)

Supported BB codes: [b], [i], [u], [em], [strike], [strong], [pre], [code], and [blockquote].

Remember my personal information
Notify me of follow-up comments?

Submit the word you see below ("previewing" post does not require it):


Copyright 2006-2008 Dynamic Drive Read our Usage Terms before using any of the CSS codes.
Dynamic Drive DHTML and CSS Code Library