A set of overlapping tabs using just one very small image and a little extra markup. The selected tab is always on top and the hovered tabs come to the front but remain behind the selected tab. A line of descriptive text will appear in the line beneath the tabs.Clicking any of the tabs will reload the page with that tab shown selected.
Overlaps – a problem………
Overlapping navigation is a real problem in CSS with the box model and browser support. It is possible though. This technique is advanced CSS and the tutorial assumes a good level of understanding of both CSS and XTHML.
Avoid it if possible…….
If you can avoid it you should. It will be time consuming to produce and difficult to maintain. If you really need it or are just keen to see it done in CSS read on!
Creating CSS overlapping tabs……..
Sometimes simulating a real desktop interface for your web application can be a real challenge, especially when dealing with tabs. Side-to-side tabs are not easy to create in CSS, but overlapping tabs are even harder.view stylesheet
