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:
- Link to FlexNav CSS and JS.
- Set breakpoint at 800px to match FlexNav default.
- Added "menu-button" div and custom attributes for menu ul.
- Added 2nd level of menu hierarchy.
- FlexNav will handle all responsive modes, so most of the CSS from the previous examples is no longer necessary.
- Add our custom menu theming tweaks.
NEFLIN Example
Take an existing site, and replace its navigation with one that is responsive (using FlexNav).
- Rebuild the menu's HTML structure. This was necessary in order to match the HTML structure that FlexNav requires.
- Link to FlexNav CSS and JS.
- Added "menu-button" div and custom attributes for menu ul.
- Comment out all of the current CSS that manages the navigation menu.
- Add CSS "resets" to menu HTML, if necessary.
- 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)