"mobile 2 top nav tab replace each other"
Bootstrap 3.0.0 Snippet by blackgirl

<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/cristina-silva/pen/BsJFE" /> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'><link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.min.css'> <style class="cp-pen-styles">body { background: #efefef; } ul:not(.browser-default) { padding-left: 1.5em; } .container { margin: 3em auto; width: 500px; } .screen { background: #ffffff; height: 200px; position: relative; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); -webkit-padding-start: 0; } .toolbar { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; width: 100%; color: white; box-sizing: border-box; background-color: #3f51b5; padding: 1.5em 2em; } .toolbar .toggle:hover { cursor: pointer; } .toolbar .toggle:after { content: ""; position: absolute; width: 0px; height: 0px; left: 15px; top: 15px; opacity: 1; border-radius: 100%; background-color: #fff; display: block; } .toolbar .toggle.anim:after { -webkit-transition: all 400ms cubic-bezier(0, 0.7, 0.5, 1); transition: all 400ms cubic-bezier(0, 0.7, 0.5, 1); width: 70px; height: 70px; left: 16px; top: 2px; opacity: 0; } .arrow, .menu { color: white; -webkit-transition: opacity .3s ease, -webkit-transform .5s ease; transition: opacity .3s ease, -webkit-transform .5s ease; transition: opacity .3s ease, transform .5s ease; transition: opacity .3s ease, transform .5s ease, -webkit-transform .5s ease; opacity: 1; position: absolute; } .arrow.out, .menu.out { opacity: 0; -webkit-transition: opacity .3s ease, -webkit-transform .5s ease; transition: opacity .3s ease, -webkit-transform .5s ease; transition: opacity .3s ease, transform .5s ease; transition: opacity .3s ease, transform .5s ease, -webkit-transform .5s ease; -webkit-transform: rotate(360deg); transform: rotate(360deg); -webkit-transform-origin: center center; transform-origin: center center; } .primary-icons { margin-right: calc(-100% + 3em); } .room, .add, .search, .download, .trash { padding-left: 1em; -webkit-transition: all .5s ease; transition: all .5s ease; opacity: 1; -webkit-transform: scale(1); transform: scale(1); } .hide-icons { -webkit-transition: all .5s ease; transition: all .5s ease; opacity: 0; -webkit-transform: scale(0); transform: scale(0); -webkit-transform-origin: center center; transform-origin: center center; } </style></head><body> <div class="container"> <div class="screen"> <ul class="toolbar"> <li id="toggle" class="toggle"> <i class="material-icons arrow out">arrow_back</i> <i class="material-icons menu">menu</i> </li> <li class="primary-icons"> <i class="material-icons add">add</i> <i class="material-icons search">search</i> <i class="material-icons room">room</i> </li> <li class="secondary-icons"> <i class="material-icons download hide-icons">file_download</i> <i class="material-icons trash hide-icons">delete</i> </li> </ul> </div> </div> <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() { var menu = $(".menu"); var arrow = $(".arrow"); var room = $(".room"); var add = $(".add"); var search = $(".search"); var download = $(".download"); var trash = $(".trash"); $(".toggle").on('click', function() { $.each([menu, arrow], function() { this.toggleClass('out'); }); $.each([add, search, download, trash, room], function() { this.toggleClass('hide-icons'); }); $(this).addClass('anim').delay(800).queue(function(next) { $(this).removeClass('anim'); next() }); }); }); //# sourceURL=pen.js </script> </body></html>

Related: See More


Questions / Comments: