Overlapping Rollover Tabs with Hover
This is about as complicated as you can make it but the effect is well worth the effort. This is an example of the ubiquitous tab layout but with overlapping edges to the tabs. The currently selected tab will also appear to be in front of the other tabs and this effect is followed through on hover also. The tabs are also re-sizable and will not break when the text is resized via the browsers controls and the tabs will scale very nicely indeed.
First try out the example below and hover over the tabs to see the effect in detail. You can also click the tabs and they will take you to the page with that tab selected then set as the current tab. (Select tab 1 to get back here afterwards.)
The html isn't too complicated but we do need to nest a span in the middle as hooks for our extra images. I know this isn't very semantic but each tab needs to hold 4 images. The reason for this is that 2 images are needed for the normal state and 2 images are needed for the hover state. It could be simplified with a single fixed width image for each state but then you would loses the scalability factor which is a pre-requisite of this demo.
<ul id="navx">
<li id="firstcurrent"><a href="tab1.htm"><span>Tabexample 1</span></a></li>
<li id="next"><a href="tab2.htm"><span>Tabexample 2</span></a></li>
<li><a href="tab3.htm"><span>Tabexample 3</span></a></li>
<li class="last"><a href="tab4.htm"><span>Tabexample 4</span></a></li>
</ul>
<div class="bar"></div>
Although I said we need four images for each tab we do in fact need a total of nine images overall. The reasons for this are because we are overlapping the tabs and bringing forward the current tab in front of the other tabs when hovered and when selected. This means that either side of the hovered tab we need to change each image as well as changing the hovered tab. We also need extra images for the very end tabs as they are unique compared to the others.
It will seem a little easier if you study all the images that are needed and are shown below. You should soon see why we need all the images.
-
This is the image for the left part of a tab when it is in the center of the layout and selected or hovered. -
This is the image for the right part of a tab when it is in the center of the layout and selected or hovered. -
This is the image for the left part of a hovered tab that follows a selected centre tab. -
This is the image for the right part of a hovered tab when it is before a selected center tab. -
This is the image for a normal join of the tabs. -
This is the image for the right end of the tab bar in the normal state. -
This is the image for the right end of the tab bar in the hover or selected state. -
This is the image for the left end of the tab bar in the normal state. -
This is the image for the left end of the tabs in the hover or selected state.
Notes:
If the first tab is the currently selected item then the list item has an ID of #firstcurrent otherwise it always has a class of .first
If any center tab is the currently selected item then the list item has an id of #current
If the last tab is the currently selected item then the list item has an ID of #lastcurrent otherwise it always has a class of .last
In this hover version an extra id is needed to go after the currently selected one one each page. Use #next after the current one. You will also need to use #previous on the element before except when its the first item of course.
It's probably best if you click on the tab menu above and go to each individual page and view source to see how all this fits together. You will notice that the images are much bigger than you need and you may think that you could save space and crop them to fit. However the reason the images are larger than needed is so that when the text is resized in the browers the tab will expand and more of the image is revealed and the tab structure remains perfectly intact.
Of course there will be an optimum size and it depends on how big you want the layout to scale. Trial and error is a good companion here.
As the css is quite lengthy I will not post it here but suggest you view source as the CSS is in the head (as with most of my demos) and is well commented.