Experimental responsive multi-level menu

Creating a single level responsive menu is fairly easy but a multi-level menu is more challenging.

A common mobile menu pattern is to convert a menu from an un-ordered list to a select box. Whilst not the best, it does lend itself to multi-level menus as this experimental version shows.

It started out with an example on CSS Tricks although the JavaScript they used was incomplete and didn't create the links correctly. I've fixed this and combined it with the popular Project 7 Express menu to create a working demonstration.

Resize your browser to see it in action. It's been tested on Windows Phone 7, Android and iOS and also works cross browser from IE6 upwards.

Test on a mobile device.

QR

Feel free to download the code and experiment yourself.

 

PS: I've used blank optgroups in the select menu to give some spacing. These can easily be removed.

Second Approach

Having experimented with converting the P7 Express menu into a select list, this does have the disadvantage of being non-intuitive for users. A better approach I've tried is converting the menu into a jQuery accordion.

 See this second example