Responsive 2 level horizontal navigation list: Examples and Best Practices

[chrisjb]

Hi everyone,

I’ve got an interesting problem that I hope some people have encountered before.

I’ve got a horizontal list of categories displaying at the top of my page. Directly below that I have a horizontal list of sub categories that display depending on which category you’re browsing (one list of sub categories always shows).

At first I tried using “Fleximenu”, which makes any list items that don’t fit the browser width turn into a drop down. This works quite well if you have one list, but I think it looks a bit messy if you apply it two both lists.

My question is, has anyone faced this problem before and if so what solution did you go with? And do you know of any good examples of responsive horizontal menu lists?

I quite like the way vogue.co.uk have done their Trending list in smaller resolutions. See vogue.co.uk. But I’m struggling to find any examples that are similar to what I’m trying to create (with two lists, one above the other).

Thanks in advance for any examples you can provide.

Cheers,

Chris

[Paulie_D]

I’m having trouble visualising what you are after…do you have a link?

[chrisjb]

I’ve got a link to a dev site. Hope it’s ok to post this, even though it is temporary:

http://stylewired.com/et-dev-2/

Can you see the two rows of horizontal lists in the header area? On the first list (top level categories) I’ve used Fleximenu. I haven’t done anything to the second list (sub categories on every page except the home page where the second list is “Trending”) yet.

I’m thinking about doing something similar to vogue.co.uk as I think it might work more nicely than FlexiMenu.

It’s difficult to make two horizontal lists work nicely in smaller screen sizes! I’d like to have a look at some responsive examples but I can’t find any.

Thanks for your help

[Paulie_D]

As I can see it at the moment you have a top menu “Home/Destination etc” and a second ‘Trending’ menu below that which does not appear, at the moment, to be in anyway dependant on the top menu.

Is this the case?

If so, I see that the ‘top’ menu becomes vertical (and left aligned) at smaller viewport sizes. Why not make the ‘Trending’ menu do the same but on the right hand side?

[chrisjb]

That could work well on the home page. However on other pages of the site the second list will be related to the top list. The top level category links will appear on every page and there will be a second level category links list below and they will have some indication of which top level category the sub menu belongs to.

It’s a difficult one. I’ve never seen any sites that do this. Lots of news website have two navigation lists. For examples:

http://www.guardian.co.uk/
http://www.telegraph.co.uk/

But I can’t find any responsive examples. Since implementing Fleximenu I’m not so keen on it.

2 level responsive nav lists with sub categories is uncharted territory for me (and most people I guess).

I’m starting to think the vogue.co.uk horizontal scroll technique might work best. One of the main problems with Flexi Menu is if the sub categories being displayed belong to a a top menu item category that is in the drop down it becomes confusing. So this is very difficult.

I think a horizontal scroll carousel (with side swiping on mobiles) might be the best approach but I’m not too sure.

Thanks for your help,

Chris

[Author]

Posts