<body>
<aside>
<header><span class="ico">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="30px" height="30px" viewBox="0 0 126 126" enable-background="new 0 0 126 126" xml:space="preserve">
<path fill="#fff" d="M67.528,4.054c-2.197-2.672-6.845-2.686-9.072,0.016c-3.983,4.883-38.92,48.414-38.92,72.626
c0,26.057,19.496,47.258,43.463,47.258c23.968,0,43.464-21.201,43.464-47.258C106.463,52.483,71.526,8.952,67.528,4.054z
M62.999,116.141c-19.655,0-35.648-17.695-35.648-39.445c0-16.841,22.51-49.354,35.648-65.813
c13.152,16.475,35.65,48.977,35.65,65.813C98.649,98.445,82.655,116.141,62.999,116.141z"/>
</svg>
</span>
</header>
<nav>
<ul class="main-menu">
<li><a href="#"><span class="ico">
<!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="64px" height="64px" preserveAspectRatio="xMinYMin" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve">
<path fill="#231F20" d="M59.994,34.876L45.239,13.16l-0.259-0.1c-0.061-0.023-5.892-2.185-9.626,3.669l1.498,0.957
c2.58-4.044,6.26-3.326,7.244-3.046l13.142,19.342c-1.787-0.407-4.691-0.884-8.496-0.884c-3.776,0-7.66,0.474-11.54,1.413
l-0.669,0.162l-0.012,0.847c-3.482-1.494-7.326-0.527-9.183,0.124l-0.018-0.971l-0.668-0.162c-3.877-0.939-7.761-1.413-11.538-1.413
c-3.563,0-6.338,0.419-8.145,0.807l13.09-19.268c0.986-0.291,4.647-1.023,7.242,3.048l1.498-0.957
c-3.734-5.854-9.568-3.692-9.626-3.669l-0.26,0.1L4.322,34.639l-0.316,0.114l0.015,7.628c-0.015,0.15-0.286,3.698,2.325,6.539
c2.049,2.232,5.243,3.364,9.492,3.364c4.433,0,7.688-1.129,9.669-3.356c2.297-2.581,1.966-5.659,1.957-5.7l-0.094-5.692
c1.307-0.519,5.68-1.976,9.119-0.049l-0.092,5.651c-0.015,0.131-0.346,3.209,1.954,5.79c1.981,2.228,5.235,3.356,9.669,3.356
c4.248,0,7.441-1.132,9.492-3.364c2.607-2.841,2.337-6.389,2.327-6.461l0.013-7.482L59.994,34.876z M24.161,47.767
c-1.635,1.819-4.433,2.739-8.323,2.739c-3.718,0-6.466-0.933-8.166-2.771c-2.084-2.252-1.882-5.177-1.878-5.278L5.783,36.03
c1.284-0.366,4.601-1.154,9.332-1.154c3.42,0,6.931,0.405,10.453,1.206l0.125,7.26C25.695,43.365,25.932,45.794,24.161,47.767z
M56.184,47.735c-1.701,1.838-4.448,2.771-8.164,2.771c-3.89,0-6.691-0.92-8.323-2.739c-1.774-1.973-1.534-4.401-1.528-4.511
l0.119-7.174c3.521-0.801,7.034-1.206,10.455-1.206c4.731,0,8.046,0.79,9.328,1.154l-0.006,6.5
C58.067,42.559,58.269,45.483,56.184,47.735z"/>
</svg>
</span><span>Overview <button>+</button></span></a></li>
<li><a href="#"><span class="ico">
<!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="64px" height="64px" preserveAspectRatio="xMinYMin" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve">
<path fill="#231F20" d="M52.336,31.847c-0.395-10.813-9.096-19.515-19.91-19.909V3.181h-1.523v8.757
c-10.813,0.395-19.514,9.096-19.91,19.909H3.18v1.521h7.813c0.396,10.814,9.097,19.516,19.91,19.911v7.54h1.523v-7.54
c10.814-0.396,19.515-9.097,19.91-19.911h8.484v-1.521H52.336z M50.813,33.368c-0.395,9.966-8.423,17.994-18.387,18.388l0-8.015
h-1.523v8.015c-9.963-0.394-17.993-8.425-18.386-18.388h7.742v-1.521h-7.742c0.394-9.962,8.423-17.991,18.386-18.386v6.797h1.523
v-6.797c9.964,0.395,17.993,8.424,18.387,18.386h-7.07v1.521H50.813z"/>
</svg>
</span><span>Location <button>+</button></span>
</a></li>
<li><a href="#"><span class="ico">
<!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="64px" height="64px" preserveAspectRatio="xMinYMin" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve">
<g>
<g>
<path fill="#020202" d="M32.003,4.247c-15.307,0-27.758,12.448-27.758,27.752c0,15.304,12.451,27.754,27.758,27.754
c15.301,0,27.752-12.45,27.752-27.754C59.755,16.695,47.304,4.247,32.003,4.247z M32.003,57.761
c-14.207,0-25.763-11.555-25.763-25.762c0-14.204,11.556-25.76,25.763-25.76c14.204,0,25.76,11.556,25.76,25.76
C57.763,46.206,46.207,57.761,32.003,57.761z"/>
</g>
<g>
<path fill="#020202" d="M32,11.74c-0.55,0-0.996,0.446-0.996,0.996v18.266H14.689c-0.55,0-0.996,0.446-0.996,0.999
c0,0.55,0.446,0.997,0.996,0.997H32c0.553,0,0.996-0.446,0.996-0.997V12.736C32.996,12.187,32.553,11.74,32,11.74z"/>
</g>
</g>
</svg>
</span><span>Live View <button>+</button></span></a></li>
<li><a href="#"><span class="ico">
<!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="1000px" height="20px" preserveAspectRatio="xMinYMin" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve">
<g>
<g>
<path stroke="#cfd2d9" stroke-width="4" d="M31.161,8.211c10.776,0,19.662,8.262,20.655,18.784l-7.863-5.654l-1.133,1.544l11.14,7.744l5.684-11.33
l-1.712-0.858l-4.213,8.397C52.647,15.333,42.941,6.293,31.161,6.293C18.665,6.293,8.5,16.46,8.5,28.957h1.915
C10.416,17.518,19.72,8.211,31.161,8.211z"/>
</g>
<g>
<path stroke="#cfd2d9" stroke-width="4" d="M32.839,55.79c-10.777,0-19.662-8.261-20.653-18.785l7.863,5.655l1.133-1.543l-11.001-7.963l-0.139,0.216
L4.356,44.703l1.714,0.858l4.211-8.397c1.073,11.506,10.779,20.543,22.557,20.543c12.499,0,22.663-10.167,22.663-22.662h-1.915
C53.587,46.484,44.28,55.79,32.839,55.79z"/>
</g>
</g>
</svg>
</span><span>Traffic <button>+</button></span></a></li>
<li><a href="#"><span class="ico ico-heart">
<!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="1000px" height="20px" preserveAspectRatio="xMinYMin" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve">
<g>
<path stroke="#cfd2d9" stroke-width="4" d="M57.839,12.447c-2.444-3.209-6.288-5.054-11.758-5.641c-0.443-0.045-0.91-0.073-1.391-0.073
c-4.85,0-9.683,2.275-12.69,5.89c-3.01-3.615-7.839-5.89-12.687-5.89c-0.481,0-0.945,0.027-1.397,0.073
c-5.462,0.587-9.304,2.432-11.75,5.64c-2.424,3.181-3.214,7.492-2.347,12.815c1.267,7.723,11.266,17.125,19.299,24.683l0.184,0.173
c2.237,2.106,4.17,3.926,5.429,5.28c0.17,0.191,1.704,1.87,3.383,1.87c1.69,0,3.19-1.705,3.327-1.869
c1.338-1.45,3.51-3.507,5.653-5.533c7.943-7.536,17.831-16.915,19.084-24.607C61.05,19.939,60.264,15.63,57.839,12.447z
M58.158,24.928c-1.142,7.013-10.751,16.129-18.512,23.489c-2.125,2.012-4.324,4.091-5.736,5.623
c-0.351,0.413-1.236,1.181-1.796,1.181c-0.543,0-1.427-0.706-1.867-1.198c-1.323-1.422-3.278-3.264-5.543-5.396l-0.184-0.174
C16.711,41.108,6.993,31.967,5.837,24.93c-0.771-4.745-0.114-8.528,1.957-11.245c2.084-2.736,5.468-4.321,10.334-4.845
c0.382-0.038,0.774-0.062,1.185-0.062c4.673,0,9.321,2.401,11.839,6.119L32,16.144l0.847-1.247
c2.518-3.718,7.167-6.119,11.844-6.119c0.409,0,0.804,0.024,1.179,0.062c4.873,0.523,8.256,2.108,10.343,4.846
C58.281,16.405,58.937,20.187,58.158,24.928z"/>
</g>
</svg>
</span><span>Demography <button>+</button></span></a></li>
</ul>
</nav>
</aside>
</body>@import url(https://fonts.googleapis.com/css?family=PT+Sans:400,700)
$dark: #16191f
$light: #383e49
$lighter: #4c515d
$border: #232831
$font: #cfd2d9
body
background: $dark
padding: 50px 0
font-size: 13px
font-weight: 400
font-family: Tahoma "PT Sans" sans-serif
aside
width: 50px
min-height: 400px
background: $light
border-radius: 5px
text-align: center
overflow: hidden
transition: all .2s ease-in
margin: 0 auto
&:hover
width: 200px
transition: all .3s ease-in
header
height: 60px
background: $lighter
text-align: center
border-bottom: 1px solid $border
box-shadow: 0 1px 1px 0 rgba(053, 059, 069, 1)
.ico
display: inline-block
margin-top: 15px
nav
ul
list-style: none
margin: 0
padding: 0
li
height: 50px
display: block
border-bottom: 1px solid $border
line-height: 50px
position: relative
a
width: 200px
color: #fff
text-decoration: none
display: block
position: relative
color: $font
border-left: 2px solid transparent
transition: all .2s ease-in
button
width: 20px
height: 20px
background: none
border: none
font-weight: bold
font-size: 15px
color: #fff568
transform: rotate(0deg)
transition: all .3s ease-in
position: absolute
left: 95px
top: 15px
outline: none
text-align: center
line-height: 20px
padding: 0
&:hover
transform: rotate(135deg)
transition: all .2s ease-in
color: #cfd2d9
&:after
content: " "
display: block
clear: both
visibility: hidden
line-height: 0
height: 0
&:hover
background: $lighter
color: #fff
border-left: 2px solid #cfd2d9
transition: all .2s ease-in
.ico
svg
path
stroke: #fff
span
display: block
float: left
white-space: nowrap
.ico
width: 50px
height: 50px
border-right: 1px solid $border
text-align: center
position: relative
svg
height: 20px
width: 1000px
position: absolute
top: 50%
left: 50%
margin-top: -10px
margin-left: -12px
path
stroke: #cfd2d9
stroke-width: 3
fill: #cfd2d9
rect
@extend path
+ span
position: absolute
left: 70px
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.