SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Wizard silver trophybronze trophy Cups's Avatar
    Join Date
    Oct 2006
    Location
    France, deep rural.
    Posts
    6,869
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)

    Signpost me to usable, accessible multi-level menus

    Hi,

    I want to create some multi-option nav menus for my site.

    They can use JS, but must degrade gracefully.

    Output will come from databases queried by PHP, in case that is relevant.

    They can be contained in a div which loads actually after the main content of the page, but graphically will appear at the top.

    I would rather rely on css methods to hide/show, I don't want mouseover events to trigger them, but mouse clicks, or rather, keypressdown events.

    e.g.

    [media] | [blogs] |
    |
    [books]
    [cds ]
    [dvds ]

    ie click media and see, books, cds dvds, click one of them and go to ;

    /books etc

    So, only one level required.

    What is the current state of play in the arena of usable, highly accessible menu systems like this?
    High degree of visual control would be nice, but secondary.
    Re-use of <ul>s would be nice
    go vertical or horizontal depending on css would be valuable to me too

    I know there is a lot of info out on the web about this subject, but prefer come to this community for your regarded opinion.

    Whats your favourite system? ( and maybe why )

    Thanks for any guidance you can offer me.

  2. #2
    SitePoint Addict Aarem's Avatar
    Join Date
    Aug 2008
    Posts
    245
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You could look at something like this: Suckerfish

    But the first question to ask yourself is: Do I really need drop-downs? There are lots of arguments against them.

  3. #3
    SitePoint Wizard silver trophybronze trophy Cups's Avatar
    Join Date
    Oct 2006
    Location
    France, deep rural.
    Posts
    6,869
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    Thanks for the link, just what I was looking for.

    Do I need them? you ask.

    Well I have a content-heavy largely informational site, with many external links (like 1000s) and the navigation by categories and subcategories needs to be somewhere, and while this part leads to about 100 different jump-off pages, I cant see any other way of doing it.

    There is nav by A-Z and search built in too.

    Can you give me an example of what you have in mind as an alternative?

  4. #4
    SitePoint Wizard bronze trophy Tailslide's Avatar
    Join Date
    Feb 2006
    Location
    Bedford, UK
    Posts
    1,687
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There's the Accessible Suckerfish menu (better than the original or Son of Suckerfish menu) or the Freestyle menu - both of which are pretty accessible (e.g. keyboard navigable). The Freestyle menu reverts to a plain CSS dropdown menu system without JS on - IE6 has "issues" here and so I'd provide an alternative for it.
    Little Blue Plane Web Design
    Blood, Sweat & Rust - A Land Rover restoration project

  5. #5
    SitePoint Addict Aarem's Avatar
    Join Date
    Aug 2008
    Posts
    245
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Cups View Post
    Can you give me an example of what you have in mind as an alternative?
    Well, I guess your site is very complex, so they might help. But generally I like the menu to cover broad categories of interest. If you follow a link, you come to a page with more options, say listed on a sidebar. That way you work your way down into the site in a way that makes sense, rather than jumping all over the place with dropdowns.

  6. #6
    SitePoint Wizard silver trophybronze trophy Cups's Avatar
    Join Date
    Oct 2006
    Location
    France, deep rural.
    Posts
    6,869
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    Thanks for the suggestions, yes Aarem, I see what you mean now.

    The thing is that the scope of the categories is so far-ranging I really want to show on each page of the site a clue as to what that full scope encompasses.

    Your comments have got me thinking all the same.

    I am toying with the idea that selection from the first menu item, yes, cascades the second level but shows them as html links in a div at the top of the page rather than these nervous-looking fly out menus.

    so, clicking on media in the top menu does this ...

    [media][blogs][other][top][menu][items]
    [div style=dark_colored_block]
    Cds | Books | Dvds | (other media options )
    [/div]

    I've used moo.fx to slide in/out divs similar to this on other specific areas. I suppose I could echo the full UL at the foot of the page for non-js users with a link to "nav menu".

    Though I wouldn't be against leaving that division on the page all the time. The max amount of secondary items is 20.

    Off Topic:

    @Tailslide - I don't believe it, I've got an ex-mod 1972 lwb Landie parked behind a shed. Been there 2 years, won't come out of reverse gear... I bookmarked your site, I must see how you tackled you gearbox.

  7. #7
    SitePoint Wizard bronze trophy Tailslide's Avatar
    Join Date
    Feb 2006
    Location
    Bedford, UK
    Posts
    1,687
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Cups View Post

    Off Topic:

    @Tailslide - I don't believe it, I've got an ex-mod 1972 lwb Landie parked behind a shed. Been there 2 years, won't come out of reverse gear... I bookmarked your site, I must see how you tackled you gearbox.
    Off Topic:

    My husband is the Land Rover genius - he's had our Series III gearbox apart about 10 times over the years! Feel free to get in touch.
    Little Blue Plane Web Design
    Blood, Sweat & Rust - A Land Rover restoration project


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
  •