A Responsive Menu jQuery Plugin

SplitView Mode

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

In the SplitView mode, the page is split – the menu displays on the left, and the content is displayed on the right. This is similar to a Facebook menu implementation on the Ipad.

Note: Again, the menu will be displayed when the menu control button is clicked.

The options used with the SplitView mode are:

page_wrapper: Setting this option tells the plugin that you web page is wrapped in this container (the default is ‘.wrapper’). This option is mandatory when using the SplitView Mode, without it, the plugin doesn’t know how to split the page. So let’s say that your web page is structured like this:

<body>
    <div class=”wrapper”>
	<header>
        <content>
        <footer>
    </div>
</body>

When in SplitView Mode, your page will now be structured like this:

<body>
   <div class=”gp-responsive-nav-cntnr”>
	menu
   </div>
   <div class=”wrapper”>
	<header>
        <content>
        <footer>
   </div>
</body>

If you do not have a page wrapper, then set the page_wrapper option to body.

When doing so, the plugin will wrap the body content in a class named: gp-responsive-page-wrapper.

So this:

<body>
     <header>
     <content>
     <footer>
</body>

Will be changed to:

<body>
   <div class=”gp-responsive-nav-cntnr”>
	menu
   </div>
   <div class=”gp-responsive-page-wrapper”>
	<header>
        <content>
        <footer>
   </div>
</body>

show_close_btn: This option tells the plugin whether or not to display a close button at the top of the nav container. The default value is false. If your menu control button is off the page when the page is split, you can use the close button to close the menu. The control button class is set to: gp-responsive-nav-close.

active_class: This option adds a class to your body when the menu is visible. The default is ‘active’.

<body class=”active”>
 
</div>

Styling SplitView Mode

The menu itself is displayed the same as with Vertical mode, so you primarily need to style the active_class.

.gp-responsive-nav-cntnr {
	display:none; 
	width:100%;
}
.gp-responsive-toggle-wrapper { 
	display:block;
	float:right;
	margin-right: 40px;
	margin-top: 10px; 
}
 
@media only screen and (min-width: 480px) and (max-width: 767px) {
	body.active {
		background-color:#35373B;
	}
	body.active .page:before {
		content: " ";
		position: absolute;
		z-index: -1;
		top: 0;
		left: -100%;
		width: 100%;
		height: 100%;	
		background-color: #35373B;
	}
	body.active .wrapper { 
		max-width: 100%; 
		margin: 0px auto; 
		overflow: hidden; 
		width: 100%; 
		position: relative; 
	}
	body.active .gp-responsive-nav-cntnr { 
		margin-left: 0; 
		float:left; 
		background-color: #35373B; 
		width:60%; 
	}
	body.active .page { 
		float:left; 
		margin-left:0; 
		position:relative; 
		margin-right: -100%;
	}  
	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;
	}
	.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;
	}
}

Note: As with all modes, there many ways to style the menu/page. In the CSS above, the page class is used in DevoutGeek.com. This class is used to style the actual content container.

<body>
    <div class=”wrapper”>
	<div class=”page”>
	    <header>
	    <content>
	    <footer>
	</div>
    </div>
</body>

If you set the page_wrapper option to body, the styling would be very similar.

@media only screen and (min-width: 480px) and (max-width: 767px) {
	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 #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