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 19 of 20 pages « First < 17 18 19 20 >
I cant get it working :(
thanks! i love this menu, the blue one
how can set disable the hover effect, for only have one active tab, and when u pass over other tab not shows the hover effect ?
thanks a lot!
etol
thanks a lot!
etol
Great Menu !! Thnx
i need help customizing this CSS code !!
i need help customizing this CSS code !!
I try to add on my site but it didnt work tell me how..
thanks , verry good a menu =)
What is the wrong with the attached code?
It is not working.
Help!!!
------------------
<html>
<head>
<style type="text/css">
.glossymenu{
position: relative;
padding: 0 0 0 34px;
margin: 0 auto 0 auto;
background: (menub_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(menub_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(menub_hover_right.gif) no-repeat right top; /*right tab image path*/
}
</style>
</head>
<body>
<ul class="glossymenu">
<li class="current">Home</li>
<li>CSS</li>
<li>Forums</li>
<li>Webmaster Tools</li>
<li><a href="http://www.javascriptkit.com/"><b>Javascript</b></a></li>
<li>Gallery</li>
</ul>
</body>
</html>
It is not working.
Help!!!
------------------
<html>
<head>
<style type="text/css">
.glossymenu{
position: relative;
padding: 0 0 0 34px;
margin: 0 auto 0 auto;
background: (menub_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(menub_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(menub_hover_right.gif) no-repeat right top; /*right tab image path*/
}
</style>
</head>
<body>
<ul class="glossymenu">
<li class="current">Home</li>
<li>CSS</li>
<li>Forums</li>
<li>Webmaster Tools</li>
<li><a href="http://www.javascriptkit.com/"><b>Javascript</b></a></li>
<li>Gallery</li>
</ul>
</body>
</html>
Oh, god... i love this stuff. very cool. :)
Hello.
Very nice.
What about submenu?
Very nice.
What about submenu?
I needed to flip the images up-side-down..
If anyone would like to download them you can find them here... along with an example of how I used it -- inverted...
http://belfastareamenus.com/example/menu.php
If anyone would like to download them you can find them here... along with an example of how I used it -- inverted...
http://belfastareamenus.com/example/menu.php
