Horizontal Mobile-Friendly Multi-level Menu
Springtime Mobile Template which uses this menu
If you are using any of the mobile-friendly templates offered on this site, and would like a multi-level mobile friendly menu, this is for you.
Ian Haynes has taken an old favorite of mine, PVII Menu CSS Express Drop-Down Menu by Project Seven Development, and converted it to be responsive. You can read his article and find all of the files necessary for the Experimental responsive multi-level menu on his site.
If you would like to use this menu which offers a one level dropdown with any of the mobile friendly templates, here are some tips to remember.
Cheryl Wise offers a detailed tutorial on Using Project Seven CSS Express Menus in Expression Web on her site.
You will need the following files for your menu to work:
- p7exp-resp.css the style sheet for the menu
- accordion.css the style sheet for the mobile version of the menu
- respond.min.js Respond.js is a polyfill for CSS min-width and max-width media queries. It is extremely lightweight (3kb minified / 1kb gzipped) and that ensures that the script is downloaded and ran as quickly as possible. Read more.
- The menu iteslf - shown here as an include file
Working with the menu
My recommendation would be to insert the menu using an include page so that it is easier to edit. If you have inserted your menu directly into a page/DWT, you will need to work in 'Code View' to edit the menu.