http://9-bb.com/%E6%93%8D%E4%BD%9C%E3%81%8C%E6%B0%97%E6%8C%81%E3%81%A1%E3%81%84%E3%81%84-%E5%AD%90%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC%E3%81%8C%E3%82%B9%E3%83%A9%E3%82%A4%E3%83%89%E3%82%A4%E3%83%B3%E3%81%97%E3%81%A6/

$color-dark: #1E2027;
$width: 280px;
$width-compressed: 52px;

.sidenav{
position: fixed;
width: $width;
height: 100%;
background-color: $color-dark;

.main-buttons{
list-style-type: none;
margin: 64px 0;
padding: 0;
color: #fff;
li{
text-transform: uppercase;
letter-spacing: 2px;
font-family: ‘Open Sans’, sans-serif;
font-size: 15px;
font-weight: 600;
}

& > li{
padding: 16px $width-compressed;
@include box-sizing(border-box);

.fa{
position: absolute;
left: 12px;
color: lighten($color-dark, 16);
}

&:hover, &:active, &:focus{
.hidden{
width: $width – $width-compressed;
}
background-color: lighten($color-dark, 5);
cursor: pointer;
}
}
}
}

.hidden{
width: 0;
height: 100%;
padding: 64px 0;

position: absolute;
top: 0;
right: 0;

overflow: hidden;

list-style-type: none;
background-color: lighten($color-dark, 5);
@include transition(0.3s);
li{
padding: 16px 24px;
&:hover, &:active, &:focus{
background-color: lighten($color-dark, 9);
}
}
}

body{background-color: lighten($color-dark, 68);line-height: 30px;}html,body{height:100%;}@import url(http://fonts.googleapis.com/css?family=Open+Sans:600);