"css"
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 lang='en' 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/ravenous/pen/sdAqm?limit=all&page=58&q=css" /> <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css'><script src='https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js'></script> <style class="cp-pen-styles">@import url(https://fonts.googleapis.com/css?family=Sansita+One); /* CUT FROM HERE */ @import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,700); * { box-sizing:border-box; outline:0; } body { background: #EEE; font-family: 'Open Sans', sans-serif; font-size:13px; } a, li { transition: all 0.5s ease; -webkit-transition: all 0.5s ease; } a {color:white; text-decoration:none;} li {list-style-type: none;} nav { width: 140px; height: auto; float:left; position:relative; background:#333; margin:0 auto; padding: 10px 0; color: white; line-height:30px; border-radius:5px; box-shadow: -2px 1px 3px 0px rgba(0, 0, 0, 0.5); } nav ul li { position:relative; padding: 0 20px; } nav ul li:hover { background: crimson; border-left: 5px solid #B31131; } nav ul li:hover:before { content: ''; border-color: transparent #EEE transparent transparent ; right: 0; border-width:10px; position: absolute; border-style: solid; top: 5px; } /* TO HERE */ .wrapper { width:450px; margin:80px auto; } header { width:260px; height: 140px; padding-top:45px; float:left; font-family: 'Sansita One'; font-weight: 400; font-size: 28px; text-align: center; color: crimson; line-height:28px; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4); } header p { font-size: 15px; line-height: 15px; margin-left:70px; } footer { width:100%; height:50px; float:left; overflow:hidden; margin-top:80px; } footer > p { line-height:40px; vertical-align:middle; color: #333; font-size:11px; text-align:center; } footer a:link, footer a:visited, footer a:active { color:crimson; text-decoration:none; } footer a:hover { width:200px; color: white; background: crimson; } .active { background: crimson; border-left: 5px solid #B31131; } .active:before { content: ''; border-color: transparent #EEE transparent transparent ; right: 0; border-width:10px; position: absolute; border-style: solid; top: 5px; }</style></head><body> <div class="wrapper"> <header>Vertical Menu <p>with CSS Shapes</p> </header> <!-- CUT FROM HERE --> <nav role='navigation'> <ul> <li class="active"><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Clients</a></li> <li><a href="#">Contact Us</a></li> </ul> </nav> <!-- TO HERE --> </div> <footer> <p><i class="fa fa-coffee"></i> Coded & Designed by <a href="https://codepen.io/ravenous/" target="_blank"> Ravenous</a> [Franco Moya]</p> </footer> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script >// Coded & Designed by Ravenous // If you going to use this pen // I recommend you to add Eric Meyer’s “Reset CSS” 2.0 // and Prefix Free for a better performance. // https://meyerweb.com/eric/tools/css/reset/ // https://leaverou.github.com/prefixfree/ $('nav li').hover(function () { $('nav li:first-child').toggleClass("active"); }); //# sourceURL=pen.js </script> </body></html>

Related: See More

Now UI Kit

Questions / Comments: