GrassHopperPebbles.com Demos

JQuery Plugins

gpResponsiveMenu 0.5 - SplitView Mode

The following example displays the gpResponsiveMenu plugin using SplitView mode. If you adjust your browser so that the menu is less than or equal to 768px, a menu control button will display.

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

I set the nav_toggle_icon_class to gp-responsive-icon-y so that menu controller will display a light blue menu icon rather than text.

The layout for the demo page does not have a wrapper for all content, so I set the page_wrapper option to body.

$(document).ready(function(){
	$('#nav').gpResponsiveMenu({
		nav_parent: '#demo_top_bar',
		nav_toggle_icon_class: 'gp-responsive-menu-icon gp-responsive-icon-y',
		page_wrapper: 'body',
		show_close_btn: true,
		menu_structure: {"menu_tag": 'self', "menu_caption_tag": "LI", "menu_item_parent_tag": "UL", "menu_item_tag": 'LI'},
		media_query_modes: [ {"max": "768", "mode": "SplitView"}]
	});
});	

CSS

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

@media only screen and (max-width: 768px) {
	body.active {
		background-color:#35373B;
	}
	body.active .gp-responsive-page-wrapper:before {
		content: " ";
		position: absolute;
		z-index: -1;
		top: 0;
		left: -100%;
		width: 100%;
		height: 100%;	
		background-color: #35373B;
	}
	body.active a.gp-responsive-nav-close:after {
		display:block;
		color:#FF6600;
		content: "x";
		float:right;
		font-size: 1.2em;
		font-weight:bold;
		margin-right:8px;
		cursor:pointer;
	}
	body.active .gp-responsive-nav-cntnr { 
		margin-left: 0; 
		float:left; 
		background-color: #35373B; 
		width:30%; 
	}
	body.active .gp-responsive-page-wrapper { 
		max-width: 100%; 
		margin: 0px auto; 
		overflow: hidden; 
		width: 100%; 
		position: relative;
	}  
	.gp-responsive-nav-cntnr li { 
		float:left; 
		padding: 10px 12px; 
		display:block; 
		border-bottom: solid thin #FFFFFF; 
		width:100%; 
		text-align:left;}
	.gp-responsive-nav-cntnr li a { 
		color:#FFFFFF; 
		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 #FFFFFF;
		border-bottom:none;
	}
	.active .gp-nav-caret {
		border-top: none;
		border-left: 6px solid transparent;
		border-right: 6px solid transparent;
		border-bottom: 6px solid #FFFFFF;
	}
}		

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

Tags

,