A Responsive Menu jQuery Plugin

InlineOverlay Mode

?View Code JAVASCRIPT
$('#secondary').gpResponsiveMenu({
	nav_parent: '#primary',
	media_query_modes: [{“min”:719", max": "1110", "mode": "InlineOverlay", “nav_position”: “first”}]
});

The InlineOverlay mode is used to change side navigation. WordPress, and many other blogging platforms, display the main menu items on the left or right sidebar instead of at the top of the page. When in InlineOverlay mode, the gpResponsiveMenu plugin will change this side navigation to top navigation. This mode looks best when there are only few menu groups or categories (4-5 top-level menu items). On GrasshopperPebbles, I use InlineOverlay mode for widths from 719px to 1110px, so if you adjust your browser width, you should see the InlineOverlay display.

Styling InlineOverlay Mode

@media only screen and (min-width: 719px) and (max-width: 1110px) {
	.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;
	}
}

PageOverlay Mode

?View Code JAVASCRIPT
$('#secondary').gpResponsiveMenu({
	nav_parent: '.nav-container',
	nav_toggle_icon_class: 'gp-responsive-menu-icon gp-responsive-icon-a',
	media_query_modes: [{“min”:768", max": "1110", "mode": "PageOverlay"}]
});

Although the PageOverlay mode can be used with top navigation, I created it as an alternative to InlineOverlay (changes side navigation top navigation). In this mode, the menu items are displayed in a block and sub-menu items are not hidden. This mode looks best when there are only few menu groups or categories (4-5 top-level menu items).

Styling PageOverlay Mode

.gp-responsive-toggle-wrapper { 
	display:block;
	float:right;
	margin-right: 40px;
	margin-top: 10px; 
}
 
@media only screen and (min-width: 480px) and (max-width: 718px) {
	.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.

Be Sociable, Share!

Checkout My New Site - T-shirts For Geeks