GrassHopperPebbles.com Demos

JQuery Plugins

gpResponsiveMenu 0.5 - Select Mode

The following example displays the gpResponsiveMenu plugin using Select mode. If you adjust your browser so that the menu is less than 768px, the side menu will be displayed in a drop-down.

I'm also using the optional menu_structure option because the sidebar menu does not use a standard navigation structure.

I set the nav_position to first so that it would display at the top of the container.

I also set the menu_select_text to jQuery Plugins - the default is MENU

$(document).ready(function(){
	$('#nav').gpResponsiveMenu({
		nav_parent: '#primary',
		menu_select_text: 'jQuery Plugins',
		nav_position: 'first',
		menu_structure: {"menu_tag": 'self', "menu_caption_tag": "LI", "menu_item_parent_tag": "UL", "menu_item_tag": 'LI'},
		media_query_modes: [ {"max": "767", "mode": "Select"}]
	});
});	

For documentation about the gpResponsiveMenu plugin, view the blog post.

Tags

,