3-level menu redesign

Accessibility
1

Hi there!

We’re working in the redesign of our web game Striker Manager. ( http://www.strikermanager.com )
We’ve done several poroosals but none seems to be convincing enough.

The problem is, we have a tree level menu that has to be visible most of the time because user navigate a lot between different sections, so we don’t want complex animations, nor dropdown menus. Just a single click to navigate in the current section sibblings.

Can you point us to some examples out there?

Thanks!

2

Hi qgarrigos. Welcome to SitePoint. :slight_smile:

Could you give an example of the links you are trying to organize? There seems to be no rationale for posting that link. Where are all the links that you want to organize?

3

Thanks for your quick answer Ralph.

Sorry I forgot to post some screenshots to explain better my question.

In this image you can see the current design with the 3 levels I mentioned before. It has a tabbed main menu with four options in the left column that lead to a 6 option submenu, and that points to a page that may have a top menu.

4

I would have said suckerfish if you’d wanted a good drop down menu, why don’t you try jquery or spry they seem to do what you want

5

Are they accessible? From what I’ve heard of spry, I don’t think it is. And remember, if you use any kind of javascript in the menu, you need to ensure it will also work for folk without javascript enabled.

6

A agree with avoiding dropdowns here… they would be too long.

Looking at the image, it seems the top right horiz menu would be level 2, and the box underneath level 3… because as a user I would expect that if I click on something on that top menu, it will show me the subchildren who belong under that topic in the box below.

If you have an account on github you should check out how they manage multiple levels… they do something very similar, since there are many ways to navigate to (potentially) lots of info. And when I’m on my page, there’s a “second level menu” with choices like code, network, etc. if I click on code I see the folders of the repo I’m in in the box below (choosing a repo would be level one). If I click network I see the branches of the repos below. Etc.