"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/iamturner/pen/RaqoPX?limit=all&page=24&q=mobile" /> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'> <style class="cp-pen-styles">@import url(https://fonts.googleapis.com/css?family=Lato); * { font-family: inherit; -webkit-font-smoothing: antialiased; } html { font-size: 62.5%; font-family: 'Lato', sans-serif; } body { background: #1f252d; } .wrapper { height: 480px; width: 320px; background: #2e394b; overflow: hidden; position: relative; margin: 20px auto 0; } .menu-btn { position: absolute; z-index: 10; top: 0; left: 0; height: 70px; width: 54px; cursor: pointer; background: url(https://iamturner.co.uk/codepen/menu-icon.png) no-repeat center; background-size: 44px; } .menu-btn:active { opacity: 0.2; } section { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 8px 8px 0 0; -webkit-transition: -webkit-transform 0.3s; } section.one { background: #f75b5b; -webkit-transition-delay: 0s; } section.two { background: #c84051; -webkit-transition-delay: 0.05s; } section.three { background: #4f3462; -webkit-transition-delay: 0.1s; } section.four { background: #794d9a; -webkit-transition-delay: 0.15s; } section.after { -webkit-transform: translateY(100%); } h1 { color: white; font-weight: 500; font-size: 2rem; text-align: center; margin: 0; line-height: 70px; -webkit-user-select: none; } .page-one section.one { -webkit-transition-delay: 0s; } .page-one section.two { -webkit-transition-delay: 0.15s; } .page-one section.three { -webkit-transition-delay: 0.1s; } .page-one section.four { -webkit-transition-delay: 0.05s; } .page-two section.one { -webkit-transition-delay: 0s; } .page-two section.two { -webkit-transition-delay: 0.05s; } .page-two section.three { -webkit-transition-delay: 0.1s; } .page-two section.four { -webkit-transition-delay: 0.05s; } .menu-open section { cursor: pointer; } .menu-open section.one { -webkit-transform: translateY(70px); -webkit-transition-delay: 0.15s; } .menu-open section.one:active { background: #f86a6a; } .menu-open section.two { -webkit-transform: translateY(140px); -webkit-transition-delay: 0.1s; } .menu-open section.two:active { background: #cb4c5c; } .menu-open section.three { -webkit-transform: translateY(210px); -webkit-transition-delay: 0.05s; } .menu-open section.three:active { background: #57396c; } .menu-open section.four { -webkit-transform: translateY(280px); -webkit-transition-delay: 0s; } .menu-open section.four:active { background: #8152a4; } .menu-open.page-one section.one { -webkit-transition-delay: 0s; } .menu-open.page-one section.two { -webkit-transition-delay: 0.05s; } .menu-open.page-one section.three { -webkit-transition-delay: 0.1s; } .menu-open.page-one section.four { -webkit-transition-delay: 0.15s; } .menu-open.page-two section.one { -webkit-transition-delay: 0s; } .menu-open.page-two section.two { -webkit-transition-delay: 0.05s; } .menu-open.page-two section.three { -webkit-transition-delay: 0.1s; } .menu-open.page-two section.four { -webkit-transition-delay: 0.15s; } </style></head><body> <div class="wrapper"> <h1>Menu</h1> <a class="menu-btn" onclick="toggleMenu()"></a> <section class="one" onclick="goToPage(0)"> <h1>Profile</h1> </section> <section class="two" onclick="goToPage(1)"> <h1>Friends</h1> </section> <section class="three" onclick="goToPage(2)"> <h1>Messages</h1> </section> <section class="four" onclick="goToPage(3)"> <h1>Settings</h1> </section> </div> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script> <script >var pages = new Array('one', 'two', 'three', 'four'); function toggleMenu() { document.getElementsByClassName('wrapper')[0].classList.toggle('menu-open'); } function goToPage(page) { var wrapper = document.getElementsByClassName('wrapper')[0]; var sections = document.getElementsByTagName('section'); for (i = 0; i < sections.length; i++) {if (window.CP.shouldStopExecution(1)){break;} sections[i].classList.remove('before','after'); if (i > page) { sections[i].classList.add('after'); } } window.CP.exitedLoop(1); wrapper.classList.remove('menu-open','page-one','page-two'); wrapper.classList.add('page-' + pages[page]); } //# sourceURL=pen.js </script> </body></html>

Related: See More

Material Kit Pro
BS4 Login, Register FORM + Mobile
Mobile Nav Bar
Mobile-Friendly API Documentation

Questions / Comments: