A simple slide out menu using just css.
A Pen by Max Kurapov on CodePen.
<div class="menu"> | |
<div class="title">MENU</div> | |
<ul class="nav"> | |
<li><a href="#">Home</a></li> | |
<li><a href="#">About</a></li> | |
<li><a href="#">Work</a></li> | |
<li><a href="#">Resources</a></li> | |
<li><a href="#">Contact</a></li> | |
</ul> | |
</div> | |
<div class="intro"> | |
Hover over the menu. Thanks for visiting homie. | |
</div> |
// Hey. |
@mixin vertical-align($position) { | |
position:$position; | |
top: 50%; | |
-webkit-transform: translateY(-50%); | |
-ms-transform: translateY(-50%); | |
transform: translateY(-50%); | |
} | |
@mixin all-transition($time) | |
{ | |
transition: all $time; | |
-webkit-transition: all $time; | |
} | |
body | |
{ | |
margin: 0; | |
font-family: 'Muli', sans-serif; | |
} | |
.menu { | |
font-weight: 100; | |
background: #efefef; | |
width: 150px; | |
height: 100%; | |
padding-left: 50px; | |
position: fixed; | |
z-index: 100; | |
-webkit-box-shadow: -3px 0px 5px 0px rgba(0,0,0,0.2); | |
box-shadow: -3px 0px 5px 0px rgba(0,0,0,0.2); | |
right: -130px; | |
@include all-transition(0.3s); | |
color: #222; | |
&:hover, &:focus | |
{ | |
transform: translate3d(-130px, 0, 0); | |
animation-timing-function: 1s ease-in; | |
} | |
.title | |
{ | |
top:50%; | |
@include vertical-align(absolute); | |
transform: rotate(270deg); | |
left: 10px; | |
font-weight: 800; | |
font-size: 15px; | |
} | |
.nav | |
{ | |
@include vertical-align(absolute); | |
font-weight: 100; | |
li | |
{ | |
padding-bottom: 30px; | |
list-style-type: none; | |
a | |
{ | |
display: block; | |
text-decoration: none; | |
color: inherit; | |
@include all-transition(0.3s); | |
&:hover | |
{ | |
color: #aaa; | |
} | |
} | |
} | |
} | |
} | |
.intro | |
{ | |
position: absolute; | |
top:30%; | |
width: 45%; | |
margin: 0 auto;left:0;right:0; | |
font-size: 45px; | |
text-align: center; | |
font-style: italic; | |
} |
<link href="https://fonts.googleapis.com/css?family=Muli:400,300italic,300" rel="stylesheet" /> |
This navigation is awesome on desktop but isn't working on mobile. Do I need a media query?