///Overlapping tabbed navigation in CSS

Overlapping tabbed navigation in CSS

Overlapping tabbed navigation in CSS

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!

Step 1 – Graphics

Before you even touch a line of code you will need to make graphics
for your tabs. This requires some artwork to make sure that the tabs
look realistic and have shadows for the on and off effects. Use
Photoshop or Illustrator to design the tabs and organise your layers so
you can quickly show and hide the different states. This method is
image based so you can use any font you like. Image replacement is used
so search engines and screenreaders will see text. Design an on, off
and overlap state for each behaviour your want to see. Once this is
complete and ready in a layered Photoshop or Illustrator file you are
ready for the next step.

Step 2 – Saving the image

To combat cross browser and image flicker problems this method uses
one image as a background which is positioned using CSS. Depending on
how intricate your design is this can make your image quite large. You
will need to make a decision on how many states you have as the more
you have the larger your image will be. You need to make an image with
a line for each state. Once you have saved the image keep it open and
use guides to find out the pixels dimensions for your CSS. Here’s the
image I’m using. After playing with image optimisations I went for a
png which works out at 12k.

Step 3 – The Markup

The XHTML is the classic unordered list navigation. This means it
will be good for search engines and good for screen readers. This
method makes use of an id on the body tag to define the on state so you
will need to either hard code the body id on the pages or handle this
with some server side code. Each li item also needs a unique id so the
background can be positioned correctly.


<html>
<
body id="home-page">
<
div id="nav">
<
ul>
<
li id="home"><a href="#">Homea>li>
<
li id="about"><a href="about/index.html">Abouta>li>
<
li id="services"><a href="services/index.html">Servicesa>li>
<
li id="contact"><a href="contact/index.html">Contacta>li>
ul>
div>
body>
html>

Step 4 – Positioning the navigation

Using the background-position property we position the image
correctly for each list item. You need to be pixel perfect on this so
this is where the guides or rulers and the marquee tool in Photoshop or
Illustrator come in. You can measure the dimensions exactly and
transfer it to the CSS. For the on states we position the tabs with a
negative margin.


li#home a:link, li#home a:visited
{
background
-position: -0px -0px;
}

body#home-page li#home a:link, body#home-page li#home a:visited
{
background
-position: -1px -38px;
}

Step 5 – Fixing IE6 & Below

IE6 and below have problems with interpreting negative margins on
floated elements. To fix this we make the states where we need a hover
absolutely positioned, and then apply a negative positioning. To make
sure it shows on top z-index is used. This method works for IE5, 5.5
and 6. To keep things clean we put things in a sepearate stylesheet and
serve this to older version of Internet Explorer using conditional
comments. This also makes sure that IE7 gets served code that takes
account improved CSS support.


body#about-page li#home a:hover,body#about-page li#home a:focus
{
position
:absolute;
margin-left:-134px;
width:150px;
z-index:1;
}

Demo

You can see the code in action in the demo.

The source code is also available for download.

This code has been tested and works in the following browsers

  • Win IE5-7
  • Win Firefox 1.5-2
  • Win Opera 9
  • Win Netscape 8.2 (IE Engine)
  • Mac Safari 2
  • Mac Firefox 1.5-2
  • Mac Camino 1
  • Mac Opera 9

The best way to understand this will be by downloading the code and going through this yourself.

2010-05-25T22:50:50+00:00 November 19th, 2007|CSS|0 Comments

About the Author:

 

Leave A Comment