A Responsive Menu jQuery Plugin

Query Mode Details

Select Mode

Use this mode to display a drop-down menu. Other responsive menu plugins use this as the only option. While I do not advise this, you can do the same:

?View Code JAVASCRIPT
$('#nav').gpResponsiveMenu({
	nav_parent: '.nav-container',
	media_query_modes: [ {"max": "479", "mode": "Select"}]
});

The default option for the drop-down can be controlled using the menu_select_text option. The default text is MENU.

?View Code JAVASCRIPT
$('#nav').gpResponsiveMenu({
	nav_parent: '.nav-container',
        menu_select_text: 'Go To',
	media_query_modes: [ {"max": "479", "mode": "Select"}]
});

Vertical Mode

?View Code JAVASCRIPT
$('#nav').gpResponsiveMenu({
	nav_parent: '.nav-container',
	media_query_modes: [{"min": "480", "max": "767", "mode": "Vertical"}]
});

In the Vertical mode, each menu items are displayed vertically. When the navigation toggle button is clicked, the navigation container (nav_cntnr_class) will expand vertically and all content below will move down to accommodate the menu display. The sub-menus are initially hidden and can be displayed when the parent item is clicked (See demo).

The options for Vertical Mode are:

parent_menu_prefix: This is used when a parent menu item has children, but also has a url associated with it. The plugin will add an additional menu item using the parent_menu_prefix option and the name of the menu item. For instance, on DevoutGeek.com, I have a parent menu item named ‘Apparel’. Apparel has sub-menu items, but also has a url (DevoutGeek.com/apparel.html). The plugin will add the prefix and name as a child of the parent. The default value is ‘All’.

Apparel
All Apparel ( parent with prefix)
T-shirts

show_nav_caret: This is the same as the show_nav_toggle_caret option. When this option is set to true (default), a caret will be displayed next to any menu item that has children. The caret class is gp-nav-caret.

active_class: As with the nav_toggle_text option, when the menu item is clicked (and the children are displayed), the active_class is added to the menu item. You can use this to style the active caret (or menu item).

Styling Vertical Menu

Styling any of the menus can be done using media queries or in the main style section. If you plan to use multiple query modes with the plugin, be careful when styling in the main style section. There will be styles that can be used in any query mode, but there will be times when a style in the main style section that will act upon your menu.

These are the styles that I used for Vertical Mode on DevoutGeek.com.

.gp-responsive-nav-cntnr {
	display:none; 
	width:100%;
}
a.gp-responsive-nav-toggle { 
	cursor:pointer; 
	display:block;
	float:right;
	color:#FFFFFF; 
	font-family: Arial,Helvetica,sans-serif; 
	font-weight:bold;
	background-color:#6D9FC3;
	border: solid thin #003366;
	padding: 10px; 
	margin-right: 30px;
	margin-top: 15px;  
}
 
.gp-toggle-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-toggle-caret {
	border-top: none;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-bottom: 6px solid #6D9FC3;
}
 
// Vertical Mode only
@media only screen and (min-width: 480px) and (max-width: 767px) {
       .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 #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;
	}
}

VerticalOverlay Mode

?View Code JAVASCRIPT
$('#secondary').gpResponsiveMenu({
	nav_parent: '#primary',
	nav_toggle_icon_class: 'gp-responsive-menu-icon gp-responsive-icon-a',
	media_query_modes: [{"max": "479", "mode": "VerticalOverlay", "nav_parent": "#top_bar" }]
});

The VerticalOverlay mode is similar to the Vertical mode. The only difference is that the menu is displayed above the content. To view an example of the VerticalOverlay mode, adjust your browser so that the width is less than 718 pixels (but greater than 480 pixels). VerticalOverlay mode should probably only be used with a minimal amount of menu items.

Styling VerticalOverlay Mode

The styling for VerticalOverlay mode is similar to Vertical mode.

.gp-responsive-toggle-wrapper { 
	display:block;
	float:right;
	margin-right: 40px;
	margin-top: 10px; 
}
 
@media only screen and (max-width: 479px) {
	.gp-responsive-nav-cntnr {
		float:right; 
		display:none;  
		width:300px; 
		margin: 3px 50px 0 0; 
		position: relative; 
		z-index: 999; 
		border: solid thin #000; 
		background-color: #6D9FC3;
	}
	.gp-responsive-nav-cntnr ul {
		float: right; 
		margin-left: 0; 
		width:100%; 
		margin-bottom:0;
	}
	.gp-responsive-nav-cntnr li { 
		float:left; 
		display:block; 
		border-bottom: solid thin #FFFFFF; 
		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 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;
	}
}
Be Sociable, Share!

Checkout My New Site - T-shirts For Geeks