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 20 of 22 pages « First < 18 19 20 21 22 >
I love this...very nice and was fun to install. If I could change one thing, it would be to get rid of the small gap below my menu. Look here please: http://buwalda.ca/sub/index.php I'm kinda new at css, so if anyone know's what I can do...I'd really appreciate it.
i absolutly love your rollover tabs but the right and left image overlap slightly so to fix all u have to do is change padding:0 0 0 16px; to padding:0 0 0 19px; but other than that it perfect
Some people have been wondering how to center the menu on the page. While this technique is not perfect, it more or less does the job.
<ul class="glossymenu">
<li>Fill this with &.n.b.s.p (without the . ) until you get the position you want</li>
<li class="current">Home</li>
<li>Item 1</li><li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Contact Us</li>
</ul>
could the css go in an external stylesheet
very nice, but how make the "current" menu item selected ?
Nick you have to download the GIFs into folder which your HTML or webpage is in. Don't change the name. Copy the css into the <head> of your page. Then copy the <html> below <html> of your page.
Then on <css> code you have pasted, change background: url(media/menur_hover_left.gif) and the other two with (directories/filename) for example your directory may be C:/documents and settings/(user)/my documents/filename.
All should work. You may not be able to move the menu.
Then on <css> code you have pasted, change background: url(media/menur_hover_left.gif) and the other two with (directories/filename) for example your directory may be C:/documents and settings/(user)/my documents/filename.
All should work. You may not be able to move the menu.
Some people have been wondering how to center the menu on the page. New trick with this code solution for IE and FF.
The graphic: menur_bg_1.gif is same menur_bg, make more width 200px.
And that all
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr><td>
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr>
<ul class="glossymenu">
<li>images/infobox/menur_bg_1.gif</li>
<li class="current">Tienda</li>
<li>Cliente</li>
<li>Compras</li>
<li>Contactar</li>
<li>Control</li>
<li>Mail</li>
</ul>
</table></tr></td>
</table></tr></td>
The graphic: menur_bg_1.gif is same menur_bg, make more width 200px.
And that all
When a user clicks a tab, I want to not only go to the page, but also show the tab as "selected." That state can be same as the hover effect but the tab should not go back to an "unselected" state when the mouse moves away.
How to do this?
How to do this?
The problem with the images is the name of the gif on the css code, just change:
url(media/menur_bg.gif) url(media/menu_bg.gif)
You see, there is an extra r on the first one!!!
url(media/menur_bg.gif) url(media/menu_bg.gif)
You see, there is an extra r on the first one!!!
This is menu for, Thank you.. dynamicdrive.com
Commenting is not available in this weblog entry.