What's the best way to show a multi-tier menu these days

[davetherave2]

So as one of my projects starts to expand the number of menu options and therefore potential sub-options start to expand.

So given that it seems the traditional multi-tier menu system is not that friendly for touch/mobile devices I was wondering what others did with regards to this.

I am using bootstrap 3.2 within my MVC 5 site and wondering if something like an off screen accordion menu is the way to go or if there is something a little bit more obvious that I am missing.

 

[tidusjar]

Can you show an example?

 

[davetherave2]

here is a jsfiddle with the current layout and hopefully you can see the issues

http://jsfiddle.net/b90944z5/5/

(You may need to expand the preview pane to see all the menu options)

(So this menu system works fine with lovely large screens but Ideally I want the Main menu items contained within one menu and then their sub options can then span out to additional sub menus)

Think of the current toolbar as the top menu layer currently.

Some options will only be visible if the user is authorized to access those features but I have taken that code out for brevity.

 

[Th3M8dH8tt3r]

CSS, HTML, PHP and perhaps a spot of wrapper positioning jQuery.

For mobile menus, I like to use PHP and a mobile-detect plugin rather than media queries as phones are encroaching on desktop resolutions nowadays which makes it all very tricky.

 

[davetherave2]

I'm a C#.Net Developer so currently using MVC 5 as my main scripting language rather than PHP.

I am currently working on a very simple off screen filtering solution which I will post up a solution once I have it working so I guess I could use this in a modified version as a menu.

 

[BunnyKillBot]

I have come to the conclusion in recent years, avoid animated menus wherever possible. They don't add anything substantial, break easily and can be annoying to use.

On what scale do you mean menu item terms are increasing. Did you create the rainforest and are adding infinite product categories, or did the scope of project broaden?

 

[davetherave2]

Well the project is a BI system and it aggregates a number of data sources together so we have a "portal" as such for each area and then an aggregated view.

Currently this is only for our internal users but eventually it will be expanded out to our clients/suppliers once we are happy with everything internally.

So this product will grow and grow and I know at some point the menu system is just going to look a mess so hence why I asked my question of how others cope with it.

I guess I could create an area specific menu with the ability to jump from one area to another quickly but I know that will confuse some users.

 

[One]

Your company should hire some contractors if the in-house guys aren't up to the job.

 

[davetherave2]

I'm the one building the system (although I am more a middle to back end developer rather than front end stuff plus this is replacing a number of disparate reporting tools that span the likes of SSRS 2005, Excel Spread sheets, Access Databases and god knows what else I don't about ) but wanted to know what the current trends were with menus in the modern web world. I have migrated from webforms over to MVC over the past 18 months and most of the products I have had to build during this time have had simple flat menus but as this is a more complex and longer term product I am trying to head off issues now before having to rewrite entire sections again because they have become overbearing or clunky to use plus it gives me a chance to try things out before an official launch for the product.

This is kind of an extension of my other thread where I have been building a dynamic reporting system which will satisfy most users but there are areas that are going to need to be crafted by me so that we can represent a lot of BI data in nice simple forms but as we have more and more data sources being brought in over the next 12 months or so I don't want the top menu bar to start bloating and taking up multiple lines as it will spoil the overall cleanness of the site I have built (admittedly it is using the default bootstrap theme for the majority of it)

I agree that an over-animated menu doesn't add anything and does become frustrating over time (although cool and funky to start off with) but I think a simple slide in menu from the left to display a vertical menu will allow me to have a nice clean top menu while hiding a lot of the options on the hidden/ off screen options. Therefore the user can decide if they want all the menu options on the screen or not to free up screen real estate.

Although it seems like I am probably looking for an issue that isn't there yet I know what my users are like and so I can just envisage what requests I will be asked to have this and that feature added which will require some link somewhere to get access to it (if not from the top menu then from somewhere within in the system)

 

[dazzerd]

If you have too many possible navigation routes on your front screen or are worried that you will have too many navigation routes on your front screen then you could always consider having a filter page as your main view, then from there navigate to individual pages/views depending on the choice the user makes.

I guess it depends on how different these subpages will be but if they are similar enough you could always inherit from a master view and work from there.

 

[suarve]

As far as I can see the example is bog standarded Bootstrap markup. This is "responsive" as is without any alternation. E.g. http://getbootstrap.com/examples/navbar/

I'm currently working on a large project which has a side menu simialar to the admin themes at http://www.keenthemes.com/preview/index.php?theme=metronic

You could always stick to the Bootstrap style markup and use something like:

http://www.bootstrapzero.com/bootstrap-template/off-canvas-sidebar
http://www.bootstrapzero.com/bootstrap-template/facebook
http://jasny.github.io/bootstrap/examples/navmenu-reveal/#

The term you want to be Googling is "Bootstrap Off Canvas"