<header>
<input type='checkbox' id='toggle' style='display:none;' />
<label class='toggle-btn toggle-btn__cross' for='toggle'>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</label>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact me</a></li>
</ul>
</nav>
</header>
<main>
<div class='wrap'>
<div class='title'>PureCSS fullscreen menu</div>
<div class="content">
Hellloo from the other Siiiiidddddeeeeee......<br />
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia, minus, laudantium voluptatibus officiis quae eaque minima soluta perspiciatis, necessitatibus vitae harum cum mollitia. Illo corporis dolor obcaecati, quam tenetur officiis. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia, minus, laudantium voluptatibus officiis quae eaque minima soluta perspiciatis, necessitatibus vitae harum cum mollitia. Illo corporis dolor obcaecati, quam tenetur officiis.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia, minus, laudantium voluptatibus officiis quae eaque minima soluta perspiciatis, necessitatibus vitae harum cum mollitia. Illo corporis dolor obcaecati, quam tenetur officiis.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia, minus, laudantium voluptatibus officiis quae eaque minima soluta perspiciatis, necessitatibus vitae harum cum mollitia. Illo corporis dolor obcaecati, quam tenetur officiis.
</div>
</div>
</main>
@import url(https://fonts.googleapis.com/css?family=Roboto:400,900);
:root {
font-size:16px;
}
* {
box-sizing:border-box;
font-family:"Roboto","Helvetica","sans-serif";
color:#555;
}
$th_pink:#E84A5F;
$th_dark:#2a363b;
body {
margin:0;
padding:0;
background-color:darken($th_dark,10%);
}
main {
min-width:200px;
max-width:800px;
margin:80px auto;
padding:10px;
.wrap {
padding:40px 20px;
background-color:#fff;
//box-shadow:0 0 10px 2px rgba(0,0,0,.2);
}
.title {
font-size:2em;
text-align:center;
margin:20px auto 40px;
text-transform:uppercase;
}
}
header {
nav {
background-color:rgba(0,0,0,.8);
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
opacity:0;
visibility:hidden;
transition:all 0.3s ease-in-out;
ul {
list-style-type:none;
padding:0;
margin:0;
position:absolute;
left:50%;
top:170px;
transition:all 0.3s ease-in-out;
transform:translateX(-50%);
li {
transform:translateY(50px);
opacity:0;
a {
display:block;
font-size:2em;
text-decoration:none;
padding:10px 0;
text-align:center;
color:#fff;
font-weight:bold;
transition:all 0.2s ease-in-out;
text-shadow:1px 1px 2px rgba(0,0,0,.5);
&:hover {
color:$th_pink;
}
}
}
}
}
}
.toggle-btn {
display:block;
position:fixed;
z-index:10;
right:10px;
top:10px;
cursor:pointer;
.bar {
width:30px;
height:2px;
margin:7px auto;
background-color:#fff;
transition:all 0.3s ease-in-out;
box-shadow:0 0 3px 1px rgba(0,0,0,.3);
&:nth-child(2) {
width:20px;
}
}
}
#toggle:checked {
&~nav {
opacity:1;
visibility:visible;
ul {
top:70px;
li {
transform:translateY(0px);
opacity:1;
@for $i from 1 through 4 {
$t: $i * 0.1;
&:nth-child(#{$i}) {
transition:all 0.3s cubic-bezier(.6,0,.8,1.5) #{$t}s;
}
}
}
}
}
&+label.toggle-btn {
.bar {
background-color:red;
&:nth-child(2) {
transform:translateX(50px);
opacity:0;
}
&:nth-child(1) {
transform:translateY(10px) rotate(45deg);
}
&:nth-child(3) {
transform:translateY(-8px) rotate(-45deg);
}
}
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.