@import "compass/css3";
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600,700);
* {
box-sizing: border-box;
}
html,
body {
width: 100%;
height: 100%;
}
body {
margin: .55em;
color: black;
}
/* custom scrollbar */
::-webkit-scrollbar {
width: .95em;
}
::-webkit-scrollbar-track {
background-color: rgba(217, 217, 217, 0.5);
}
::-webkit-scrollbar-thumb {
background: rgba(184, 184, 184, 0.5);
box-shadow: inset 0.05em 0.05em 0 rgba(0, 0, 0, 0.1), inset 0 -0.05em 0 rgba(0, 0, 0, 0.07);
}
/* Advanced Checkbox Hack */
body {
-webkit-animation: bugfix infinite 1s;
}
@-webkit-keyframes bugfix {
from {
padding: 0;
}
to {
padding: 0;
}
}
input[type=checkbox] {
position: absolute;
top: -9999px;
left: -9999px;
}
label {
position: absolute;
left: 0;
display: none;
width: 2em;
height: 2.25em;
padding: .35em;
font-size: 1.1em;
color: #fff;
transition: color .3s ease-in-out;
cursor: pointer;
user-select: none;
margin: 0;
background: rgba(0, 0, 0, 0.4);
}
/* big screens */
nav[role="off-canvas"] {
position: relative;
width: 50em;
margin: 0 auto;
transition-duration: .3s, .5s;
transition-timing-function: ease-in-out;
transition-property: left, opacity, box-shadow;
}
nav[role="off-canvas"] a {
color: #fff;
text-decoration: none;
font: 1.4em 'Open Sans', sans-serif;
transition: color .3s ease-in-out;
display: table-cell;
vertical-align: middle;
}
nav[role="off-canvas"] ul {
padding: 0;
margin: 0 auto;
width: 100%;
}
nav[role="off-canvas"] ul > li {
float: left;
padding: .5em 0;
width: 8em;
margin: .5em 0;
opacity: .8;
text-transform: uppercase;
display: table;
background: rgba(247, 52, 8, 0.65);
cursor: pointer;
text-align: center;
transition-duration: .3s;
transition-timing-function: ease-in-out;
transition-property: box-shadow, color, opacity, padding-left;
cursor: pointer;
}
nav[role="off-canvas"] ul > li:hover {
color: #fff;
opacity: 1;
box-shadow: 0.5em 0 0 0 rgba(255, 255, 255, 0.95);
}
nav[role="off-canvas"] ul > li:hover > a {
color: #fff;
}
nav[role="off-canvas"] ul > li:nth-child(2) {
background: rgba(247, 183, 8, 0.65);
}
nav[role="off-canvas"] ul > li:nth-child(3) {
background: rgba(32, 247, 8, 0.65);
}
nav[role="off-canvas"] ul > li:nth-child(4) {
background: rgba(8, 231, 247, 0.65);
}
nav[role="off-canvas"] ul > li:nth-child(5) {
background: rgba(8, 72, 247, 0.65);
}
/* small screens */
@media screen and (max-width: 44em) {
html,
body {
margin: 0;
overflow-x: hidden;
}
.content {
margin: 2.5em .5em 0 .5em;
}
nav[role="off-canvas"] {
position: absolute;
top: 3em;
left: -20em;
width: 20em;
opacity: 0;
}
nav[role="off-canvas"] ul > li {
height: 100%;
width: 100%;
text-align: left;
margin: 0;
}
nav[role="off-canvas"] ul > li:hover {
box-shadow: inset 0 0 0 0.15em rgba(255, 255, 255, 0.45);
}
label {
display: block;
}
label:after {
position: absolute;
right: .25em;
top: 0;
content: "\2261";
font-size: 1.8em;
}
label:hover,
input:checked ~ label {
color: #000;
}
input:checked ~ nav[role="off-canvas"] {
opacity: 1;
left: 0;
box-shadow: -30em 0 0 30em rgba(0, 0, 0, 0.3);
}
input:checked ~ nav[role="off-canvas"] ul > li {
padding: .55em .55em .55em 1.5em;
}
input:checked ~ nav[role="off-canvas"] ul > li:hover {
padding-left: 3.5em;
}
input:checked ~ nav[role="off-canvas"] ul > li:after {
position: absolute;
right: .25em;
content: "\203A";
font: bold 1.4em sans-serif;
color: inherit;
}
input:checked ~ .content {
margin-left: 20.5em;
margin-right: -20.5em;
}
}
<input type="checkbox" id="menu">
<label for="menu" onclick></label>
<nav role="off-canvas">
<ul>
<li><a href="#">Stream</a></li>
<li><a href="#">Lab</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>