Bootstrap toggle menu screen overlay

Bootstrap toggle menu screen overlay.

1. Load the jQuery MenuPuncher plugin’s JS and CSS in the project.

2. Create a list of links for the navigation menu.

3. Create a link to toggle the navigation menu.

4. Call the plugin on document ready.

5. Default settings to customize the fullscreen navigation menu.

index.html

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery MenuPuncher Plugin Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1, user-scalable=no">
<link href='http://fonts.googleapis.com/css?family=Noto+Sans' rel='stylesheet' type='text/css'>
<link href="menupuncher.css" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="menupuncher.js"></script>
<script type="text/javascript">
    jQuery(document).ready( function($) {
        $('#menu').menupuncher({
            color : '#000',
			textcolor  : '#FFF',
			opacity: '0.8',
			hovercolor: '#FFF'
        });     
    });

</script>
</head>

<body>
<a href="#" class="pusher"> <span></span> <span></span> <span></span> </a>
<ul id="menu">
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Works</a></li>
  <li><a href="#">Services</a></li>
  <li><a href="#">Blog</a></li>
  <li><a href="#">Contact</a></li>
</ul>
<div id="container">
  <h1>jQuery MenuPuncher Plugin Demo</h1>
<div class="jquery-script-center">
<ul>
<li><a href="http://www.jqueryscript.net/">Download This Plugin</a></li>
<li><a href="http://www.jqueryscript.net/">Back To jQueryScript.Net</a></li>
</ul>
<div class="jquery-script-ads"><script type="text/javascript"><!--
google_ad_client = "ca-pub-2783044520727903";
/* jQuery_demo */
google_ad_slot = "2780937993";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></div>
<div class="jquery-script-clear"></div>
</div>
</div>
<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-36251023-1']);
  _gaq.push(['_setDomainName', 'jqueryscript.net']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>

</body>
</html>

<!doctype html>

<html>

<head>

<title>jQuery MenuPuncher Plugin Demo</title>

jQuery(document).ready( function($) {

$('#menu').menupuncher({

color : '#000',

textcolor : '#FFF',

opacity: '0.8',

hovercolor: '#FFF'

});

</script>

</head>

<body>

<li><a href="#">About</a></li>

<li><a href="#">Works</a></li>

<li><a href="#">Services</a></li>

<li><a href="#">Contact</a></li>

</ul>

<h1>jQuery MenuPuncher Plugin Demo</h1>

<ul>

<li><a href="http://www.jqueryscript.net/">Download This Plugin</a></li>

<li><a href="http://www.jqueryscript.net/">Back To jQueryScript.Net</a></li>

</ul>

<div class="jquery-script-ads"><script type="text/javascript"><!--

google_ad_client = "ca-pub-2783044520727903";

/* jQuery_demo */

google_ad_slot = "2780937993";

google_ad_width = 728;

google_ad_height = 90;

//-->

</script>

src="http://pagead2.googlesyndication.com/pagead/show_ads.js">

</script></div>

</div>

var _gaq = _gaq || [];

_gaq.push(['_setAccount', 'UA-36251023-1']);

_gaq.push(['_setDomainName', 'jqueryscript.net']);

_gaq.push(['_trackPageview']);

(function() {

var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;

ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';

var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);

})();

</script>

</body>

</html>

menupuncher.css

/*MenuPuncher v1.0.0 for jQuery
=============
Author: Ali Beceren
Created: 2/14/2011
Date: 10/08/2014
Website: http://www.jenaldesign.com
Description: Jenal Design
*/



* {
  -webkit-transition: all 0.25s ease-in-out;
  -moz-transition: all 0.25s ease-in-out;
  -o-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
}

html,
body {
  margin: 0px;
  padding: 0px;
  font-family: 'Noto Sans', sans-serif;
}

#container {
  width: 960px;
  margin: 0 auto;
}

.pusher {
  width: 40px;
  height: 22px;
  padding: 11px;
  background-color: rgba(0, 0, 0, 0.8);
  display: block;
  position: relative;
  z-index: 100000;
}

.pusher span {
  width: 35px;
  height: 2px;
  display: block;
  background: #FFF;
  margin: 0 0 8px 0;
}

.pusher span:last-child { margin: 0; }

.pusher.click span:nth-of-type(1) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  margin: 10px 0 0 0;
}

.pusher.click span:nth-of-type(2) { opacity: 0; }

.pusher.click span:nth-of-type(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  margin: -12px 0 0 0;
}

.open {  //background-color:rgba(0, 0, 0, 0.8);
}

.floating {
  position: fixed;
  top: 0;
}

body > nav {
  backface-visibility: hidden;
  left: 0;
  overflow: hidden;
  padding-top: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
  display: block;
}

body>nav .bg-cover {
  z-index: 1500;
  position: absolute;
  top: 0px;
  width: 100%;
  height: 100%;
  display: table;
}

body>nav .menupuncher {
  visibility: hidden;
  top: -10%;
  width: 100%;
  padding: 0;
  opacity: 0;
  display: table-cell !important;
  vertical-align: middle;
}

body>nav .menupuncher li {
  list-style: none;
  text-align: center
}

body>nav .menupuncher li a {
  padding: 0px;
  width: 100%;
  display: block;
  letter-spacing: -0.06em;
  color: #fff;
  text-decoration: none;
  font-size: 58.5714px;
}

body>nav .menupuncher li a:hover {
  background: #fff;
  color: #000;
}

body>nav .menupuncher li a:focus { outline: 0 }

body>nav.open { height: 100% }

body>nav.open ul {
  visibility: visible;
  opacity: 1;
}


/* #Mobile (Landscape)
================================================== */

    /* Note: Design for a width of 480px */

@media only screen and (min-width: 480px) and (max-width: 767px) {

#container { width: 100% !important }

body>nav .menupuncher li a { font-size: 28.5714px !important; }
}

/*  #Mobile (Portrait)
================================================== */

    /* Note: Design for a width of 320px */

@media only screen and (max-width: 767px) {

#container { width: 100% !important }

body>nav .menupuncher li a { font-size: 28.5714px !important; }
}

/* #Tablet (Portrait)
================================================== */

    /* Note: Design for a width of 768px */

@media only screen and (min-width: 768px) and (max-width: 959px) {
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

/*MenuPuncher v1.0.0 for jQuery

=============

Author: Ali Beceren

Created: 2/14/2011

Date: 10/08/2014

Website: http://www.jenaldesign.com

Description: Jenal Design

* {

-webkit-transition: all 0.25s ease-in-out;

-moz-transition: all 0.25s ease-in-out;

-o-transition: all 0.25s ease-in-out;

transition: all 0.25s ease-in-out;

}

html,

body {

margin: 0px;

padding: 0px;

font-family: 'Noto Sans', sans-serif;

}

#container {

width: 960px;

margin: 0 auto;

}

.pusher {

width: 40px;

height: 22px;

padding: 11px;

background-color: rgba(0, 0, 0, 0.8);

display: block;

position: relative;

z-index: 100000;

}

.pusher span {

width: 35px;

height: 2px;

display: block;

background: #FFF;

margin: 0 0 8px 0;

}

.pusher span:last-child { margin: 0; }

.pusher.click span:nth-of-type(1) {

-webkit-transform: rotate(45deg);

-moz-transform: rotate(45deg);

-o-transform: rotate(45deg);

transform: rotate(45deg);

margin: 10px 0 0 0;

}

.pusher.click span:nth-of-type(2) { opacity: 0; }

.pusher.click span:nth-of-type(3) {

-webkit-transform: rotate(-45deg);

-moz-transform: rotate(-45deg);

-o-transform: rotate(-45deg);

transform: rotate(-45deg);

margin: -12px 0 0 0;

}

.open { //background-color:rgba(0, 0, 0, 0.8);

}

.floating {

position: fixed;

top: 0;

}

body > nav {

backface-visibility: hidden;

left: 0;

overflow: hidden;

padding-top: 0;

position: fixed;

top: 0;

width: 100%;

z-index: 1000;

display: block;

}

body>nav .bg-cover {

z-index: 1500;

position: absolute;

top: 0px;

width: 100%;

height: 100%;

display: table;

}

body>nav .menupuncher {

visibility: hidden;

top: -10%;

width: 100%;

padding: 0;

opacity: 0;

display: table-cell !important;

vertical-align: middle;

}

body>nav .menupuncher li {

list-style: none;

text-align: center

}

body>nav .menupuncher li a {

padding: 0px;

width: 100%;

display: block;

letter-spacing: -0.06em;

color: #fff;

text-decoration: none;

font-size: 58.5714px;

}

body>nav .menupuncher li a:hover {

background: #fff;

color: #000;

}

body>nav .menupuncher li a:focus { outline: 0 }

body>nav.open { height: 100% }

body>nav.open ul {

visibility: visible;

opacity: 1;

}

/* #Mobile (Landscape)

================================================== */

/* Note: Design for a width of 480px */

@media only screen and (min-width: 480px) and (max-width: 767px) {

#container { width: 100% !important }

body>nav .menupuncher li a { font-size: 28.5714px !important; }

}

/* #Mobile (Portrait)

================================================== */

/* Note: Design for a width of 320px */

@media only screen and (max-width: 767px) {

#container { width: 100% !important }

body>nav .menupuncher li a { font-size: 28.5714px !important; }

}

/* #Tablet (Portrait)

================================================== */

/* Note: Design for a width of 768px */

@media only screen and (min-width: 768px) and (max-width: 959px) {

}

menupuncher.js

// MenuPuncher v1.0.0 for jQuery
// =============
// Author: Ali Beceren
// Created: 2/14/2011
// Date: 10/08/2014
// Website: http://www.jenaldesign.com
// Description: Jenal Design 

(function($) {

	$.fn.menupuncher = function(options) {
		
		$(this).addClass("menupuncher");
		
		// Settings
		var settings = $.extend({
			color  : '#000000',
			textcolor  : '#FFFFFF',
			opacity  : '0.8',
			hovercolor: '#FFF'
		}, options);
			
		if ( settings.color ) {
			var colorx = settings.color;			
		}
		if ( settings.hovercolor ) {
			var hovercolorx = settings.hovercolor;			
		}
		if ( settings.opacity ) {
			var opacityx = settings.opacity;
		}
		if ( settings.textcolor ) {
			var textcolorx = settings.textcolor;
		}
		$('.menupuncher').hide();
												
		$('.pusher').click(function() {	
		
				$('.pusher').toggleClass('click');
															
									
				if($('.pusher').hasClass('click')){
					$(".menupuncher").wrap("<nav class='open'><div class='bg-cover'></div></nav>");
					
					$("body").bind("touchmove",function(e){e.preventDefault();});
					
					$('.menupuncher').show();
					
					$('.open').css("background-color",colorx).css('opacity', opacityx);
					$('.open li a').css("color",textcolorx);
					
					$(".open a").mouseover(function() {
						$(this).css("background-color",hovercolorx);
						$(this).css("color",colorx);
					}).mouseout(function() {
						$(this).css("background-color","transparent");
						$(this).css("color",textcolorx);
					});					
					
				}else{
					$(".menupuncher").unwrap().unwrap();
					
					$("body").unbind("touchmove",function(e){e.preventDefault();});
					
					$('.menupuncher').hide();
					
				}
												
				return false;
			});
		
		$(window).scroll( function() {
			if ($(window).scrollTop() > $('body').offset().top)
				$('.pusher').addClass('floating');
			else
				$('.pusher').removeClass('floating');
		} );
					
	}
	
	return false;
		
}(jQuery));

// MenuPuncher v1.0.0 for jQuery

// =============

// Author: Ali Beceren

// Created: 2/14/2011

// Date: 10/08/2014

// Website: http://www.jenaldesign.com

// Description: Jenal Design

(function($) {

$.fn.menupuncher = function(options) {

$(this).addClass("menupuncher");

// Settings

var settings = $.extend({

color : '#000000',

textcolor : '#FFFFFF',

opacity : '0.8',

hovercolor: '#FFF'

}, options);

if ( settings.color ) {

var colorx = settings.color;

}

if ( settings.hovercolor ) {

var hovercolorx = settings.hovercolor;

}

if ( settings.opacity ) {

var opacityx = settings.opacity;

}

if ( settings.textcolor ) {

var textcolorx = settings.textcolor;

}

$('.menupuncher').hide();

$('.pusher').click(function() {

$('.pusher').toggleClass('click');

if($('.pusher').hasClass('click')){

$(".menupuncher").wrap("<nav class='open'><div class='bg-cover'></div></nav>");

$("body").bind("touchmove",function(e){e.preventDefault();});

$('.menupuncher').show();

$('.open').css("background-color",colorx).css('opacity', opacityx);

$('.open li a').css("color",textcolorx);

$(".open a").mouseover(function() {

$(this).css("background-color",hovercolorx);

$(this).css("color",colorx);

}).mouseout(function() {

$(this).css("background-color","transparent");

$(this).css("color",textcolorx);

});

}else{

$(".menupuncher").unwrap().unwrap();

$("body").unbind("touchmove",function(e){e.preventDefault();});

$('.menupuncher').hide();

}

return false;

});

$(window).scroll( function() {

if ($(window).scrollTop() > $('body').offset().top)

$('.pusher').addClass('floating');

else

$('.pusher').removeClass('floating');

} );

}

return false;

}(jQuery));

Source: http://www.jqueryscript.net/menu/Fullscreen-Perspective-Navigation-with-jQuery-and-CSS3-MenuPuncher.html

Leave a Reply Cancel reply