"side bar"
Bootstrap 3.3.0 Snippet by aswanik11

<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>

Related: See More


Questions / Comments: