"mobile"
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/matheusxaviersi/pen/xbmevK?limit=all&page=15&q=mobile" /> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'><script src='https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js'></script> <style class="cp-pen-styles">/*Fontawesome Iconfont*/ @import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css); @import url("https://fonts.googleapis.com/css?family=Inconsolata"); /*Montserrat, Open Sans*/ @import url(https://fonts.googleapis.com/css?family=Roboto:400,300); * { margin: 0; padding: 0; } html, body { width: 100%; height: 100%; background: #333; } .wrapper { width: 645px; height: 500px; margin: 35px auto 0 auto; } h1 { color: white; font: 300 40px Inconsolata; width: 300px; padding: 30px; float: left; } .mobile { float: left; position: relative; box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.5); overflow: hidden; } /*Hiding the checkbox*/ #tm { display: none; } /*Content area*/ .mobile section { background: url("https://storage.googleapis.com/content.codealkemy.co/app/images/100037_bryce.jpg"); background-color: #303F9F; width: 285px; height: 500px; position: relative; transition: all 0.25s; } .mobile section label { outline: none; color: teal; font: bold 14px Inconsolata; text-align: center; border: 2px solid teal; border-radius: 4px; display: block; padding: 10px 0; width: 25%; position: absolute; left: 20%; top: 100px; cursor: pointer; text-transform: uppercase; transition: all 0.4s ease; } .mobile section label:after { content: ''; width: 5px; height: 10px; background-color: salmon; } /*Nav styles*/ .sidenav { background: teal; width: 150px; position: absolute; left: 0; top: 0; bottom: 0; padding-top: 100px; } .sidenav li { list-style-type: none; transition: all .5s; } .sidenav li:hover { background: #ff5722; } .sidenav a { color: white; text-decoration: none; } .sidenav b { font: bold 12px/48px Inconsolata; display: block; opacity: 0; transform: translateX(50px); transition: all 0.4s; } .sidenav i { display: block; width: 50px; float: left; font-size: 16px; line-height: 48px; text-align: center; } /*Animation controls using checkbox hack*/ /*Animate content area to the right*/ section { transform-origin: right; } #tm:checked ~ section { transform: translateX(150px); } /*Animate links from right to left + fade in effect*/ #tm:checked ~ .sidenav b { opacity: 1; transform: translateX(0); } #tm:checked ~ section label { width: 30%; border-radius: 10%; width: 10%; } #tm:checked ~ section label span { display: none; } #tm:checked ~ section label i { margin-left: -10%; transform: rotate(180deg); } /*Adding delay to link animation - in multiples of .08s*/ /*One can use jQuery also for creating the delayed effect. But I will stick to manual CSS.*/ #tm:checked ~ .sidenav li:nth-child(1) b { transition-delay: 0.08s; } #tm:checked ~ .sidenav li:nth-child(2) b { transition-delay: 0.16s; } #tm:checked ~ .sidenav li:nth-child(3) b { transition-delay: 0.24s; } #tm:checked ~ .sidenav li:nth-child(4) b { transition-delay: 0.32s; } #tm:checked ~ .sidenav li:nth-child(5) b { transition-delay: 0.40s; } #tm:checked ~ .sidenav li:nth-child(6) b { transition-delay: 0.48s; } #fbm { visibility: hidden; } .madewith { color: #727272; } .madewith .heart { color: salmon; } .madewith a { color: #FFFFFF; } </style></head><body> <div class="wrapper"> <h1>Off Canvas Menu with Animated Links</h1> <div class="mobile"> <!-- Checkbox to toggle the menu --> <input type="checkbox" id="tm" /> <!-- The menu --> <ul class="sidenav"> <li><a href="#"><i class="fa fa-check"></i><b>Tasks</b></a></li> <li><a href="#"><i class="fa fa-inbox"></i><b>Messages</b></a></li> <li><a href="#"><i class="fa fa-pencil"></i><b>New Post</b></a></li> <li><a href="#"><i class="fa fa-cog"></i><b>Settings</b></a></li> <li><a href="#"><i class="fa fa-star"></i><b>Starred</b></a></li> <li><a href="#"><i class="fa fa-power-off"></i><b>Logout</b></a></li> </ul> <!-- Content area --> <section> <!-- Label for #tm checkbox --> <label for="tm"><span>menu</span> <i class="fa fa-chevron-right"></i></label> </section> </div> </div> <span class="madewith">Made with <i class="fa fa-heart heart"></i> By <a href="http://mugfoundation.com">Matheus Silva</a> <span id="fbm">Happy bithday father!!</span></span> <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 src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script> <script >(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-61157304-1', 'auto'); ga('send', 'pageview'); var d = new Date(); if(d.getMonth() == 4 && d.getDate() == 31) { $("#fbm").css("visibility", 'visible'); } //# sourceURL=pen.js </script> </body></html>

Questions / Comments: