Help finding/creating responsive multi level menu

[nickels]

I am trying to create a menu system like the one on the following page:
http://www.currys.co.uk/gbuk/index.html
(Hope this is not against the rules, but their menu is perfect)

Collapse the browser window to view the responsive mobile menu. Scroll down on the page until you see the “Browse Products” menu. I love how each sub level is off-screen and scrolls in from the right when you click on a menu item. This is exactly what I am trying to accomplish – a multilevel menu system where you click to reveal the sub-level items. I can’t find any tutorials or code for this technique anywhere.

Any help is appreciated!

[Paulie_D]

So which part is it that you don’t get…the dropdown part of the responsive part?

[nickels]

I don’t understand how they made the menu where the submenus are hidden until you click on a menu option, and then a secondary submenu comes in from the right. I’l like to take it a step farther and have another submenu list.

EX:
Menu 1

---

Option A
Option B
Option C

Click on B – submenu flies in from the left or simeply becomes visible without animation. Don’t care.

Option B

---

Secondary list item B1
Secondary list item B2
Secondary list item B3

Click on “Secondary list item B2” and a thrid submenu slides in or overlays the last menu.

Secondary list item B2

---

Third and final level option 1
Third and final level option 2
Third and final level option 3
Third and final level option 4
Third and final level option 5…

With each level you are presented with a way to get back to the previous level menu. This is for a very large and complicated responsive menu system when you are on a mobile device.

[Paulie_D]

There is nothing particularly hard in there as far as I can tell.

At mobile size, the horizontal menu becomes a vertical menu which uses, positioning and `display:none` (would be my best guess) and it’s all animated via Javascript.

Sub-menus aren’t actually ‘overlaying’ the top level items (from what I recall), the top level list items are moving further down to accommodate the extra level…again via JS.

Don’t get me wrong, I have no doubts that it’s all driven by a massive database but the basic issues have to comply with the HTML & CSS & JS we all have access to.

Would I try and build it? Heck no….but then it might be an interesting project…if I had a client willing to pay for my time.

[Author]

Posts