CSS Library: Horizontal CSS Menus: Here
Sliding Doors Tabs Menu
Author: Dynamic Drive
This is a two state rollover tabs menu based on the popular sliding doors technique. It uses two images only, a right and left tab, with each image shifting up and down as the mouse moves over a tab. This ensures a flicker free experience in IE, though it also means the tab images themselves require a little more labor to create.
The "CSS" tab is highlighted, by giving its <li> container an ID of "current."
Demo:
The two 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 3 of 5 pages < 1 2 3 4 5 >
I took this code and tweaked it so that it was flipped upside down. (So that the tabs pop down from below the line instead of above.) And I have a problem with there being too much space between the top of the tab and the top border. I need them to be flush like on the example shown here. How can I fix this?
I don't really get it...
How can I make the tab to be selected?
I've gone through a dozen of articles about tabs, but nothing works so far. I'm looking for a simple solution: Rounded tabs, which activate when one is clicked... like in Google Adwords CSS design...
In your example, I believe I have to put that navigation into each page every single time and make a new link ative... But what if my navigation is in include file?
I know it's possible to do with javascript, but I'm not good at coding at all.
Is it possible at all to make a CSS rounded tab, that's activated whenever I click on or the other link?
Something similar I've found at:
http://xahlee.org/js/tabs2/a.html
But not sure how to handle images there yet...
How can I make the tab to be selected?
I've gone through a dozen of articles about tabs, but nothing works so far. I'm looking for a simple solution: Rounded tabs, which activate when one is clicked... like in Google Adwords CSS design...
In your example, I believe I have to put that navigation into each page every single time and make a new link ative... But what if my navigation is in include file?
I know it's possible to do with javascript, but I'm not good at coding at all.
Is it possible at all to make a CSS rounded tab, that's activated whenever I click on or the other link?
Something similar I've found at:
http://xahlee.org/js/tabs2/a.html
But not sure how to handle images there yet...
Any suggestions as to using this Sliding Doors technique with menu drop-downs? I want to provide some choices under the tabs.
Thanks
Thanks
Monty,
In order to make the tab selected, you need to write CSS that indicates the 'descendant selector'. You need to include the ID of the tab <li> and then the <body> ID of the page that the tab refers to. So for instance, if you had a <div> named "Nav" that contained your <ul> and <li>'s, and one of the <li>'s was named "t-Monty" that contained an <a href="Montypage.html">Monty<>, and then you had that page (E.g. Montypage.html) with a body tag that had an id of "Monty", you would write the following CSS code.
#nav a:hover, body#Monty #t-Monty a {
color: #333;
padding-bottom: 5px;
border-color: #CCCCCC;
background: #fff ;
}
Whenever a user hovered their mouse over that tab, or clicked on that tab, it would turn the color specified above (white, with text color #333)
Try it out, once you do it once, it will become clear.
In order to make the tab selected, you need to write CSS that indicates the 'descendant selector'. You need to include the ID of the tab <li> and then the <body> ID of the page that the tab refers to. So for instance, if you had a <div> named "Nav" that contained your <ul> and <li>'s, and one of the <li>'s was named "t-Monty" that contained an <a href="Montypage.html">Monty<>, and then you had that page (E.g. Montypage.html) with a body tag that had an id of "Monty", you would write the following CSS code.
#nav a:hover, body#Monty #t-Monty a {
color: #333;
padding-bottom: 5px;
border-color: #CCCCCC;
background: #fff ;
}
Whenever a user hovered their mouse over that tab, or clicked on that tab, it would turn the color specified above (white, with text color #333)
Try it out, once you do it once, it will become clear.
Really cool menu! Easy to install!!!! Thank You!
This CSS approach runs circles arount what I had tried using JAVA. Finally a good looking menu for my web sites that was easy to implements.
John Gee, Perth, Australia
John Gee, Perth, Australia
Hi,
I love this. But I have a problem.
The tabs show up fine on IE but doesn't seem to work for Firefox 2.0.
Have I done something wrong or is this not compatiblewith FF2.0?
Thanks for your help in advance.
I love this. But I have a problem.
The tabs show up fine on IE but doesn't seem to work for Firefox 2.0.
Have I done something wrong or is this not compatiblewith FF2.0?
Thanks for your help in advance.
Hi again,
I don't no exactly why but it worked out with the "Chrome Menu Bar". It must be something to do with my rich template.
I don't no exactly why but it worked out with the "Chrome Menu Bar". It must be something to do with my rich template.
Very neat and Thanks for the clean and simple content, I am working a project now that uses tabs and this provides a quick solution.
Loaded it down and took it on my page. Nothing works. I think that this is a very bad fake. My Page lists the Menu as a tree and not like here. How would it be to bring instructions about integrating it the right way?
Commenting is not available in this weblog entry.