A Responsive Menu jQuery Plugin

Menu Toggle

With the exception of the Select mode, each menu mode is initially hidden and is toggled via a menu control element. This element can be either text or an icon (the default text is ‘MENU’). Use the nav_toggle_text option to change the element’s text:

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

The menu toggle has the default class of gp-responsive-nav-toggle. The class can be changed using the nav_toggle_class option:

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

The navigation toggle container has a default class of gp-responsive-toggle-wrapper. It can be changed using the nav_toggle_wrapper_class option.

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

If you set this option to an empty string, the navigation toggle will not have a wrapper.

With wrapper:

<div class=”nav-container”>
	<div class=”gp-responsive-toggle-wrapper”>
		<a class=”gp-responsive-nav-toggle” />
	</div>
</div>

Without:

<div class=”nav-container”>
	<a class=”gp-responsive-nav-toggle” />
</div>

You can use either the navigation toggle wrapper or or the toggle class to style the controller:

.gp-responsive-toggle-wrapper a {
 
} 
 
/* or */
 
a. gp-responsive-nav-toggle {
 
}

Menu Toggle Option

show_nav_toggle_caret: When using the nav_toggle_text option, a toggle caret will be displayed by default. The toggle caret is an upside-down triangle that is displayed to the right of the text (see css triangle). If you do not want to display the caret, set the value to false:

?View Code JAVASCRIPT
show_nav_toggle_caret: false

When set to true, the toggle caret will be appended to the end of the toggle button and will have a class of gp-toggle-caret.

.gp-toggle-caret {
	float:right;
	display:block;
	content: ' ';
	width: 0; 
	height: 0; 
	margin-top: 10px;
	margin-left: 6px;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-top: 6px solid #fff;
}

The plugin has a general active_class option that can be used for multiple purposes. When the nav_toggle_text button is clicked (and the navigation is displayed), the active_class is added to the button:

<a class="gp-responsive-nav-toggle active">
    jQuery Plugins
    <b class="gp-toggle-caret"></b>
</a>

You can use the active_class to style the toggle button differently when the navigation is displayed:

.gp-toggle-caret {
	float:right;
	display:block;
	content: ' ';
	width: 0; 
	height: 0;
	margin: 10px 25px 0 6px; 
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-top: 6px solid #6D9FC3;
	border-bottom: none;
}
 
.active .gp-toggle-caret {
	border-top: none;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-bottom: 6px solid #6D9FC3;
}

Icon Toggle

If you would rather use an icon to toggle the menu display, use the nav_toggle_icon_class option.

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

I created 25 menu icons to be used with the plugin (the same icon, but different colors), but you can use any image. The icons provided have the same prefix ‘gp-responsive-icon-‘. The suffix are ‘a’ through ‘y’ – each letter is a different color. The image below displays the provided icons – the letters are ordered vertically (gp-responsive-icon-a: column 1, row 1; gp-responsive-icon-b: column 1, row 2, gp-responsive-icon-f: column 2, row 1, etc.).

gp-responsive-menu-icon

Be Sociable, Share!

Checkout My New Site - T-shirts For Geeks