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.

Files Needed

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.
  • p7exp.js the Project vii javascript file
  • 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.

Screenshot Menu in Design View

Screenshot Menu in Code View

Screenshot Menu as an Include Design View