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:
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 »
Great work ....
please add more comments on the page,so beginners can understand more easier.
please add more comments on the page,so beginners can understand more easier.
very nice , can i use it in a free wordpress theme ?
I wonder if the problem with IE isn't a difference between the DOCTYPE.
Tim
Tim
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*/
}
.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*/
}
Very nice who ever did this:)
Thanks you, beatiful css.
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?
but i am a bit newbie.
where must i place the CSS?
and where the HTML?
if i have a Blanco page?
Does NOT work in BOTH IE7 and FF2. Just wasted 1 hr on this Grrrrrr!
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









<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 guys problems