cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              	<input type="checkbox" id="togglebox" />
	<div class="overlay"><label for="togglebox"></label></div>

	<nav id="offcanvas-menu">
		<label for="togglebox" id="closex">Close</label>
		<ul>
		<li><a href="http://www.javascriptkit.com">Home</a></li>
		<li><a href="http://www.javascriptkit.com/cutpastejava.shtml">JavaScripts</a></li>
		<li><a href="http://www.javascriptkit.com/javatutors">JS Tutorials</a></li>
		<li><a href="http://www.dynamicdrive.com/style/">CSS Library</a></li>
		<li><a href="http://www.dynamicdrive.com/forums/">Forums</a></li>
		<li><a href="http://www.cssdrive.com">CSS Gallery</a></li>
		</ul>
	</nav>

	<div id="contentarea">
		<label for="togglebox" id="navtoggler">Menu</label>
		Some body content here
		some body content here
	</div>
            
          
!
            
              div#contentarea {
  position: relative;
  width: 100%;
  -moz-transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -moz-transition: -moz-transform 0.5s;
  /* transition settings */
  
  -webkit-transition: -webkit-transform 0.5s;
  transition: transform 0.5s;
}

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#offcanvas-menu {
  /* Full screen nav menu */
  width: 250px;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 100;
  visibility: hidden; /* this is for browsers that don't support CSS3 translate3d */
  -moz-transform: translate3d(-250px, 0, 0);
  -webkit-transform: translate3d(-250px, 0, 0);
  transform: translate3d(-250px, 0, 0);
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background: #C1F2BC;
  display: block;
  position: fixed;
  text-align: center;
  overflow: auto;
  -moz-transition: -moz-transform 0.5s, visibility 0s 0.5s;
  /* transition settings */
  -webkit-transition: -webkit-transform 0.5s, visibility 0s 0.5s;
  transition: transform 0.5s, visibility 0s 0.5s;
}

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

nav#offcanvas-menu 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#offcanvas-menu label#closex::after{ /* render large cross inside close button */
  -ms-transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
  transform: rotate(-135deg);
}

nav#offcanvas-menu a{
	text-decoration: none;
  color: black;
  text-transform: uppercase;
}

nav#offcanvas-menu ul{
  list-style: none;
  margin-top: 200px;
	opacity: 0;
  padding: 0;
  position: relative;
  font: bold 1.5em 'Bitter', sans-serif; /* use google font inside nav UL */
  -moz-transition: margin-top 0.2s 0.3s, opacity 0.5s 0.3s; /* transition settings */
  -webkit-transition: margin-top 0.2s 0.3s, opacity 0.5s 0.3s;
  transition: margin-top 0.2s 0.3s, opacity 0.5s 0.3s;
}

nav#offcanvas-menu ul li{
  margin-bottom: 25px;
}

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

nav#offcanvas-menu ul li a:hover{
  background: lightblue;
}

div.overlay {
	/* overlay that covers entire page when menu is open */
	position: fixed;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	opacity: 0;
	background: black;
	z-index: 99;
	visibility: hidden;
	transition: opacity 0.5s; /* transition settings */
}

div.overlay label {
	/* label of overlay that closes menu when clicked on */
	width: 100%;
	height: 100%;
	position: absolute;
}

input[type="checkbox"]#togglebox:checked ~ div#contentarea {
  margin-left: 10px;
  -moz-transform: translate3d(250px, 0, 0);
  -webkit-transform: translate3d(250px, 0, 0);
  transform: translate3d(250px, 0, 0);
}

input[type="checkbox"]#togglebox:checked ~ nav#offcanvas-menu {
  /* nav state when corresponding checkbox is checked */
  -moz-transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  visibility: visible; /* this is for browsers that don't support CSS3 translate3d in showing the menu */
  -moz-transition-delay: 0s; /* No delay for applying "visibility:visible" property when menu is going from "closed" to "open" */
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}

input[type="checkbox"]#togglebox:checked ~ nav#offcanvas-menu ul{ /* nav state when corresponding checkbox is checked */
	margin-top: 100px;
	opacity: 1;
}

input[type="checkbox"]#togglebox:checked ~ div.overlay{ /* overlay state when corresponding checkbox is checked */
	opacity: 0.6;
	visibility: visible;
}
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console