"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/GjoreMilevski/pen/XdoagK?limit=all&page=71&q=nav" /> <style class="cp-pen-styles">html, body { height: 100%; width: 100%; } body { margin: 0; } #nav-container { position: fixed; height: 100%; width: 190px; background-color: aliceblue; z-index: 10; box-shadow: 1px 0 15px black; } nav { position: relative; width: 100%; height: 100%; top: 50%; text-transform: uppercase; text-decoration: none; } ul { list-style-type: none; height: 100%; padding: 0; text-align: center; } li:nth-child(1) { background-color: #D49C6A; } li:nth-child(2) { background-color: #804715; } li:nth-child(3) { background-color: #552800; } li { height: 16.6%; width: 100%; position: relative; } .nav-link { text-decoration: none; color: aliceblue; font-size: 1.5em; font-family: "Fjalla One", sans-serif; position: absolute; top: 50%; transform: translate(-50%, -25%); } a:nth-child(1):hover { color: #E6BA4E; } #main-logo img { position: fixed; z-index: 999; top: 20%; left: 95px; transform: translate(-47px); max-width: 100px; max-height: 100%; } .page { height: 100vh; } #home { background-color: aliceblue; } #about { background-color: #D49C6A; } #portfolio { background-color: #804715; } #contact { background-color: #552800; }</style></head><body> <html> <head> <meta charset="utf-8"> <title>Chic Vertical Nav</title> <link rel="stylesheet" type="text/css" href="styles.css"> <link href='https://fonts.googleapis.com/css?family=Fjalla+One' rel='stylesheet' type='text/css'> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> <script type="text/javascript" src="js/main.js"></script> </head> <body> <span id="main-logo"><a href=#home><img src="http://hnmag.ca/wp-content/uploads/2016/04/hand-155662_640.png"></a> </span> <div id="nav-container"> <nav> <ul> <li><a href="#about" class="nav-link">About</a></li> <li><a href="#portfolio" class="nav-link">Portfolio</a></li> <li><a href="#contact" class="nav-link">Contact</a></li> </ul> </nav> </div> <section id="main"> <article class="page" id="home"></article> <article class="page" id="about"></article> <article class="page" id="portfolio"></article> <article class="page" id="contact"></article> </section> </body> </html> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script> <script >function ScrollHandler(pageId) { var page = $('#' + pageId); var pageStart = page.offset().top; var pageJump = false; function scrollToPage() { pageJump = true; $('html, body').animate({ scrollTop: pageStart }, { duration: 1000, complete: function() { pageJump = false; } }); } window.addEventListener('wheel', function(event) { var viewStart = $(window).scrollTop(); if (!pageJump) { var pageHeight = page.height(); var pageStopPortion = pageHeight / 2; var viewHeight = $(window).height(); var viewEnd = viewStart + viewHeight; var pageStartPart = viewEnd - pageStart; var pageEndPart = (pageStart + pageHeight) - viewStart; var canJumpDown = pageStartPart >= 0; var stopJumpDown = pageStartPart > pageStopPortion; var canJumpUp = pageEndPart >= 0; var stopJumpUp = pageEndPart > pageStopPortion; var scrollingForward = event.deltaY > 0; if ( ( scrollingForward && canJumpDown && !stopJumpDown) || (!scrollingForward && canJumpUp && !stopJumpUp)) { event.preventDefault(); scrollToPage(); } } else { event.preventDefault(); } }); } new ScrollHandler('home'); new ScrollHandler('about'); new ScrollHandler('portfolio'); new ScrollHandler('contact'); //# sourceURL=pen.js </script> </body></html>

Related: See More

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

Questions / Comments: