A Responsive Menu jQuery Plugin

While doing the final testing of DevoutGeek.com, I found that I did not like the way the main menu displayed on smaller devices (Ipads, phones, etc). I took a good bit of time implementing a responsive design on DevoutGeek.com, but the main menu did not flow to my liking. So I decided to create a jQuery plugin. I have seen other responsive menu plugins, but most implement a single strategy (i.e, change the menu into a drop-down select). The plugin that I created, gpResponsiveMenu, has 6 options that are implemented based upon media queries. The plugin can be used with both primary and secondary navigation (simultaneously).

Instantiating the gpResponsiveMenu Plugin

There are 3 main requirements to use the plugin

?View Code JAVASCRIPT
$('#nav').gpResponsiveMenu({
	nav_parent: '.nav-container',
	media_query_modes: [{"min": "480", "max": "767", "mode": "Vertical"}, {"max": "479", "mode": "Select"}]
});
  1. The #nav element is the id (or class) of the existing navigation. It is used to hide the existing menu.
  2. nav_parent: This tells the plugin where you want to place the new menu.
  3. media_query_modes: The menu modes are json records that control which menu is displayed. More on this below.

You can optionally set the class of the container of your new menu using the nav_cntnr_class option. The default for the nav_cntnr_class is: gp-responsive-nav-cntnr.

?View Code JAVASCRIPT
$('#nav').gpResponsiveMenu({
	nav_parent: '.nav-container',
        nav_cntnr_class: 'my-menu', //default: gp-responsive-nav-cntnr
	media_query_modes: [{"min": "480", "max": "767", "mode": "Vertical"}, {"max": "479", "mode": "Select"}]
});

Media Query Modes

The gpResponsiveMenu has 6 menu options (media query modes):
Select
SplitView
Vertical
VerticalOverlay
InlineOverlay
PageOverlay

A website can use multiple query modes. For instance, on DevoutGeek.com (link), I display a Vertical menu for screen widths 480px to 767px (small tablets) and a Select menu for screen widths less than or equal to 479px (phones):

?View Code JAVASCRIPT
$('#nav').gpResponsiveMenu({
	nav_parent: '.nav-container',
	media_query_modes: [{"min": "480", "max": "767", "mode": "Vertical"}, {"max": "479", "mode": "Select"}]
});

The media_query_modes has 3 primary options:

mode: The menu display option.
min: The minimum screen width (greater than or equal to).
max: The maximum screen width (less than or equal to). If you want a mode to display at all widths less than a specific amount, then the ‘min’ option is not needed.

?View Code JAVASCRIPT
{"max": "479", "mode": "Select"}

Note: The plugin is immediately responsive to the change in screen widths (i.e., When a tablet is changed from portrait to landscape, if you have an option for the larger width, the menu will change to that query mode. If you do not have a query mode for the larger width, your original menu will display).

Be Sociable, Share!

Checkout My New Site - T-shirts For Geeks