"text"
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/ianfarb/pen/leBzD?limit=all&page=64&q=contact+" /> <style class="cp-pen-styles">@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:700,300); @import url(https://fonts.googleapis.com/css?family=Lily+Script+One); * { margin:0; padding:0; list-style: none; } html { min-width:480px; } body { background: url(http://del4yo.blogs.com/non_dairy_diary/files/white.jpg) center center; background-size:cover; } nav { width:150px; padding:0 25px 0 25px; background: url(http://gallery1.anivide.com/_full/11127_1362793285.jpg) left center; background-size: cover; position: fixed; top:0; height:100%; margin:0 0 0 -150px; -webkit-transition: .5s ease-in; -moz-transition: .5s ease-in; -o-transition: .5s ease-in; -ms-transition: .5s ease-in; transition: .5s ease-in; } nav.menushow .menu-btn { -webkit-transform: rotate(45deg) !important; -moz-transform: rotate(45deg) !important; -o-transform: rotate(45deg) !important; -ms-transform: rotate(45deg) !important; transform: rotate(45deg) !important; } .menushow { margin: 0; box-shadow:0 0 50px 0 rgba(0,0,0,.5); } nav ul { margin:60px 0 0 0; } nav a, .menu-btn a { color:#fff; font-size: 18px; font-family: 'Roboto Condensed', Arial, Helvetica, sans-serif; font-weight: 300; text-decoration: none; padding:10px 15px; display: block; -webkit-transition: .25s ease-in; -moz-transition: .25s ease-in; -o-transition: .25s ease-in; -ms-transition: .25s ease-in; transition: .25s ease-in; } nav a:hover { background: rgba(255,255,255,.125); } .menu-btn { position: absolute; right:8px; top:8px; -webkit-transition: .5s ease-in; -moz-transition: .5s ease-in; -o-transition: .5s ease-in; -ms-transition: .5s ease-in; transition: .5s ease-in; } .menu-btn a { font-family: Arial; font-weight: 900; font-size: 30px; text-align: center; width:30px; height:30px; padding:3px; } .menu-btn a:hover { background: none; } article { padding:50px 10% 0 20%; margin: 0 auto; width:70%; } h1 { font-family: 'Lily Script One', cursive; font-size:48px; text-align: center; margin: 0 0 15px 0; } h2 { font-family: 'Roboto Condensed', Arial, Helvetica, sans-serif; font-weight: 300; font-size:24px; text-transform: uppercase; margin: 0 0 15px 0; text-align: center; } p { font-family: 'Roboto Condensed', Arial, Helvetica, sans-serif; font-weight: 300; font-size:16px; line-height: 20px; margin: 0 0 15px 0; }</style></head><body> <nav> <div class="menu-btn"> <a href="#">+</a> </div> <ul> <li><a href="#">Home</a></li> <li><a href="#">Projects</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Contact</a></li> </ul> </nav> <article> <h1>JQuery Slide Out Menu</h1> <h2>Because I felt like it</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus congue augue at euismod adipiscing. Etiam eu ligula sed est varius venenatis. Nulla nec feugiat augue. Morbi venenatis metus vitae libero convallis ullamcorper.</p> <p>Aliquam enim felis, tincidunt hendrerit ipsum in, auctor aliquet tellus. Ut dignissim nisl sed libero pulvinar auctor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris interdum eros diam, et laoreet lorem adipiscing sit amet.</p> </article> <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 >$(document).ready(function(){ $(".menu-btn").click(function(event){ event.preventDefault(); $("nav").toggleClass("menushow"); }); }); //# sourceURL=pen.js </script> </body></html>

Related: See More

Get Shit Done Kit
Bootstrap Images to Left and Right with Text and Heading
Creating password field text hide show via a single class
JS Typewriter (Text Animation)

Questions / Comments: