"side nav"
Bootstrap 3.0.0 Snippet by evarevirus

Post to Facebook Tweet this

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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/nikhil/pen/yHLlm?limit=all&page=56&q=contact+" /> <style class="cp-pen-styles">@import url("//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.min.css"); .menu { position: fixed; top: 0; left: 0; height: 100%; list-style-type: none; margin: 0; padding: 0; background: #fff4f5; } .menu li a{ display:block; height:em; width:5em; text-indent:-500em; line-height:5em; text-align:center; color: #ff5c62; background: #fff4f5; position: relative; border-bottom: 1px solid #ffe2e3; transition: background 0.3s ease-in-out; } .menu li a:before { font-family: FontAwesome; speak: none; text-indent: 0em; position: absolute; top: 0; left: 0; width: 100%; height: 100%; font-size: 1.4em; } .menu li a.search:before { content: "\f002"; } .menu li a.archive:before { content: "\f187"; } .menu li a.pencil:before { content: "\f040"; } .menu li a.contact:before { content: "\f003"; } .menu li a.about:before { content: "\f007"; } .menu li a.home:before { content: "\f015"; } .menu li a:hover{ background: #ff5c62; color: #fff; } .menu li.current a { background: #ff5e5e; color: #fff; } .menu li a.active { background: #ff5e5e; color: #fff; } .menu li a.active:after{ position:absolute; left:5em; top:0; content:""; border:2.5em solid transparent; border-left-color:#ff5c62; border-width: 2.5em 1em } .menu li{ position:relative; } .menu li:after{ content: attr(title); position:absolute; left:5em; top:0; height:5em; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; text-transform:uppercase; background:#ff5c62; padding:2em; transition: all 0.3s ease-in-out; visibility:hidden; opacity:0; } .menu li:hover:after{ visibility:visible; opacity:1; } @media screen and (max-height: 34em){ .menu li{ font-size:70%; } }</style></head><body> <ul class="menu"> <li title="home"><a href="#" class="home">home</a></li> <li title="search"><a href="#" class="search">search</a></li> <li title="pencil"><a href="#" class="pencil">pencil</a></li> <li title="about"><a href="#" class="active about">about</a></li> <li title="archive"><a href="#" class="archive">archive</a></li> <li title="contact"><a href="#" class="contact">contact</a></li> </ul> </body></html>

Related: See More

Paper Kit
Bootstrap V4 Side Toggle and Fixed Top Menu (Responsive)
Side menu on hover
Fading Side Menu - Lets Focus on Content

Questions / Comments: