"sideNav"
Bootstrap 3.0.0 Snippet by assholefaceman

<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 ----------> <body> <nav> <div class='link-wrapper'> <div class='link-container'> <div class='hum-container'> <div class='bar2'> </div> <div class='bar-mid'> </div> <div class='bar3'> </div> </div> <!-- ////logo and title --> <div class='lgo'> <div class='img-holder'> <img src="123.png"/> </div> <div class='title-holder'> <span>Patrick Chua</span> </div> </div> <!-- word navigations --> <ul id='words'> <li class='w-lnk'><a href="#">HOME</a></li> <li class='w-lnk'><a href="#">PORTFOLIO</a></li> <li class='w-lnk'><a href="#">CONTACT</a></li> <li class='w-lnk'><a href="#">ABOUT</a></li> </ul> <!-- icon navigation --> <ul id='icons'> <li><a href="#"><i class="fa fa-home fa-2x"></i></a></li> <span class='nav_txt'>Home</span> <li><a href="#"><i class="fa fa-briefcase fa-2x"></i></a></li> <span class='nav_txt'>Portfolio</span> <li><a href="#"><i class="fa fa-envelope fa-2x"></i></a></li> <span class='nav_txt'>Contact</span> <li><a href="#"><i class="fa fa-info-circle fa-2x"></i></a></li> <span class='nav_txt'>About</span> </ul> </div> </div> </nav> <section> <div class='main-container'> <!-- put your contents here --> <h1>Hello! I'am</h1> <p> Greatly cottage thought fortune no mention he. Of mr certainty arranging am smallness by conveying. Him plate you allow built grave. Sigh sang nay sex high yet door game. She dissimilar was favourable unreserved nay expression contrasted saw. Past her find she like bore pain open. Shy lose need eyes son not shot. Jennings removing are his eat dashwood. Middleton as pretended listening he smallness perceived. Now his but two green spoil drift. Friendship contrasted solicitude insipidity in introduced literature it. He seemed denote except as oppose do spring my. Between any may mention evening age shortly can ability regular. He shortly sixteen of colonel colonel evening cordial to. Although jointure an my of mistress servants am weddings. Age why the therefore education unfeeling for arranging. Above again money own scale maids ham least led. Returned settling produced strongly ecstatic use yourself way. Repulsive extremity enjoyment she perceived nor. </p> </section> </body>
@font-face { font-family: proxi; src: url(fonts/proximanova-regular-webfont.ttf); } @font-face { font-family: hironde; src: url(fonts/HirondellesdesAlpes_0.ttf); } * { margin: 0; padding: 0; } .hum-container { margin-top: 10px; cursor: pointer; } .bar2 { border-radius: 10px; width: 25px; background-color: white; height: 4px; margin: 3px auto 0 auto; } .bar-mid { border-radius: 10px; width: 25px; background-color: white; height: 4px; margin: 3px auto 0 auto; } .bar3 { border-radius: 10px; width: 25px; background-color: white; height: 4px; margin: 3px auto 0 auto; } .link-container::-webkit-scrollbar { width: 6px; } .link-container::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.4); } .link-container::-webkit-scrollbar-thumb { -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.4); } .link-container { position: fixed; top: 0; width: 200px; background-color: #0090ff; height: 100%; overflow-y: auto; } .lgo { margin-top: 40px; } .img-holder { text-align: center; } .title-holder { text-align: center; font-family: hironde; font-size: 2.5em; color: white; } .w-lnk { list-style: none; text-align: center; margin-top: 10px; } .w-lnk a { color: white; display: block; padding: 10px; padding-left: 0; font-weight: 100; letter-spacing: 1.5px; font-family: proxi; } .w-lnk a, .w-lnk a:active, .w-lnk a:visited, .w-lnk a:focus { text-decoration: none; color: white; } .w-lnk a:hover { text-decoration: none; color: #0090ff; } #words > li:hover { background-color: white; } #icons { margin-top: 70px; } #icons li { margin-top: 20px; text-align: center; } .fa { color: white; } .nav_txt { font-family: proxi; letter-spacing: 1px; display: block; text-align: center; position: relative; right: 100%; margin: 10px auto 0 auto; font-size: .8em; color: white; } /*section{ padding-left:20px; } */ .main-container { margin-left: 65px; }
var flag = false; var hum = document.getElementsByClassName('hum-container'); var lgo = document.getElementsByClassName('img-holder'); var nav = document.getElementsByClassName('link-container')[0]; var nav_txt = document.getElementsByClassName('nav_txt'); var bar2 = document.getElementsByClassName('bar2')[0]; var links = document.getElementById('words'); var iconLink = document.getElementById('icons'); var ttleHolder = document.getElementsByClassName('title-holder'); var ttleHolder2 = document.getElementById('title-holder2'); var bar2 = document.getElementsByClassName('bar2')[0]; var barMid = document.getElementsByClassName('bar-mid')[0]; var bar3 = document.getElementsByClassName('bar3')[0]; var ic = document.getElementsByClassName('fa'); var main_container = document.getElementsByClassName('main-container')[0]; lgo[0].style.display = 'none'; ttleHolder[0].style.display = 'none'; words.style.display = 'none'; nav.style.width = '60px'; function easeInOut(val){ for(var i = 0; i<nav_txt.length;i++){ nav_txt[i].style.right = val; nav_txt[i].style.transition = .3+"s"; } } for(var i = 0; i<ic.length;i++){ ic[i].onmouseover = function(){ this.style.transition = ".3s"; this.style.transform = "scale(1.3)"; } ic[i].onmouseleave = function(){ this.style.transition = ".3s"; this.style.transform = "scale(1)"; } } nav.onmouseover = function(){ easeInOut(0) } nav.onmouseleave = function(){ easeInOut(100 + "%") } function toggle(){ nav.style.transition = .5 + "s"; if(!flag){ lgo[0].style.display = 'block'; ttleHolder[0].style.display = 'block'; nav.style.width = '200px'; main_container.style.marginLeft = 215 + 'px'; main_container.style.transition = ".3s"; words.style.display = 'block'; iconLink.style.display = 'none'; bar2.style.margin = 3 + "px 0 0 0"; barMid.style.margin = 3 + "px 0 0 0"; bar3.style.margin = 3 + "px 0 0 0"; hum[0].style.float = 'right'; hum[0].style.marginRight = "10px"; barMid.style.visibility = 'hidden'; bar2.style.transform="rotate(-45deg) "; bar2.style.transition = ".3s"; bar3.style.transform="rotate(45deg) translate(-8px, -8px)"; bar3.style.transition = ".3s"; flag = true; } else{ lgo[0].style.display = 'none'; ttleHolder[0].style.display = 'none'; nav.style.width = '60px'; main_container.style.marginLeft = 65 + 'px'; words.style.display = 'none'; iconLink.style.display = 'block'; bar2.style.margin = "3px auto 0 auto"; barMid.style.margin = "3px auto 0 auto"; bar3.style.margin = "3px auto 0 auto"; hum[0].style.float = 'none'; hum[0].style.marginRight = "0"; barMid.style.visibility = 'visible'; bar2.style.transform="rotate(0deg) "; bar3.style.transform="rotate(0deg) translate(0)" flag = false; } } function upDown(){ if(!flag){ bar2.style.transform = "rotate(-25deg)" ; bar2.style.transition = .4 + "s"; } else{ bar2.style.transform = "rotate(0)" ; bar3.style.transform="rotate(0) translate(0)"; barMid.style.visibility = "visible"; bar2.style.transition = .4 + "s"; } } function leave(){ if(!flag) bar2.style.transform = "rotate(0deg)"; else{ bar2.style.transform="rotate(-45deg) "; bar3.style.transform="rotate(45deg) translate(-8px, -8px)"; barMid.style.visibility = "hidden"; } } hum[0].addEventListener('mouseleave',leave); hum[0].addEventListener('mouseover',upDown); hum[0].addEventListener('click',toggle);

Related: See More


Questions / Comments: