CSS Library: Horizontal CSS Menus: Here
Shade Image Tabs Menu
Author: Dynamic Drive
This is an attractive "blue shading" image tab menu. The shade effect is created using two gradient background images, one for the overall tabs, and the other, for the currently "active" tab. Based partially on the Basic Tabs menu, Shade Image Tabs Menu supports three commonly requested features:
- Ability to align the menu tabs "left", "center", or "right" on the page
- Highlight a particular tab so it appears selected/ active,
- Change the width of the tab menu (so the underline beneath it spans a length other than the entire width of the page.
Demo:
The two images (resized for easier download):
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 4 of 8 pages « First < 2 3 4 5 6 > Last »
Can't make the image active. When I create 2 pages and go from one to another, CSS link in this case stays active, instead of making another one active...
Hi Pezzi, I did what you said but it still doesn't work on IE6. The CSS tab is still actived eventhough I click on other tabs. Can you please post the complete code that works for you on IE6. Can anyone else help? Thanks.
Great code! Works great!
When you click on a tab, I need it to call both the content for the page and a secondary horizantal subnav to a different <div> under the tabs. Is there any way for the tab link to call two files - one for the page content and one for the secondary nav? If not, how else could this be emplimented? Any suggestions would be appreciated.
Please help, I have clients on hold... Thank you in advance.
When you click on a tab, I need it to call both the content for the page and a secondary horizantal subnav to a different <div> under the tabs. Is there any way for the tab link to call two files - one for the page content and one for the secondary nav? If not, how else could this be emplimented? Any suggestions would be appreciated.
Please help, I have clients on hold... Thank you in advance.
I can't get the bottom line to go all the way across in IE 6, though it does work in Firefox...
the line stops after the last tab.
the line stops after the last tab.
the externalx.htm files dont show the hungarian (ιαű...)characters
why?
thank you!
why?
thank you!
This is a great script!
But...
How can you set the <li class="selected"> or the "default page" to display a page...but with no tab???
So when a user logs onto the page. They can see the "default page"....but no tab....
ANYONE?
But...
How can you set the <li class="selected"> or the "default page" to display a page...but with no tab???
So when a user logs onto the page. They can see the "default page"....but no tab....
ANYONE?
"I tried but different tabs are not highlighted when clicked, only the default one is highlighted. Can you help? " reported by Brian
I have same problem as Brian.
Is there a solution?
I tested it with IE7 where the problem accured.
Did not test other browsers.
I have same problem as Brian.
Is there a solution?
I tested it with IE7 where the problem accured.
Did not test other browsers.
how do i change the height of the tab ?
Hi!
Great design!!!
However, I have a problem: I have devided the page in three frames: a top frame with the buttons, a left form for the menu and a main form for the text. It works differently in IE and FF. In IE it looks good but in FF The bottom line is higher and the frame is scrollable. How do I fix it? Perhaps it is the frames who causes it?
Peter
Great design!!!
However, I have a problem: I have devided the page in three frames: a top frame with the buttons, a left form for the menu and a main form for the text. It works differently in IE and FF. In IE it looks good but in FF The bottom line is higher and the frame is scrollable. How do I fix it? Perhaps it is the frames who causes it?
Peter
jd