<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/IanLunn/pen/NPapxy?depth=everything&limit=all&order=popularity&page=38&q=portfolio&show_forks=false" />
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<script src='https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js'></script>
<style class="cp-pen-styles">/* Resets */
body, ul {
margin: 0;
padding: 0;
}
/* Decor */
body {
background: #45163E;
}
.drawer {
position: absolute;
z-index: 10;
top: 0;
left: 0;
height: 100%;
padding: .4em 0;
background: #7D294E;
color: white;
text-align: center;
/* Remove 4px gap between <li> */
font-size: 0;
}
.drawer li {
pointer-events: none;
position: relative;
display: inline-block;
vertical-align: middle;
list-style: none;
line-height: 100%;
transform: translateZ(0);
}
.drawer a {
pointer-events: auto;
position: relative;
display: block;
min-width: 5em;
margin-bottom: .4em;
padding: .4em;
line-height: 100%;
/* Reset font-size */
font-size: 16px;
text-decoration: none;
color: white;
transition: background 0.3s;
}
.drawer a:active, .drawer a:focus {
background: #B44659;
}
.drawer i {
display: block;
margin-bottom: .2em;
font-size: 2em;
}
.drawer span {
font-size: .625em;
font-family: sans-serif;
text-transform: uppercase;
}
.drawer li:hover ul {
/* Open the fly-out menu */
transform: translateX(0);
background: #B44659;
/* Enable this if you wish to replicate hoverIntent */
}
.drawer > li {
display: block;
/* Add a shadow to the top-level link */
/* Show the shadow when the link is hovered over */
/* Fly out menus */
}
.drawer > li > a {
background: #7D294E;
}
.drawer > li:hover {
z-index: 100;
}
.drawer > li:hover a {
background: #B44659;
}
.drawer > li a:hover {
background: #F56356;
}
.drawer > li > a:after {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 100%;
width: 4px;
opacity: 0;
background: -moz-linear-gradient(left, rgba(0, 0, 0, 0.65) 0%, transparent 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(0, 0, 0, 0.65)), color-stop(100%, transparent));
background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.65) 0%, transparent 100%);
background: -o-linear-gradient(left, rgba(0, 0, 0, 0.65) 0%, transparent 100%);
background: -ms-linear-gradient(left, rgba(0, 0, 0, 0.65) 0%, transparent 100%);
background: linear-gradient(to right, rgba(0, 0, 0, 0.65) 0%, transparent 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=1 );
transition: opacity 0.5s;
}
.drawer > li:hover a:after {
opacity: 1;
}
.drawer > li ul {
position: absolute;
/* Stack below the top level */
z-index: -1;
top: 0;
left: 100%;
height: 100%;
width: auto;
white-space: nowrap;
/* Close the menus */
transform: translateX(-100%);
background: #B44659;
transition: 0.5s transform;
}
/**
* Not required for demo
*/
@keyframes circle {
50% {
transform: scale(1.26923);
}
}
@keyframes initials {
50% {
transform: translateY(-8px) translateZ(0);
}
}
.ild-ident {
position: absolute;
right: 20px;
bottom: 20px;
}
.ild-ident svg {
overflow: visible;
transform: translateZ(0);
}
.ild-ident svg .circle-holder {
transform: translate(-7px, -7px);
}
.ild-ident svg .circle {
transform: translate(7px, 7px);
fill: #7D294E;
}
.ild-ident svg.active .i {
animation: initials .4s ease-in-out;
}
.ild-ident svg.active .l {
animation: initials .4s .2s ease-in-out;
}
.ild-ident svg.active .circle {
animation: circle .5s .1s ease-in-out;
}
</style></head><body>
<ul class="drawer">
<li>
<a href="#">
<i class="fa fa-info-circle"></i>
<span>Info</span>
</a>
<ul>
<li>
<a href="https://ianlunn.co.uk/" target="_blank">
<i class="fa fa-folder-open"></i>
<span>Portfolio</span>
</a>
</li>
<li>
<a href="https://ianlunn.co.uk/about/" target="_blank">
<i class="fa fa-question-circle"></i>
<span>About</span>
</a>
</li>
<li>
<a href="https://ianlunn.co.uk/contact/" target="_blank">
<i class="fa fa-phone-square"></i>
<span>Contact</span>
</a>
</li>
</ul>
</li>
<li>
<a href="#">
<i class="fa fa-folder"></i>
<span>Projects</span>
</a>
<ul>
<li>
<a href="https://ianlunn.github.io/Hover/" target="_blank">
<i class="fa fa-flash"></i>
<span>Hover.css</span>
</a>
</li>
<li>
<a href="http://sequencejs.com/" target="_blank">
<i class="fa fa-ellipsis-h"></i>
<span>Sequence.js</span>
</a>
</li>
<li>
<a href="https://ianlunn.co.uk/plugins/jquery-parallax/" target="_blank">
<i class="fa fa-dot-circle-o"></i>
<span>jQuery Parallax</span>
</a>
</li>
</ul>
</li>
<li>
<a href="#">
<i class="fa fa-share-alt"></i>
<span>Social</span>
</a>
<ul>
<li>
<a href="https://codepen.io/IanLunn/" target="_blank">
<i class="fa fa-codepen"></i>
<span>CodePen</span>
</a>
</li>
<li>
<a href="https://twitter.com/IanLunn/" target="_blank">
<i class="fa fa-twitter"></i>
<span>Twitter</span>
</a>
</li>
<li>
<a href="https://github.com/IanLunn/" target="_blank">
<i class="fa fa-github"></i>
<span>GitHub</span>
</a>
</li>
<li>
<a href="https://ianlunn.co.uk/" target="_blank">
<i class="fa fa-globe"></i>
<span>Web</span>
</a>
</li>
</ul>
</li>
</ul>
<!-- Not required for demo -->
<div class="ild-ident">
<!-- "IL" logo Copyright (c) Ian Lunn Design Limited 2015 -->
<a href="https://codepen.io/IanLunn/" target="_blank" title="Ian Lunn">
<svg onmouseenter="el=this;el.classList.add('active');setTimeout(function(){el.classList.remove('active')},600);" xmlns="http://www.w3.org/2000/svg" width="52" height="52" viewBox="0 0 52 52">
<g class="circle-holder">
<path class="circle" fill="#2E96D6" d="M5.4 26c0-11.4 9.2-20.6 20.6-20.6s20.6 9.2 20.6 20.6c0 11.4-9.2 20.6-20.6 20.6s-20.6-9.2-20.6-20.6zm-5.4 0c0 14.4 11.6 26 26 26s26-11.6 26-26-11.6-26-26-26-26 11.6-26 26z"/>
</g>
<path class="i" fill="#fff" d="M15 22h9v16h-9v-16z"/>
<path class="l" fill="#fff" d="M28 14h9v24h-9v-24z"/>
</svg>
</a>
</div>
</body></html>
