<input type="checkbox" id="menu" hidden>
	<section class="canvas">
		<nav role="navigation">
			<label for="menu"><i class="fa fa-close"></i></label>
			<ul>
				<li><a href="#"><i class="fa fa-home"></i> Home</a></li>
				<li><a href="#"><i class="fa fa-users"></i> Users</a></li>
				<li><a href="#"><i class="fa fa-cog"></i> Configurations</a></li>
			</ul>
		</nav>

		<label class="menu-icon" for="menu" role="menuitem">
			<span></span>
		</label>

		<h1>Olá mundo, eu sou um dev "Show Man"</h1>
		<p>Abra o menu à cima e veja como podemos criar um menu off canvas usando apenas CSS3</p>

		<footer>Developer by <a href="https://clovisdasilvaneto.github.io">Clóvis Neto</a> </footer>
	</section>

		* {
			margin: 0;
			padding: 0;
			color:#FFF1F1;
			font-family: 'Raleway';
		}

		body {
			background: #B486CC;
			font-size: 2em;
      overflow-x:hidden;
		}

		h1 {
			font-size: 2.4em;
			margin: 2rem 0 0.5em;
			text-shadow:1px 1px 0 #3A3A3A;
		}

		p {
			font-size: 0.6em;
		}

		h1, p {
			padding: 0 10%;
			text-align: center;
		}

		p, a {
			font-weight: 300;
		}

		a {
			text-decoration: none;
		}

		label {
			cursor: pointer;
		}

		footer {
      padding: 0.5em 0;
      font-size: 0.5em;
      text-align: center;
      margin-top: 1.5em;
		}

		footer a{
		    color: #B2FF06;
		}

		.canvas {
			padding-top: 1px;

			-webkit-transition: ease 0.5s all;
			-moz-transition: ease 0.5s all;
			-ms-transition: ease 0.5s all;
			-o-transition: ease 0.5s all;
			transition: ease 0.5s all;
		}

		.menu-icon {
		    display: block;
			cursor: pointer;
		    width: 38px;
		    margin: 0.51em;
		}

		.menu-icon span, .menu-icon:after, .menu-icon:before {
			content:"";
		    display: block;
		    margin-top: 0.3rem;
		    border: solid 3px #fff;
		    width: 100%;
		}

		.menu-icon:hover span, .menu-icon:hover:before, 
		.menu-icon:hover:after {
			border-color:rgba(255, 255, 255, 0.75);
		}

		nav {
			height: 100vh;
			background: #594165;
			font-size: 1.3rem;
			width: 300px;
			position: fixed;
			top: 0;
			left: 0;
			-webkit-transform: translate3d(-100%,0,0);
			-moz-transform: translate3d(-100%,0,0);
			-ms-transform: translate3d(-100%,0,0);
			-o-transform: translate3d(-100%,0,0);
			transform: translate3d(-100%,0,0);
		}

    nav ul {
			padding-top: 3.3em;
			margin: 0 2em;	
			list-style: none;
		}

    nav a {
      opacity:0;
      -webkit-transform:translate3d(0, 40px,0);       -moz-transform:translate3d(0, 40px,0);
      -ms-transform:translate3d(0, 40px,0);
      -o-transform:translate3d(0, 40px,0);
      transform:translate3d(0, 40px,0)
        
      -webkit-transition: all .3s ease, opacity .2s linear;
      -moz-transition: all .3s ease, opacity .2s linear;
      -ms-transition: all .3s ease, opacity .2s linear;
      -o-transition: all .3s ease, opacity .2s linear;
      transition: all .3s ease, opacity .2s linear;

			font-weight: 400;
			padding: 0.5rem 1rem;
			display: block;
      
		}

    nav li:nth-child(1) a{
      -webkit-transition-delay: .4s;
      -moz-transition-delay: .4s;
      -ms-transition-delay: .4s;
      -o-transition-delay: .4s;
      transition-delay: .4s;
    }

    nav li:nth-child(2) a{
      -webkit-transition-delay: .5s;
      -moz-transition-delay: .5s;
      -ms-transition-delay: .5s;
      -o-transition-delay: .5s;
      transition-delay: .5s;
    }

    nav li:nth-child(3) a{
      -webkit-transition-delay: .6s;
      -moz-transition-delay: .6s;
      -ms-transition-delay: .6s;
      -o-transition-delay: .6s;
      transition-delay: .6s;
    }

		nav i {
			display: inline-block;
			margin-right: 0.5em;
		}

		.fa-close {
			font-weight: 100;
			position: absolute;
			top:10px;
			right: 4px;
		}

		#menu:checked ~ .canvas {
			-webkit-transform: translate3d(300px,0,0);
			-moz-transform: translate3d(300px,0,0);
			-ms-transform: translate3d(300px,0,0);
			-o-transform: translate3d(300px,0,0);
			transform: translate3d(300px,0,0);
		}

  #menu:checked ~ .canvas nav a {
			-webkit-transform: translate3d(0, 0, 0);
			-moz-transform: translate3d(0, 0, 0);
			-ms-transform: translate3d(0, 0, 0);
			-o-transform: translate3d(0, 0, 0);
			transform: translate3d(0, 0, 0);
      opacity:1;
  }

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.