aside menu, mobile-like, only css
A Pen by Felipe Nunes on CodePen.
<header> | |
<h1>willpower</h1> | |
<a href="#menu" class="toggle-menu" aria-role="button"><i class="fa fa-bars"></i></a> | |
</header> | |
<nav id="menu"> | |
<a href="#" class="toggle-menu" aria-role="button"><i class="fa fa-times"></i></a> | |
<ul> | |
<li><a href="#" class="lnk-menu">Lorem</a></li> | |
<li><a href="#" class="lnk-menu">Ipsum</a></li> | |
<li><a href="#" class="lnk-menu">Dolor</a></li> | |
<li><a href="#" class="lnk-menu">Sit</a></li> | |
<li><a href="#" class="lnk-menu">Amet</a></li> | |
</ul> | |
</nav> | |
<main> | |
<div class="temp"> | |
<h1>Lorem Ipsum</h1> | |
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet sunt voluptas impedit at deserunt. Dolorum nemo, dicta commodi esse vel, laborum amet totam ex error, a similique magni voluptas alias. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet sunt voluptas impedit at deserunt. Dolorum nemo, dicta commodi esse vel, laborum amet totam ex error, a similique magni voluptas alias. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet sunt voluptas impedit at deserunt. Dolorum nemo, dicta commodi esse vel, laborum amet totam ex error, a similique magni voluptas alias.</p> | |
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet sunt voluptas impedit at deserunt. Dolorum nemo, dicta commodi esse vel, laborum amet totam ex error, a similique magni voluptas alias. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet sunt voluptas impedit at deserunt. Dolorum nemo, dicta commodi esse vel, laborum amet totam ex error, a similique magni voluptas alias. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet sunt voluptas impedit at deserunt. Dolorum nemo, dicta commodi esse vel, laborum amet totam ex error, a similique magni voluptas alias.</p> | |
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet sunt voluptas impedit at deserunt. Dolorum nemo, dicta commodi esse vel, laborum amet totam ex error, a similique magni voluptas alias. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet sunt voluptas impedit at deserunt. Dolorum nemo, dicta commodi esse vel, laborum amet totam ex error, a similique magni voluptas alias. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet sunt voluptas impedit at deserunt. Dolorum nemo, dicta commodi esse vel, laborum amet totam ex error, a similique magni voluptas alias.</p> | |
</div> | |
</main> |
// Mixins | |
@mixin transform($value) { | |
-webkit-transform: translate3d(0, 0, 0) $value; | |
-moz-transform: translate3d(0, 0, 0) $value; | |
-ms-transform: translate3d(0, 0, 0) $value; | |
transform: translate3d(0, 0, 0) $value; | |
} | |
@mixin transition($value) { | |
-webkit-transition: $value; | |
-moz-transition: $value; | |
-ms-transition: $value; | |
transition: $value; | |
} | |
* { margin: 0; padding: 0; box-sizing: border-box; } | |
html, body { overflow-x: hidden; } | |
.fa { | |
font-size: 2em; | |
color: #fff; | |
line-height: 40px; | |
} | |
body { | |
font: 100% arial, verdana, tahoma, sans-serif; | |
color: #888; | |
background-color: #fff; | |
} | |
header { | |
background: #399; | |
padding: 15px 0 12px; | |
overflow: hidden; | |
h1 { | |
vertical-align: middle; | |
text-align: center; | |
font-size: 1.5em; | |
color: #fff; | |
} | |
} | |
main { | |
padding: 30px; | |
p { | |
font-size: .9em; | |
line-height: 1.2em; | |
margin-bottom: 20px; | |
} | |
} | |
.toggle-menu { | |
width: 40px; | |
height: 40px; | |
display: inline-block; | |
vertical-align: middle; | |
position: relative; | |
text-align: center; | |
overflow: hidden; | |
cursor: pointer; | |
position: fixed; | |
z-index: 2; | |
left: 10px; | |
top: 10px; | |
} | |
#menu { | |
position: fixed; | |
top: 0; | |
left: 0; | |
z-index: 2; | |
width: 220px; | |
height: 100%; | |
padding-top: 60px; | |
background: #369; | |
box-shadow: -10px 0 10px rgba(0,0,0,.2) inset; | |
.toggle-menu { z-index: 3; } | |
} | |
.lnk-menu { | |
display: block; | |
border-bottom: 1px solid rgba(255,255,255,.2); | |
margin: 0 10px; | |
padding: 10px; | |
color: #fff; | |
text-decoration: none; | |
&:hover { color: #399; } | |
} | |
#menu { | |
@include transform(translateX(-220px)); | |
@include transition(all .25s cubic-bezier(.16,.63,.45,.98)); | |
} | |
#menu:target { | |
@include transform(translateX(0)); | |
} |