The Trouble with Tabs

[davidb2002]

Im a web developer for a website that has been around for many years. Over the years it has gain a number of different features.

We are looking into redesign the site with usability as one of the main reasons. At the moment we use a drop down menu to access all the areas as it seems the only way we can fit some of the sub sections on the page. Some areas have 10+ sub links in the drop down.

We thought about using tabs but found a lack of space in a couple of occasions.

The question is, what do you do when you have too many sub menu options to fit in a tab?

And should the tabs change when a new tab is hovered over to display the new tabs sub sections?

[LazyJim]

I'm not totally clear on the structure or amount of links at any particular level, but maybe something similar to many shops and use an 'accordian' type side-panel. Try http://www.three.co.uk/_standalone/D...=1214306597101 Click the specifications tag and play with the expandandble list.

[atlantadentalcenter]

Another thing you can do (sorry if this is what you said you did not want to do) is make some tabs across the top with the general categories and then list within them once someone mousesover them the links that go to pages in that category.

Another idea would be to have tabs that change across the top depending on the category on is in. Or just put the links in a side bar on the left or right side.

[discopatrick]

How about this...

You only have so much width you can fit tabs into. So first of all, decide how many tabs you can have on your screen - possibly based on the average screen/viewport dimensions, which I think these days is 1024x768. Lets say you have space for 7 tabs.

Next, choose the most important 6 site areas, and put those into the first 6 tabs. Then, anything else goes into a dropdown list in the 7th tab. It doesn't have to be a nasty looking dropdown either - there are tricks for making dropdowns look sexy.

Finally, yes, it's a great idea to show the subsections when you hover over a tab. It's quite a common thing to see. Use some javascript and DOM manipulation to make the subsections appear when you hover over a tab. *Don't* use this technique for the 7th tab (if you're concerned about accessibility). Your 7th tab must be a dropdown, because it must work without javascript, or all the options in it will be inaccessible to a browser that has javascript disabled.