GrassHopperPebbles.com Demos

JQuery Plugins

gpResponsiveMenu 0.5 - Secondary Navigation

The following example displays the gpResponsiveMenu plugin using both primary and secondary navigation.

Use the secondary_nav option to set the secondary navigation.

In this demo, the primary navigation is using Vertical mode, and the secondary navigation is using Select mode.

To view this mode, adjust your browser so that the menu is less than or equal to 768px.

$(document).ready(function(){
	$('#nav').gpResponsiveMenu({
		nav_parent: '#primary',
		nav_toggle_parent: '#demo_top_bar',
		nav_toggle_icon_class: 'gp-responsive-menu-icon gp-responsive-icon-y',
		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": "768", "mode": "Vertical"}],
		secondary_nav: { menu_container: '#gs-top-nav', nav_parent: '#gs-widget-tabs-cntnr', menu_select_text: 'Plugins/Widgets', media_query_modes: [ {"max": "768", "mode": "Select"}]}
	});
});	

CSS

.gp-responsive-nav-cntnr {
	display:none; 
	width:100%;
}
.gp-responsive-toggle-wrapper { 
	display:block;
	float:right;
	margin-right: 40px;
	margin-top: 10px; 
}

@media only screen and (max-width: 768px) {
	.gp-responsive-select {
		float:right;
		margin-right: 10px;
		margin-top: 10px;
	}
	#gs-top-nav-cntnr {
		display:none;
	}
    .gp-responsive-nav-cntnr li { 
		float:left; 
		padding: 10px 12px; 
		display:block; 
		border-bottom: solid thin #6D9FC3; 
		width:100%; 
		text-align:left;}
	.gp-responsive-nav-cntnr li a { 
		color:#6D9FC3; 
		font-family: Arial,Helvetica,sans-serif; 
		font-weight:bold; 
		text-decoration:none; 
		font-size:12px; 
		text-transform:uppercase;}
	.gp-responsive-nav-cntnr li > ul {
		display:none;
	}
	
	.gp-responsive-nav-cntnr li > ul li {
		border:none;
	}
	.gp-nav-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-nav-caret {
		border-top: none;
		border-left: 6px solid transparent;
		border-right: 6px solid transparent;
		border-bottom: 6px solid #6D9FC3;
	}

}		

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

Tags

,