Example menu using simple style
Example using codrops' Multi
Example using Mean Menu
Example using Sidr
Example using Google Nexus
Responsive Menus admin form

Overview

Responsify your menus! Just give me a CSS/jQuery style selector of your menu and I will make it mobile friendly (when the time is right).

Technically you could set this to affect any element on the page... e.g. collapse a sidebar or content area at a certain screen width.
(Using certain styles).

Features

  • Choose from different responsive menu styles.
  • Configure any amount of menus to be responsified (certain styles have limitations).
  • Configure at which screen width they should be handled.
  • Include / exclude admin pages. (more options with Context)
  • Disable other mouse events.
  • Remove other classes/IDs.
  • Context module integration.
  • Easily theme-able.

Responsive Menu styles:

Screenshots in same order as this list:

  1. 'Simple', a lightweight style.
  2. codrops' Responsive Multi-Level Menu*
  3. MeanMenu
  4. Sidr*
  5. codrops' Google Nexus*
  6. Next? Open a feature request ticket if you find a style that belongs here.

Items marked with '*' require Libraries 2.x unless you use hook_responsive_menus_styles_alter() to include your own path to files. More details in README.txt

Other styles I would like to add in the future based on interest:
FlexNav
SlimMenu
Flip Menu
Slick Nav
Radial Responsive - This one is interesting, but is it responsive?

Similar Projects

Responsive Navigation
Mobile Navigation

Compatibility

Should work in all major browsers and IE 9+
Varies between styles - usually for the better (meaning some work in IE 8 or older versions).

Requirements

None.
Optionally integrates with Context, Libraries 2.x, & jQuery Update modules.

Try the demo

Test any of the styles here

Good to know

Note about codrops' Multi style:
Will only be applied on page load, so it must meet the width requirement at that time (no browser-dragging to test).

Must clear caches after downloading a library (style plugin)
This is just a requirement of the libraries module.

See responsive_menus.api.php in the module folder for hooks & examples of integrating your own library, loading existing ones differently, or removing requirements of a library.

Interested in helping out? See: #2257371: [meta] ROADMAP / Next release items

Project Information

Downloads