GrassHopperPebbles.com Demos

JQuery Plugins

gpResponsiveMenu 0.5 - PageOverlay Mode

The following example displays the gpResponsiveMenu plugin using PageOverlay 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.

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

CSS

.gp-responsive-toggle-wrapper { 
	display:block;
	float:right;
	margin-right: 40px;
	margin-top: 10px; 
}

@media only screen and (max-width: 768px) {
	.gp-responsive-nav-cntnr {
		float:right; 
		display:none;  
		width:100%; 
		position: relative; 
		z-index: 999; 
		border: solid thin #000; 
		background-color: #6D9FC3;
	}
	.gp-responsive-nav-cntnr ul {
		float: left; 
		width:200px; 
		margin-bottom:0;
	}
	.gp-responsive-nav-cntnr li { 
		float:left; 
		display:block; 
		width:100%; 
		text-align:left;
	}
	.gp-responsive-nav-cntnr li a {
		display:block;  
		padding: 5px 8px; 
		color:#FFFFFF; 
		float:none; 
		font-family: Arial,Helvetica,sans-serif; 
		font-weight:bold; 
		text-decoration:none; 
		font-size:12px; 
		text-transform:uppercase;
	}
	.gp-responsive-nav-cntnr ul li ul {
		margin-left:12px;
	}
	.gp-responsive-nav-cntnr li a.gp-category-title {
		font-size: 14px; 
		color:#000000;
	}
}		

The menu parents have an additional style: gp-category-title. This can be used to style the parents separately.

 

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

Tags

,