GrassHopperPebbles.com Demos

JQuery Plugins

gpResponsiveMenu 0.5 - InlineOverlay Mode

The following example displays the gpResponsiveMenu plugin using InlineOverlay mode. InlineOverlay mode is primarily used to change side navigation to top navigation. To view this mode, adjust your browser so that the menu is less than or equal to 768px.

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 do not want the navigation caret to display, so I set the show_nav_caret option to false

$(document).ready(function(){
	$('#nav').gpResponsiveMenu({
		nav_parent: '#primary',
		nav_position: 'first',
		show_nav_caret: false,
		menu_structure: {"menu_tag": 'self', "menu_caption_tag": "LI", "menu_item_parent_tag": "UL", "menu_item_tag": 'LI'},
		media_query_modes: [ {"max": "768", "mode": "InlineOverlay"}]
	});
});	

CSS

@media only screen and (max-width: 768px) {
	.gp-responsive-nav-cntnr {
		float:left; 
	}
	.gp-responsive-nav-cntnr ul { 
		float:left; 
		margin:0; 
		margin-left:5px;
	}
	.gp-responsive-nav-cntnr li { 
		list-style:none; 
		float:left; 
		padding: 10px 12px; 
		display:block; 
		text-align:left; 
		position:relative;
	}
	.gp-responsive-nav-cntnr li a { 
		float:left; 
		font-family: Arial,Helvetica,sans-serif; 
		font-weight:bold; 
		text-decoration:none; 
		font-size:12px; 
		color: #0065C9;
		text-transform:uppercase;
	}
	.gp-responsive-nav-cntnr li > ul {
		position: absolute; 
		left:10px; 
		width:10em; 
		top:28px; 
		background-color:#6D9FC3; 
		z-index: 999; 
		display:none;
	}
	.gp-responsive-nav-cntnr li ul li ul {
		left: 120px; 
		top:0px;
	}
	.gp-responsive-nav-cntnr ul li ul li {
		display:block; 
		width:100%; 
		float:left;
	}	
	.gp-responsive-nav-cntnr ul li ul li a {
		color:#FFFFFF; 
	}
	.gp-responsive-nav-cntnr li ul.active-ul {
		display:block;
	}
}		

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

Tags

,