<body>
<nav>
<div id="logo">LOGO</div>
<a href="#" title="Home">
<span class="fa fa-home"></span>
<span class="label">Home</span>
</a>
<a href="#" title="About" class="active">
<span class="fa fa-user"></span>
<span class="label">About</span>
</a>
<a href="#" title="Blog">
<span class="fa fa-pencil"></span>
<span class="label">Blog</span>
</a>
<a href="#" title="Contact">
<span class="fa fa-envelope"></span>
<span class="label">Contact</span>
</a>
</nav>
<section>
<h1>About</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae nunc eget orci iaculis auctor. In suscipit lacus nec lectus euismod, ut malesuada diam scelerisque. Donec convallis ligula et diam mattis pharetra. Cras odio felis, semper eu metus a, tristique tincidunt elit. Phasellus a gravida dui. In ultricies est ut accumsan aliquam. Nam tempor eros sed suscipit scelerisque.</p>
<p>Ut ornare malesuada velit, eu pretium leo fermentum quis. Sed interdum ante purus, et aliquam mi condimentum porta. Vivamus eget purus odio. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent lacinia ex nec odio dapibus, nec tincidunt enim lobortis. In risus neque, bibendum ut lorem a, vestibulum imperdiet est. In hac habitasse platea dictumst. Aenean quis sapien neque. Maecenas quis mollis sapien, varius fringilla risus.</p>
<p>Nam ultrices justo vitae augue consequat, vel dictum metus ultricies. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut bibendum felis quis porta fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean vestibulum dapibus diam at sagittis. Sed malesuada risus tellus, in dictum ligula varius iaculis. Cras sit amet aliquam nisi. Maecenas cursus, nibh nec vehicula congue, risus sem ultricies ipsum, vel fringilla mauris turpis non dolor. Sed euismod blandit risus, id imperdiet felis. Suspendisse cursus odio vel sapien elementum, quis commodo nunc elementum. Etiam finibus nibh in ante efficitur commodo.</p>
<p>Donec sagittis arcu non purus aliquet rutrum. Nunc lobortis felis arcu, eget molestie nunc faucibus id. Curabitur placerat turpis quis cursus commodo. Curabitur quis lacus nibh. Nunc lorem urna, laoreet eu tempus at, placerat quis nulla. Donec scelerisque luctus orci, eu faucibus neque rutrum in. Morbi eleifend euismod vestibulum.</p>
<p>Ut gravida tellus ante, vitae efficitur mauris tempus ac. In congue massa orci, vitae tempus libero consequat sed. Duis pellentesque orci quis vehicula lacinia. Quisque in nibh porttitor, pulvinar purus ut, congue nisi. Nunc ultricies facilisis gravida. Aliquam magna tellus, pharetra ac lacinia eget, vehicula non leo. Maecenas egestas risus ut orci luctus bibendum. Nullam semper vehicula ligula. Ut vel quam ut lacus pulvinar semper id et libero. Pellentesque sed auctor neque, quis facilisis augue. Quisque in urna mollis, egestas orci vitae, euismod velit. Nam iaculis commodo scelerisque. Praesent ut facilisis ante, et molestie tellus. Phasellus iaculis venenatis blandit. Curabitur velit ipsum, lobortis at dictum sit amet, blandit vel nulla.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae nunc eget orci iaculis auctor. In suscipit lacus nec lectus euismod, ut malesuada diam scelerisque. Donec convallis ligula et diam mattis pharetra. Cras odio felis, semper eu metus a, tristique tincidunt elit. Phasellus a gravida dui. In ultricies est ut accumsan aliquam. Nam tempor eros sed suscipit scelerisque.</p>
<p>Ut ornare malesuada velit, eu pretium leo fermentum quis. Sed interdum ante purus, et aliquam mi condimentum porta. Vivamus eget purus odio. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent lacinia ex nec odio dapibus, nec tincidunt enim lobortis. In risus neque, bibendum ut lorem a, vestibulum imperdiet est. In hac habitasse platea dictumst. Aenean quis sapien neque. Maecenas quis mollis sapien, varius fringilla risus.</p>
<p>Nam ultrices justo vitae augue consequat, vel dictum metus ultricies. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut bibendum felis quis porta fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean vestibulum dapibus diam at sagittis. Sed malesuada risus tellus, in dictum ligula varius iaculis. Cras sit amet aliquam nisi. Maecenas cursus, nibh nec vehicula congue, risus sem ultricies ipsum, vel fringilla mauris turpis non dolor. Sed euismod blandit risus, id imperdiet felis. Suspendisse cursus odio vel sapien elementum, quis commodo nunc elementum. Etiam finibus nibh in ante efficitur commodo.</p>
<p>Donec sagittis arcu non purus aliquet rutrum. Nunc lobortis felis arcu, eget molestie nunc faucibus id. Curabitur placerat turpis quis cursus commodo. Curabitur quis lacus nibh. Nunc lorem urna, laoreet eu tempus at, placerat quis nulla. Donec scelerisque luctus orci, eu faucibus neque rutrum in. Morbi eleifend euismod vestibulum.</p>
<p>Ut gravida tellus ante, vitae efficitur mauris tempus ac. In congue massa orci, vitae tempus libero consequat sed. Duis pellentesque orci quis vehicula lacinia. Quisque in nibh porttitor, pulvinar purus ut, congue nisi. Nunc ultricies facilisis gravida. Aliquam magna tellus, pharetra ac lacinia eget, vehicula non leo. Maecenas egestas risus ut orci luctus bibendum. Nullam semper vehicula ligula. Ut vel quam ut lacus pulvinar semper id et libero. Pellentesque sed auctor neque, quis facilisis augue. Quisque in urna mollis, egestas orci vitae, euismod velit. Nam iaculis commodo scelerisque. Praesent ut facilisis ante, et molestie tellus. Phasellus iaculis venenatis blandit. Curabitur velit ipsum, lobortis at dictum sit amet, blandit vel nulla.</p>
</section>
</body>@import url(https://fonts.googleapis.com/css?family=Raleway:400);
@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,100);
//------------------------------------
$nav-width-collapsed:4rem;
$nav-width-open:10rem;
//------------------------------------
*, *:before, *:after {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
body {
margin:0;
padding:0;
background:#eee;
font-family:Roboto,'Helvetica Neue', Helvetica, sans-serif;
}
nav {
position:fixed;
height:100vh;
width:$nav-width-collapsed;
background:#555;
overflow:hidden;
transition: width .3s ease;
&:hover, &.pinned {
width:$nav-width-open;
}
#logo {
background:#ff6600;
height:$nav-width-collapsed;
line-height:$nav-width-collapsed;
padding-left:.7rem;
}
a {
color:#EEE;
text-decoration:none;
display:table;
//padding:.8rem 0;
width:$nav-width-open;
&.active {
.fa{
border-left:3px solid #f60;
border-right:3px solid transparent;
}
}
&:hover {
background:#444;
color:#BEE0ff;
}
& .fa {
width:$nav-width-collapsed;
display:table-cell;
font-size:2rem;
padding:1rem 0;
text-align:center;
}
&.label {
display:table-cell;
}
}
}
section {
padding: 2rem 5rem 2rem $nav-width-collapsed+5;
min-height:100vh;
h1 { font-family:Raleway, Roboto, sans-serif; font-size:2.2rem; }
}
External CSS
This Pen doesn't use any external CSS resources.