Responsive Navigation and Menus

This two-hour webinar will focus on the fundamentals of handing menus and navigation structures in responsive design. A common issue when creating a responsive design is taking a navigation element that is presented horizontally on desktop browsers and presenting it to the user in a pleasing and useful way on smaller screens. This workshop will demonstrate 3 methods for handling navigation in responsive design.

##Popular Options

• Do (almost) nothing - modify menu font size, padding, and wrapping
• Stack menu items
• Hide main menu in mobile, link to footer menu
• Convert main menu into select list
• Convert main menu into toggle
• Convert main menu to grid
• Convert main menu to flyout

##Convert Main Menu Into Select List Using the TinyNav.js jQuery Plugin

• jQuery Plugin: http://tinynav.viljamis.com/
• Corresponding Drupal module: https://drupal.org/project/tinynav
• Demo: tinynav_demo

##Convert Single-Level Main Menu Into Toggle Using the Responsive Nav jQuery Plugin

• jQuery Plugin: http://responsive-nav.com/
• Corresponding Drupal module: https://drupal.org/project/responsive_navigation
• Blog post on using the Drupal module: http://www.webomelette.com/responsive-navigation-cool-drupal-module

Convert Multiple-Level Menu Into Toggle Using the FlexNav jQuery Plugin

• http://jasonweaver.name/lab/flexiblenavigation/
• No Drupal module (yet)

Steps to implement flexnav_demo:

1. Link to FlexNav CSS and JS.
2. Set breakpoint at 800px to match FlexNav default.
3. Added "menu-button" div and custom attributes for menu ul.
4. Added 2nd level of menu hierarchy.
5. FlexNav will handle all responsive modes, so most of the CSS from the previous examples is no longer necessary.
6. Add our custom menu theming tweaks.

NEFLIN Example

Take an existing site, and replace its navigation with one that is responsive (using FlexNav).

1. Rebuild the menu's HTML structure. This was necessary in order to match the HTML structure that FlexNav requires.
2. Link to FlexNav CSS and JS.
3. Added "menu-button" div and custom attributes for menu ul.
4. Comment out all of the current CSS that manages the navigation menu.
5. Add CSS "resets" to menu HTML, if necessary.
6. Retheme the menu structure using FlexNav as starting point.

Additional Resources

• This is Responsive - great resource for responsive design patterns (examples), resources, and news.
• http://responsivenavigation.net/ - lots of good examples
• http://vandelaydesign.com/blog/design/responsive-navigation/ - additional examples
• http://www.hongkiat.com/blog/responsive-web-nav/ - step-by-step example of doing it yourself (without the use of a 3rd party plug-in)