Dynamic Drive CSS Library- Mobile full screen expand menu

CSS Library

Hosting Discounts

CSS Layouts

Web Graphics

Free Graphics

Online Tools:

CSS Library: Vertical CSS Menus: CSS3 demos: Here

Mobile full screen expand menu

Author: Dynamic Drive

Full screen menus are quite the rage these days, as they work out of the box across devices big and small with their large footprint. This mobile full screen menu expands itself to fill the whole page when activated, using the popular CSS checkbox adjacent sibling technique to toggle the menu between open and closed when the drawer style toggler is clicked on. The menu works across all modern browsers and mobile devices, while in IE8, a more limited interface is presented that's at least functional for those users.

Arbitrary Open Menu link
Arbitrary Close Menu link
Arbitrary Toggle Menu link

The CSS:

<link href="http://fonts.googleapis.com/css?family=Bitter&subset=latin" rel="stylesheet" type="text/css">
<style>

body { 
  -webkit-animation: bugfix infinite 1s; 
}

@-webkit-keyframes bugfix { 
  from {padding:0;} 
  to {padding:0;} 
}

input[type="checkbox"]#togglebox {
  /* checkbox used to toggle menu state */
  position: absolute;
  left: 0;
  top: 0;
  visibility: hidden;
}

label#navtoggler{  /* Main label icon to toggle menu state */
  z-index: 9;
  display: block;
  position: relative;
  font-size: 8px;
  /* change font size to change label dimensions. Leave width/height below alone */
  width: 4em;
  height: 2.5em;
  top: 0;
  left: 0;
  text-indent: -1000px;
  border: 0.6em solid black;
  /* border color */
  border-width: 0.6em 0;
  cursor: pointer;
}


label#navtoggler::before{
  /* inner strip inside label */
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 0.6em;
  top: 50%;
  margin-top: -0.3em;
  left: 0;
  background: black; /* stripes background color. Change to match border color of parent label above */
}

nav#expand-fullpagemenu{ /* Full screen nav menu */
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  visibility: hidden;
  -webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
  -webkit-transform: scale(0.9);  /* initially scale down nav size */
  transform: scale(0.9);
  background: #AAEDEA;
  display: block;
  position: fixed;
	z-index: 100;
  opacity: 0;
	text-align: center;
	overflow: auto;
  -moz-transition: visibility 0s 0.5s, opacity 0.5s, -moz-transform 0.5s; /* transition settings */
  -webkit-transition: visibility 0s 0.5s, opacity 0.5s, -webkit-transform 0.5s;
  transition: visibility 0s 0.5s, opacity 0.5s, transform 0.5s;
}

input[type="checkbox"]#togglebox:checked ~ nav#expand-fullpagemenu{ /* nav state when corresponding checkbox is checked */
	visibility: visible;
	-webkit-transform: scale(1);
	transform: scale(1);
	opacity: 1;
  -ms-transition-delay: 0s;
  -moz-transition-delay: 0s;
  -webkit-transition-delay: 0s;
  -transition-delay: 0s;
}

nav#expand-fullpagemenu label#closex{ /* Large x close button inside nav */
  width: 80px;
  height: 80px;
	overflow: hidden;
  display: block;
  position: absolute;
  cursor: pointer;
	text-indent: -1000px;
  z-index: 10;
  top: 0;
  right: 0;
}

nav#expand-fullpagemenu label#closex::before, nav label#closex::after{ /* render large cross inside close button */
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 6px;
  background: black;
  top: 50%;
  margin-top: -3px;
  -ms-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

nav#expand-fullpagemenu label#closex::after{ /* render large cross inside close button */
  -ms-transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
  transform: rotate(-135deg);
}

nav#expand-fullpagemenu a{
	text-decoration: none;
  color: black;
  text-transform: uppercase;
}

nav#expand-fullpagemenu ul{
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  max-height: 100%;
  top: 50%; /* center UL vertically inside nav */
  -webkit-transform: translateY(-50%); /* center UL vertically inside nav */
  transform: translateY(-50%);
  font: bold 2em 'Bitter', sans-serif; /* use google font inside nav UL */
}

nav#expand-fullpagemenu ul li{
  margin-bottom: 25px;
}

nav#expand-fullpagemenu ul li a{
  padding: 10px;
  border-radius: 20px;
}

nav#expand-fullpagemenu ul li a:hover{
  background: lightblue;
}



</style>

<script>

	// Extra function to control menu state from anywhere on your page/ inside your script
	function expandfullscreenmenu(action){ //param: 'open', 'close', or empty to toggle menu state
		var togglebox = document.getElementById("togglebox")
		var newstate =	(action == 'open')? true : (action == 'close')? false : !togglebox.checked
		togglebox.checked = newstate
	}

</script>

<!--[if lte IE 8]>

	<style>

	/* IE8 specific CSS */

	label#navtoggler{
	  border-width: 0.6em;
	}

nav#expand-fullpagemenu label#closex{
	font-size: 2em;
	text-indent: 0;
}

	#expand-fullpagemenu{
		visibility: hidden;
	}

	</style>

	<script>
	 // IE8 MENU COMPATIBILITY CODE:
	document.createElement("nav")

	function expandfullscreenmenu(action){
		var nav = document.getElementById("expand-fullpagemenu")
		var newstate =	(action == 'open')? 'visible' : (action == 'close')? 'hidden' : nav.style.visibility == 'hidden'? 'visible' : 'hidden'
		nav.style.visibility = newstate
	}

	window.attachEvent("onload", function(){
		document.getElementById("navtoggler").onclick = function(){
			expandfullscreenmenu('open')
		}
		document.getElementById("closex").onclick = function(){
			expandfullscreenmenu('close')
		}
	})
	
	</script>

<![endif]-->

The HTML:

<div class="menuwrapper">

<input type="checkbox" id="togglebox" />
<label for="togglebox" id="navtoggler"></label>

<nav id="expand-fullpagemenu">

<label for="togglebox" id="closex">Close</label>

		<ul>
		<li><a href="http://www.dynamicdrive.com">Home</a></li>
		<li><a href="http://www.dynamicdrive.com/new.htm">DHTML</a></li>
		<li><a href="http://www.dynamicdrive.com/style/">CSS Library</a></li>
		<li><a href="http://www.dynamicdrive.com/forums/">Help Forums</a></li>
		<li><a href="http://www.cssdrive.com">CSS Gallery</a></li>
		<li><a href="http://www.javascriptkit.com">JavaScript</a></li>

		</ul>

</nav>

</div>

<p>
<a href="#" onClick="expandfullscreenmenu('open')">Arbitrary Open Menu link</a><br />
<a href="#" onClick="expandfullscreenmenu('close')">Arbitrary Close Menu link</a><br />
<a href="#" onClick="expandfullscreenmenu()">Arbitrary Toggle Menu link</a>
</p>

The menu comes with a companion JavaScript function that lets you toggle the state of the full screen menu beyond the built in interface, from anywhere on the page as you see fit. Just call the function:

expandfullscreenmenu(action)

with the "action" parameter being one of the following three choices: "open", "close", or empty. When called with no (or empty) parameter, the function will toggle the state of the full page menu. Here's an example:

<a href="#" onClick="expandfullscreenmenu()">Arbitrary Toggle Menu link</a>

Code Info

Rate this code:

Date Posted: 04/29/2015

Revision History: Jan 24' 16': Updated code to fix menu in Chrome iOS.

Usage Terms: Click here