"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/jexordexan/pen/zCJBG?limit=all&page=86&q=nav" /> <style class="cp-pen-styles">*{ margin: 0px; padding: 0px; font-family: 'Arial', sans-serif; color: inherit; } body { background:#abb7c1; } h1 { margin:50px; text-align:center; color:#fff; } nav { width:100%; margin:50px 0px; background:#EEE; display:block; } nav ul { float:left; width:70%; } nav li { display:inline-block; float:left; width:20%; height:70px; background:#333; color: #D93; text-align:center; -webkit-transition-duration: 50ms; } nav a { text-decoration:none; display:block; width:100%; height:100%; padding:25px 0px; text-wrap:none; } .bookend { float:left; width:15%; height:70px; background:#333; } nav li:hover { background:#444; color: #FFF; -webkit-transform: scale(1.1) translate(0px,5px); -webkit-box-shadow: 0px 3px 6px rgba(0,0,0,.3); -webkit-backface-visibility: hidden; } nav li:active { -webkit-transform: scale(1.05) translate(0px,3px); -webkit-box-shadow: 0px 2px 3px rgba(0,0,0,.3); } /* Mobile Formatting */ @media screen and (max-width:520px) { nav ul { width:100% } nav li { float:none; display:block; width:100%; height:50px; } .bookend { display:none; } nav a{ padding:15px; } }</style></head><body> <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.0/css/font-awesome.min.css" rel="stylesheet"> <h1>Ribbon Navigation</h1> <nav> <div class="bookend"></div> <ul> <li><a href="#"><i class="icon-home"></i> Home </a></li> <li><a href="#"><i class="icon-user"></i> About</a></li> <li><a href="#"><i class="icon-envelope"></i> Contact</a></li> <li><a href="#"><i class="icon-tag"></i> Products</a></li> <li><a href="#"><i class="icon-briefcase"></i> Portfolio</a></li> </ul> <div class="bookend"></div> </nav> </body></html>

Related: See More

Vue Light Bootstrap Dashboard

Questions / Comments: