<header>
  <input type='checkbox' id='new' style='display:none;' />
  <h1>OffCanvas Menu</h1>
  <nav>
    <ul>
      <li><a href='#'>Home</a></li>
      <li><a href='#'>About</a></li>
      <li><a href='#'>Fun</a></li>
      <li><a href='#'>Contact</a></li>
      <li><a href='#'>Links</a></li>
    </ul>
  </nav>
  <main>
    <label class='toggleMenu' for='new'>
      <span class='bar'></span>
      <span class='bar'></span>
      <span class='bar'></span>
    </label>
    <h1>OffCanvas Menu</h1>
    <p style='text-align:center;margin:0;padding-top:0;'>
      <a href='https://codepen.io/phenax/full/pjeqwm/' target='_parent _blank' style='color:red;font-size:1.5em;'>Please view in full screen mode</a>
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
      in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
      in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
      in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
      in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
      in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
  </main>
</header>
@import url(https://fonts.googleapis.com/css?family=Lato);
$font:"Lato",Helvetica,sans-serif;
$lblue:#03A9F4;

@mixin transition($in) {
	transition:$in;
	-webkit-transition:$in;
	-moz-transition:$in;
	-o-transition:$in;
	-ms-transition:$in;
}
@mixin box-shadow($in) {
	box-shadow:$in;
	-webkit-box-shadow:$in;
	-moz-box-shadow:$in;
	-o-box-shadow:$in;
	-ms-box-shadow:$in;
}
@mixin transform($in) {
	transform:$in;
	-webkit-transform:$in;
	-moz-transform:$in;
	-o-transform:$in;
	-ms-transform:$in;
}

body,html {
	margin:0;
	padding:0;
	min-height:100%;
}

* {
	color:#777;
	font-family:$font;
	box-sizing:border-box;
}

a {
  text-decoration:none;
  &:hover {
    text-decoration:underline;
  }
}

header {
	position:fixed;
	width:100%;
	height:100%;
	background-color:#222;

	h1 {
		font-size:2.2em;
		color:#fff;
		text-align:center;
	}

	main {
		border:1px solid #ddd;
		height:100%;
		width:100%;
		position:fixed;
		top:0;
		right:0;
		background-color:#fff;
		overflow-x:hidden;
		overflow-y:scroll;

		h1 {
			color:#888;
      margin-bottom:5px;
		}

		@include transition(all 0.5s ease-in-out);
	}
}

nav {
	width:30%;

	ul {
		list-style-type:none;
		padding:0;
		width:70%;
		margin:100px auto 0;

		li {
			font-size:1.7em;
			@include transform(translateX(-30px));
			opacity:0;

			@for $i from 1 through 5 {
				&:nth-child(#{$i}) {
					$r:$i*0.2;
					@include transition(all 0.3s ease-out #{$r}s);
				}
			}

			a {
				text-decoration:none;
				display:block;
				padding:10px 0;
				text-align:center;
				margin-top:5px;
				color:#fff;
				position:relative;

				&::before,&::after {
					content:" ";
					height:100%;
					position:absolute;
					top:0;
					background-color:$lblue;
					width:0;
					@include transition(all 0.3s ease-in-out);
				}

				&::before {
					left:0;
				}
				&::after {
					right:0;
				}

				&:hover {
					color:$lblue;
          text-decoration:none;
					text-shadow:0 0 2px $lblue;

					&::before,&::after {
						width:5px;
						@include box-shadow(0 0 5px 1px $lblue);
					}
				}
			}
		}
	}
}

input:checked {
	&~main {
		height:100%;
		@include box-shadow(0 0 100px 10px rgba(0,0,0,0.7));
		@include transform(scale(0.6));
		right:-12%;
		cursor:pointer;
		overflow:hidden;

		h1 {
			margin-top:75.5px;
		}

		.toggleMenu {
			position:absolute;
			width:100%;
			top:0;
			left:0;
			height:100%;
			z-index:10;
		}
	}

	&~nav {
		ul {
			li {
				@include transform(translateX(0));
				opacity:1;
				
				@for $i from 1 through 5 {
					&:nth-child(#{$i}) {
						@include transition(all 0.3s linear 0);
					}
				}
			}	
		}
	}
}

main {
	.toggleMenu {
		background-color:transparent;
		cursor:pointer;
		padding:10px;
		display:block;
		width:30px;

		span.bar {
			display:block;
			width:28px;
			height:5px;
			margin:4px 1px;
			background-color:#888;
		}
	}

	p {
		padding:30px;
	}
}
View Compiled
/*

Pure CSS OffCanvas Menu

*/














alsolike(
  "XbOvpw", "Pure CSS Toggle Menu", 
  "OyXwoq", "Baymax in pure CSS", 
  "gaMMMd", "DoodleIt"
)

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://codepen.io/fbrz/pen/9a3e4ee2ef6dfd479ad33a2c85146fc1.js