/ Off-Canvas Menu

Pure CSS3 HTML5 sliding panels and off canvas navigation

Pure CSS3 HTML5 sliding panels and off canvas navigation

OFF CANVAS NAVIGATION

Pure CSS3 HTML5 sliding panels and off canvas navigation.

Made with

Html
Css/SCSS

Html

<input type="checkbox" id="nav-control" class="nav-control" ><label for="nav-control" class="toggle-button">
    <a class="wolverine">
      <div class="claws"></div>
    </a>
</label>

<nav class="navigation">
	<ul>
		<li>
			<a href="#">Link</a>
		</li>
		<li>
			<a href="">Link</a>
		</li>
		<li>
			<a href="">Link</a>
		</li>
		<li>
			<a href="">Link</a>
		</li>
	</ul>

</nav>

<div class="site-wrap">
<div class="callout">
</div>
	<section>
		<article>
			<h1>Title</h1>
		</article>

		<article>
			<h1>Title</h1>
		</article>

		<article>
			<h1>Title</h1>
		</article>

		<article>
			<h1>Title</h1>
		</article>

		<article>
			<h1>Title</h1>
		</article>

	</section>
</div>

Css

html, body {
	color: #ffffff;
	margin: 0;
	padding: 0;
	height: 100%;
	background: rgba(255, 255, 255, 1.0);
	font-family: Arial, sans-serif;
}

html {
	box-sizing: border-box;
}

body {
	overflow-x: hidden;
}

*, *:before, *:after {
	box-sizing: inherit;
}

.navigation {
	width: 100%;
	height: 100%;
	position: fixed;
	  top: 0;
	  right: 0;
	  bottom: 0;
	  left: 0;
	z-index: 0;
	list-style: none;
	background: #111;
  
  ul {
    padding: 0;
    margin: 0;
    
    li {
      position: relative;
      width: 200px;
      list-style: none;
      opacity: 0;
      -webkit-transform: translateX( -70% );
      -moz-transform: translateX( -70% );
      -ms-transform: translateX( -70% );
      -o-transform: translateX( -70% );
      transform: translateX( -70% );
      -webkit-transition: all 300ms ease-in-out;
      -moz-transition: all 300ms ease-in-out;
      -ms-transition: all 300ms ease-in-out;
      -o-transition: all 300ms ease-in-out;
      transition: all 300ms ease-in-out;
      
      a {
        display: block;
        padding: 19px;
        color: #ffffff;
        font-size: 20px;
        text-decoration: none;
        transition: color 0.2s, background 0.5s;
        
        &:hover {
          background: rgba(255, 255, 255, .1)
        }
      }
    }
  }
}

.site-wrap {
	height: 100%;
	width: 100%;
	background-color: #ffffff;
	position: relative;
	  top: 0;
	  bottom: 100%;
	  left: 0;
	z-index: 1;
	padding: 0;
	background: #ffffff
}

.nav-control {
	position: absolute;
	width: 100%;
	clip: rect(0, 0, 0, 0);
}

label[for="nav-control"] {
	position: fixed;
	  left: 15px; 
    top: 15px;
	z-index: 2;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	cursor: pointer;
	background-size: contain;
}

.callout {
	position: absolute;
	  left: 0;
	  top: 0;
	background: rgba(255, 255, 255, .15);
	width: 100%;
	height: 61px;
	padding: 10px 60px;
	text-align: center;
	z-index: 2;
}

.nav-control + label, .site-wrap {
	transition: left 0.2s;
}

.nav-control:checked + label {
	left: 215px;
}

.nav-control:checked ~ .navigation ul li {
	opacity: 1;
	-webkit-transform: translateX( 0 );
	-moz-transform: translateX( 0 );
	-ms-transform: translateX( 0 );
	-o-transform: translateX( 0 );
	transform: translateX( 0 );
}

.nav-control:checked ~ .site-wrap {
	left: 200px;
	box-shadow: 0 0 5px 5px rgba(0,0,0,0.5);
}

section {
	width: 100%;
	height: 100%;
	float:left;
  
  &:hover article {
    width: 15%;
  }
  
  article {
    cursor: pointer;
    width: 20%;
    height: 100%;
    padding: 7% 20px 10%;
    display: inline-block;
    float:left;
    position: relative;
    text-align: center;
    -moz-transition: all 250ms ease-in-out ;
    -o-transition: all 250ms ease-in-out;
    transition: all 250ms ease-in-out;
    
    &:hover {
      width: 40%;
      -moz-transition: all 250ms ease-in-out;
      -o-transition: all 250ms ease-in-out;
      transition: all 250ms ease-in-out;
      opacity: 1;
      
      &:before {
        opacity: 1;
      }
      
      > h1 {
        opacity: 1;
      }
    }
    
    &:before {
      content: " ";
      position: absolute;
        top: 0;
        left: 0;
      height: 100%;
      width: 100%;
      opacity: 0;
      background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 100%); /* FF3.6+ */
      background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,0.3)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
      background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,0.3) 0%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
      background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,0.3) 0%,rgba(255,255,255,0) 100%); /* Opera 12+ */
      background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,0.3) 0%,rgba(255,255,255,0) 100%); /* IE10+ */
      background: radial-gradient(ellipse at center, rgba(255,255,255,0.3) 0%,rgba(255,255,255,0) 100%); /* W3C */
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4dffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
      -moz-transition: all 250ms ease-in-out;
      -o-transition: all 250ms ease-in-out;
      transition: all 250ms ease-in-out;
      z-index: 1
    }
    
    &:nth-child(1) {
      background: #f2b635;
    }
    
    &:nth-child(2){
      background: #f19a2a;
    }
    
    &:nth-child(3){
      background: #00caff;
    }
    
    &:nth-child(4){
      background: #00a0e6;
    }
    
    &:nth-child(5){
      background: #f25648;
    }
    
    h1 {
      font-size: 50px;
      margin:0 0 40px;
      opacity: 0;
      -moz-transition: all 250ms ease-in-out ;
      -o-transition: all 250ms ease-in-out;
      transition: all 250ms ease-in-out;
      position: relative;
      z-index: 2;
    }
    
    > h1:after {
      content: "Here is a sub menu";
      font-size: 12px;
      text-align: center;
      position: absolute;
        bottom: -15px;
        left: 0;
      text-transform: uppercase;
      width: 100%;
    }
    
    h2 {
      font-size: 12px;
      text-transform: uppercase;
      z-index: 2;
    }
    
    footer {
      width: 100%;
      position: absolute;
        bottom: 0;
        left: 0;
      padding: 0;
      
      h3{
        color: #ffffff;
        font-size: 12px;
        text-transform: uppercase;
      }
    }
  }
}


@media screen and (max-width: 979px) {
	
  section article, section article:hover, section:hover article {
		width:100%;
		display: block;
		height: auto;
		opacity: 1;
	}
  
	section article h1 {
		margin: 50px 0 50px;
		opacity: 1;
	}
  
	section article footer {
		position: static;
	}
  
}

.toggle-button {
	display: block;
	width: 20px;
	position: relative;

	.wolverine {
		display: inline-block;
		padding: 15px 0px;
		cursor: pointer;
		-webkit-user-select: none;
		opacity: .97;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
     
		.claws {
			position: relative;
			width: 20px;
			height: 4px;
			background: rgb(255,255,255);

			&:before, &:after {
				display: block;
				content: "";
				height: 4px;
				width: 20px;
				background: rgb(255, 255, 255);
				position: absolute;
				z-index: -1;
				-webkit-transform-origin: 50% 50%;
				transform-origin: 50% 50%;
				-webkit-transition: top .1s .2s,-webkit-transform .2s ease;
				-webkit-transition-delay: ease,0s;
				-moz-transition: top .1s .2s ease,-moz-transform .2s ease;
				-o-transition: top .1s .2s ease,-o-transform .2s ease;
				transition: top .1s .2s ease,transform .2s ease;
			}  

			&:before {
				top: 8px;
			}

			&:after {
				top: -8px;
			}
		}
    
    &.close {

       .claws {
				-webkit-transition: background .1s 0s;
				-webkit-transition-delay: ease;
				-moz-transition: background .1s 0s ease;
				-o-transition: background .1s 0s ease;
				transition: background .1s 0s ease;
				background: transparent!important;

				&:before, &:after {
            background: rgb(255,255,255);
					-webkit-transition: top .1s ease,-webkit-transform .1s .2s;
					-webkit-transition-delay: 0s,ease;
					-moz-transition: top .1s ease,-moz-transform .1s .2s ease;
					-o-transition: top .1s ease,-o-transform .1s .2s ease;
					transition: top .1s ease,transform .1s .2s ease;
					top: 0;
					width: 20px;
				}

				&:before {
					-webkit-transform: rotate3d(0,0,1,45deg);
					transform: rotate3d(0,0,1,45deg);
				}

				&:after {
					-webkit-transform: rotate3d(0,0,1,-45deg);
					transform: rotate3d(0,0,1,-45deg);
				}
			}
     }
	}
}

.nav-control:checked ~ .toggle-button {

	.wolverine {
     
    .claws {
      -webkit-transition: background .1s 0s;
      -webkit-transition-delay: ease;
      -moz-transition: background .1s 0s ease;
      -o-transition: background .1s 0s ease;
      transition: background .1s 0s ease;
      background: transparent!important;

      &:before, &:after {
        background: rgb(255,255,255);
        -webkit-transition: top .1s ease,-webkit-transform .1s .2s;
        -webkit-transition-delay: 0s,ease;
        -moz-transition: top .1s ease,-moz-transform .1s .2s ease;
        -o-transition: top .1s ease,-o-transform .1s .2s ease;
        transition: top .1s ease,transform .1s .2s ease;
        top: 0;
        width: 20px;
      }

      &:before {
        -webkit-transform: rotate3d(0,0,1,45deg);
        transform: rotate3d(0,0,1,45deg);
      }

      &:after {
        -webkit-transform: rotate3d(0,0,1,-45deg);
        transform: rotate3d(0,0,1,-45deg);
      }
    }  
  }
}

Author

Adam Carignan

Demo

See the Pen Pure CSS3 HTML5 sliding panels and off canvas navigation by Adam Carignan (@acarignan) on CodePen.