Too many tabs. whats the solution?

**toasti** · Sep 11, 2006, 06:33

Hello everyone

I need to re-think the navigation on my site. Currently i am using tabs, and i am very happy with the way that they are making my site more usable, and i have recieved a positive re-action regarding them.

Only problem is, i am about to run out of space for them! What is a type of navigation which i could use which will have the same effect, but be a little more extensible.

I quite like what amazon have done. does anyone have any idea where i might find some code to get me started in moving in that direction? or alternatively have a better idea?

The reason i like tabs is that it is obvious how to get to places, and at the same time it is also obvious where you are.

What sort of navigation do you suggest?

**Blue Sky** · Sep 11, 2006, 08:05

you could think about a fly-out or drop down menu using css?

**Vali** · Sep 11, 2006, 08:22

How about more then one row?

Row 1: Sections
Row 2: Sub Sections
Row 3: SubSub Sections
And so on.

Now Row 1 is alwais there, and the rest on / off depending on what section is selected.

**r937** · Sep 11, 2006, 08:26

Originally Posted by toasti

I quite like what amazon have done.

too many tabs? not possible!!

see screenshot

**toasti** · Sep 11, 2006, 12:27

Hi guys. thanks for your suggestions.

Hi Rudy. That was not what i was referring to re amazon. See the attached screenshot. They have come up with a sort of hybrid. but i agreee with you. one shouldnt have more than 1 row of tabs.

With regards to your comment blue sky, the nice thing about the amazon menu is that it is kindof a hybrid between a flyout/dropdown and a tabbed layout. You have the advantage of a tabbed layout which makes it easy to know where you are, with the the extensibility of a dropdown in terms of how much content you can fit in.

Hi Vali, unfortunately at the moment i dont really have suitable sections/subsections. Eventually i will have countries, and under those i will be able to put branches, but for now i only have branches, and it doesnt make sense at this stage to sub divide them any further as it would not remove any complexity.

I think that one could implement this sort of thing with a cross between suckerfish dropdowns and the sliding doors technique for tabbed browsing...

Can anyone thing of any websites (other than amazon), which have dealt with this sort of issue?

Thanks guys.

**Blue Sky** · Sep 12, 2006, 07:06

hmm, interesting. Can the Amazon type "hybrid" menu as toasti puts it be done using CSS?

Any ideas?

**DCS** · Sep 12, 2006, 14:13

why not do a vertical menu, you could still treat it as tabs defining a "here" class to show where you are in the site.

**toasti** · Sep 12, 2006, 22:44

hmm, interesting. Can the Amazon type "hybrid" menu as toasti puts it be done using CSS?

I fiddled around with it a bit yesterday. I managed to combine the sliding doors method with suckerfish dropdowns. It works in FF and IE7 (unfortunately i no longer have IE6, so havent been able to test it in that).

You can see an example at:
http://www.38.co.za/38group/code/sliding_suckerfish/
(at the moment i have only made the 'Rhodes University' link active
You can also download the code from there.

I am by no means a guru at CSS, so feel free to make any changes/suggestions.

why not do a vertical menu, you could still treat it as tabs defining a "here" class to show where you are in the site.

Unfortunately i have already gone with horizontal navigation. going vertical would require a complete overhaul of the navigation for my site

.

**toasti** · Sep 12, 2006, 23:09

another nice thing. IE7 supports the hover tag properly. So one no longer needs the javascript for it to work in IE7 as we did in IE6.

**Blue Sky** · Sep 12, 2006, 23:35

sorry toasti but the example, http://www.38.co.za/38group/code/sliding_suckerfish/, does not work in IE6

**toasti** · Sep 13, 2006, 00:10

bugger. it will be easy enough to make it work. i have done something similar elsewhere. just gonna have to find myself a computer with IE6 for testing!

**Dan Schulz** · Sep 13, 2006, 00:41

Actually you can go to http://browsers.evolt.org/?ie/32bit/standalone/ and get a standalone version of Internet Explorer 3, 4, 5.01, 5.5, and 6.

However, if you want conditional comments to work, you'll have to edit the Windows Registry. You can learn how to do that here:
http://www.positioniseverything.net/...s/multiIE.html

And for those who don't know what conditional comments are, here is the answer, straight from the proverbial horse's mouth:
http://msdn.microsoft.com/workshop/a...omment_ovw.asp

**toasti** · Sep 13, 2006, 00:54

...think i fixed it. Got a mate to check for me and he says it works.

only fixed the index page..the rhodes one still wont work in IE6. but at least now we know it can be done

**toasti** · Sep 13, 2006, 00:58

Hi Dan.

How stable are those browsers? cause i tried installing the IE7 standalone version hack from microsoft and it properly messed up both IE6 and 7.

**Dan Schulz** · Sep 13, 2006, 02:23

Well, I'm currently messing around with Internet Explorer 7 (I installed the .exe straight from Microsoft), and I for one don't like the official RC1 install. The standalone versions however, are stable.

**toasti** · Sep 13, 2006, 02:50

sweet. i downloaded it and it seems to be working nicely. Thanks very much for that resource. i have been looking all over the internet to find something like that!

**Dan Schulz** · Sep 13, 2006, 03:22

Something I'm noticing with the IE6 standalone is that CSS based dropdown menus are no longer working for me...

I'm going to look for a way to rectify that situation.

The SitePoint Forums have moved.

User Tag List

Thread: Too many tabs. whats the solution?

Thread Tools

Display

Too many tabs. whats the solution?

Bookmarks

Bookmarks

Posting Permissions