Forum Moderators: not2easy
I want to make a kind of special horizontal menu in pure CSS with overlapping tabs.
The tabs should clearly show which one that has "focus" by showing those in a lighter color, and bring the actual tab in front of the other tabs.
What I have thought of, is to use images inside divs, stack them up overlapping the previous one, use x-index and make a kind of script that determines the current page/tab for focus.
What is the best way to do this?
Best regards,
Kjell Inge Sandvik
I think this can simply be done by clever construction of your tab images and a dash of CSS, first search for the tutorial on ["sliding doors of CSS"]
now how do I explain image construction in words.. arghhh
That tutorial explains the basics of producing flexible tabs, whether or not you want the flexible bit is up to you but I refer to the images ~ where they've got the nicely rounded corners you need to substitute them with how the sides of your tabs would look "overlapping" their neighbours and build your images to suit. build two images (or 4 if you follow the flexible tutorial) ~ how you want them to look in their natural state and then their hovered/active state..
Now to get the tab to show as if it's "in focus" on an active page can be done with script but it can also be done with CSS too, only really advisable on smaller site.
First you need to give each site section/page it's own class or ID and apply it to the body element
e.g.
<body id ="bhome">
<body id ="bnews">
<body id ="babout">
then you need to give each menu tab (list item?) it's own individual ID too
<div id="tabs">
<ul>
<li id="mhome"><a href="#">home</a></li>
<li id="mnews"><a href="#">news</a></li>
<li id="mabout"><a href="#">about</a></li>
</ul>
</div>
then the CSS for normal styling of this would be
#tabs li a {rules in here}
#tabs li a:hover {hover rules in here}
in order to get the "active" page to take the same rules as a hovered links then you can get specific
#tabs li a {rules in here}
#bhome #mhome #tabs li a,
#bnews #mnews #tabs li a,
#babout #mabout #tabs li a,
#tabs li a:hover {hover rules in here}
The more specific (i.e. more ID selectors have to be matched) <a> rules when both the <body> id and <li> are matched will override the general
#tabs li athis technique can be applied to more than just :link or :hover but the principal is the same
Anyhow sorry about the more general image explanation, but I can't think how to describe it in words :(
Suzy
