SitePoint Sponsor

User Tag List

Results 1 to 17 of 17
  1. #1
    SitePoint Guru toasti's Avatar
    Join Date
    Feb 2004
    Location
    Grahamstown
    Posts
    634
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Too many tabs. whats the solution?

    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?

  2. #2
    SitePoint Addict
    Join Date
    May 2006
    Posts
    399
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you could think about a fly-out or drop down menu using css?

  3. #3
    SitePoint Guru
    Join Date
    Jun 2006
    Posts
    638
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  4. #4
    SQL Consultant gold trophysilver trophybronze trophy
    r937's Avatar
    Join Date
    Jul 2002
    Location
    Toronto, Canada
    Posts
    39,018
    Mentioned
    53 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by toasti
    I quite like what amazon have done.
    too many tabs? not possible!!

    see screenshot
    r937.com | rudy.ca | Buy my SitePoint book: Simply SQL
    "giving out my real stuffs"

  5. #5
    SitePoint Guru toasti's Avatar
    Join Date
    Feb 2004
    Location
    Grahamstown
    Posts
    634
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Attached Images Attached Images

  6. #6
    SitePoint Addict
    Join Date
    May 2006
    Posts
    399
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hmm, interesting. Can the Amazon type "hybrid" menu as toasti puts it be done using CSS?

    Any ideas?

  7. #7
    SitePoint Guru DCS's Avatar
    Join Date
    Apr 2002
    Location
    Arkansas
    Posts
    809
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  8. #8
    SitePoint Guru toasti's Avatar
    Join Date
    Feb 2004
    Location
    Grahamstown
    Posts
    634
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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 .

  9. #9
    SitePoint Guru toasti's Avatar
    Join Date
    Feb 2004
    Location
    Grahamstown
    Posts
    634
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  10. #10
    SitePoint Addict
    Join Date
    May 2006
    Posts
    399
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy

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


  11. #11
    SitePoint Guru toasti's Avatar
    Join Date
    Feb 2004
    Location
    Grahamstown
    Posts
    634
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!

  12. #12
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,495
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  13. #13
    SitePoint Guru toasti's Avatar
    Join Date
    Feb 2004
    Location
    Grahamstown
    Posts
    634
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ...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

  14. #14
    SitePoint Guru toasti's Avatar
    Join Date
    Feb 2004
    Location
    Grahamstown
    Posts
    634
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  15. #15
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,495
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  16. #16
    SitePoint Guru toasti's Avatar
    Join Date
    Feb 2004
    Location
    Grahamstown
    Posts
    634
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!

  17. #17
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,495
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •