Mobile Navigation 7.x-1.x documentation

Mobile Navigation helps us easily implement a nice solution for displaying menus on the mobile version of a responsive website.
I have found many ways of doing this out there, but they are not precisely the best solution regarding performance or they need the work of implementing a third party JQuery plugin or having to learn javascript and programming the whole thing.
With this module you may only need to install the module as usual and then out of the box have all that is needed to implement a mobile version for menus, featuring some simple configurations that will let you personalize the behavior of this mobile versions.

Currently Mobile Navigation only gets along with menus that uses tag < ul > for the menu and < li > for menu items.
Mobile Navigation module uses some Javascript to clone the current menu of your website and creates a version of it with a diferent behavior adapted to mobile

Mobile Navigation Settings page

is located at /admin/config/user-interface/mobile_navigation

At the Mobile Navigation configuration page you can administer Mobile Navigation settings.
You must set two parameters for the transformation to take place:

• A Media Query for the breakpoint. this media query must reflect the range in which you don't want the mobile version to show up, that is the not Mobile Range of your website. The reason for this is that Media Queries are pretty complex stuff and usually responsive themes don't have mobile media query, they have media queries for the NOT MOBILE displays, so you can easily copy this media query from your preferred theme configuration, being Omega, Adaptative, any responsive theme.)
• The other parameter that must be defined is the Menu Element Selector. By default this value is "#main-menu-links". That's the selector for the menu the Bartik theme has by default(Bartik is the default Drupal 7 theme).
  When using other menu configurations or modules(Superfish, Megamenu, any module you like or the Drupal main menu), you'll have to check for the corret selector, that might be #supefish-1, #megamenu-menu, #navigation .menu, etc.

There is also a Main content selector textbox. This is a selector for the content, only needed for the Drawer effect to function properly, since then Drawer effect is selected, the module needs to change some properties on the content container.

Additionaly there is the Mobile navigation behaviors configuration:

• Select a plugin for the menu. Currently suported plugins:
  Basic: Simply slide showing the menu, without any special behavior on its contents.
  Acordion: Show menu and its submenus in a organized acordion structure. (Applies only when the menu includes submenus.
  Slide to the left: Submenus slide from right to left when clicking in an arrow of a parent item. This plugin garantizes keeping the size of the menu at the minimum posible.
• For the acordion plugin, you can set persistance of opened items so you can have many submenus opened, or you may permit only current active trail to be oppened, so when you open a submenu, any other opened submenu will automaticaly close.
• There is the Menu Effect option to select the way the menu shows up, the location and the direction.
  • Expand Down: Show the menu right under the menu button.
  • Top Fixed: Menu shows up over the document, comming from the top.
  • Left Fixed: Menu shows up over the document, comming from the left.
  • Right Fixed: Menu shows up over the document, comming from the right.
  • Bottom Fixed: Menu shows up over the document, comming from the bottom.
  • Left Drawer: Menu shows up pushing the document, comming from the left.
  • Right Drawer: Menu shows up pushing the document, comming from the right.
  • Top Drawer: Menu shows up pushing down the document, comming from the top.
• Then there is an option to set the Menu width. This must be a number between 0 and 100 to set the percentage. The menu is flexible and will be set to that percentage of the window width. (Don't include the '%' sign)
• There is the option to have a tab handler attached to the menu.
• Also a Mask can be set to show up over the content area when the menu is opened. That mask is clickable so if you click over content the menu will get closed.
• Finnaly there is an option to add special classes to menu items, according to their position and level. (For instance: Item-1, Item-2-1, Item-3-1-1, etc.)

DEMO SITE

This site has a form to modify the Mobile Navigation settings to
test the many features of the Module. http://mndemo.geekfinger.com.

Websites using this module

Rootstack - http://www.rootstack.com/

Liceo Chapero - http://liceochapero.edu.gt/

hungersolutionsny.org

http://www.keerim.co.uk

http://www.phc.ie

http://www.nissan.com.pa/

Similar Modules

https://drupal.org/project/responsive_menus
Responsive menus:
A responsive menus module similar to Mobile Navigation. Implements alternative JS solutions to implement mobile menus.

Responsive Navigation:
integrates the responsive-nav.js plugin into Drupal.

Todo

New features on the way.

• More plugins.
• Multiple menus with different configurations. (Planned for the version 2.x)

Sponsors

The Mobile Navigation module is sponsored by MAGA Systems & Consulting.

Hope you find it usefull.
Enjoy!