<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>
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);
}
}
}
}
View Compiled
This Pen doesn't use any external CSS resources.