Too many tabs. whats the solution?

[toasti]

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]

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

[Vali]

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]

I quite like what amazon have done.

too many tabs? not possible!!

see screenshot

[toasti]

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]

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

Any ideas?

[DCS]

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]

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]

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]

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

[toasti]

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]

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]

...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]

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]

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]

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]

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.