A Responsive Menu jQuery Plugin

Positioning the Navigation Toggle Button and Navigation

By default, the navigation toggle button will be placed in the same parent container as the navigation (the nav_parent option). You can change where the parent will be placed using the nav_toggle_parent option:

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

Also by default, the navigation toggle button (or wrapper) will be placed as the first element of the parent. Conversely, the navigation menu will be placed as the last element of the parent. Both can be changed:

?View Code JAVASCRIPT
$('#nav').gpResponsiveMenu({
	nav_parent: '.nav-container',
        nav_toggle_icon_class: 'gp-responsive-menu-icon gp-responsive-icon-y',
        nav_toggle_parent: '#header',
        nav_toggle_position: 'last', // the default is 'first'
        nav_position: 'first', // the default is 'last'
	media_query_modes: [{"min": "480", "max": "767", "mode": "Vertical"}, {"max": "479", "mode": "Select"}]
});

Overriding Options

The following options can be overriden:

nav_parent
nav_position
nav_toggle_parent
nav_toggle_position

For instance, you may want the nav_parent to be displayed in a different parent when in Vertical mode than when in VerticalOverlay mode. Just add the option to the json object for the specific media query mode. The following is what I use for GrasshopperPebbles:

?View Code JAVASCRIPT
$('#secondary').gpResponsiveMenu({
	nav_parent: '#primary',
	nav_toggle_icon_class: 'gp-responsive-menu-icon gp-responsive-icon-y',
	media_query_modes: [{"min": "719", "max": "1110", "mode": "InlineOverlay", "nav_position": "first"},
			    {"min": "480", "max": "718", "mode": "PageOverlay", "nav_parent": "#top_bar"},
			    {"max": "479", "mode": "VerticalOverlay", "nav_parent": "#top_bar"}]
});

In mode InlineOverlay, I want the nav_parent to be the first element in the container. For PageOverlay and VerticalOverlay, I want the nav_parent to appear in the #top_bar container.

Note: I know that allowing for all of these options can be confusing, but I found that when styling the menu options, I needed this flexibility – the plugin only places the elements where you want, the real power is in the styling.

Be Sociable, Share!

Checkout My New Site - T-shirts For Geeks