"tab layout"
Bootstrap 3.0.0 Snippet by evarevirus

<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/hilotacker/pen/dXpeYg?limit=all&page=52&q=nav" /> <link href="https://fonts.googleapis.com/css?family=Cairo" rel="stylesheet"> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css'> <style class="cp-pen-styles">body, html { height: 100%; padding: 1.5rem; box-sizing: border-box; font-family: 'Cairo', sans-serif; } body { background: -webkit-radial-gradient(50% 16% circle, #c36fd4 32%, #332bab 88%); background: radial-gradient(circle at 50% 16%, #c36fd4 32%, #332bab 88%); } .wrapper { width: 100%; height: 100%; margin: auto; border-radius: 8px; background: #f0f0f0; position: relative; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); } header h1 { background: #f0f0f0; color: #555; padding: 1rem; border-radius: 8px 8px 0 0; box-shadow: 0 2px 4px -2px rgba(0, 0, 0, 0.3); position: relative; z-index: 8; } nav { width: 100%; background: -webkit-linear-gradient(315deg, #fcc274 0%, #eb48a1 100%); background: linear-gradient(135deg, #fcc274 0%, #eb48a1 100%); } @media (min-width: 769px) { nav { float: left; width: 96px; height: calc(100% - 3rem); border-radius: 0 0 0 8px; } } nav ul { display: -webkit-box; display: -ms-flexbox; display: flex; } @media (min-width: 769px) { nav ul { display: block; } } nav li { line-height: 3; padding: 0 1rem; border-right: 1px solid #f0f0f0; cursor: pointer; color: #fff; box-sizing: border-box; } @media (min-width: 769px) { nav li { border-bottom: 1px solid #f0f0f0; border-right: none; } } nav li.hover { background: rgba(255, 255, 255, 0.2); } nav li.pressed { background: rgba(255, 255, 255, 0.7); } nav li.currentPage { background: rgba(255, 255, 255, 0.5); } #contents { box-sizing: border-box; position: absolute; height: calc(100% - 6rem); width: 100%; top: 6rem; left: 0; border-radius: 0 0 8px 0; overflow: hidden; background: -webkit-linear-gradient(315deg, #1c1a30 0%, #38335d 100%); background: linear-gradient(135deg, #1c1a30 0%, #38335d 100%); } @media (min-width: 769px) { #contents { height: calc(100% - 3rem); width: calc(100% - 6rem); top: 3rem; left: 96px; } } article { position: absolute; height: 100%; width: 100%; padding: 2rem; box-sizing: border-box; background: -webkit-linear-gradient(315deg, #38335d 0%, #1c1a30 100%); background: linear-gradient(135deg, #38335d 0%, #1c1a30 100%); top: 0; left: -100%; } article.hide { -webkit-transition: left 0s 0.5s; transition: left 0s 0.5s; } article:nth-of-type(1) { z-index: 5; } article:nth-of-type(2) { z-index: 4; } article:nth-of-type(3) { z-index: 3; } article:nth-of-type(4) { z-index: 2; } article:nth-of-type(5) { z-index: 1; } article.show { -webkit-transition: left 0.5s; transition: left 0.5s; left: 0; z-index: 6; } article section { width: 100%; color: #fff; } article section h1 { font-size: 1.5rem; margin: 0 0 2rem 0; } </style></head><body> <div class="wrapper"> <header> <h1>Tab switch</h1> </header> <nav> <ul> <li class="gnav1">Tab1</li> <li class="gnav2">Tab2</li> <li class="gnav3">Tab3</li> <li class="gnav4">Tab4</li> </ul> </nav> <div class="contents" id="contents"> <div class="container"> <article id="page1" class="show top"> <section> <h1>Tab1 Title</h1> <p>This is tab one.</p> </section> </article> <article id="page2"> <section> <h1>Tab2 Title</h1> <p>This is tab two.</p> </section> </article> <article id="page3"> <section> <h1>Tab3 Title</h1> <p>This is tab three.</p> </section> </article> <article id="page4"> <section> <h1>Tab4 Title</h1> <p>This is tab four.</p> </section> </article> <article id="page5"> <section> <h1>Tab5 Title</h1> <p>This is tab five</p> </section> </article> </div> </div> </div> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://code.jquery.com/jquery-2.2.4.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js'></script> <script >$(document).ready(function(){ var item_num = $('nav li').length + 1; var btn_state = true; $('nav li').hover(function(){ $(this).addClass('hover'); },function(){ $(this).removeClass('hover'); }); $('nav li').on('click',function(){ if(btn_state){ btn_state = !btn_state; $('nav li').removeClass('currentPage'); $(this).addClass('currentPage'); var i = $('nav li').index(this); $('article').removeClass('show'); $('article').addClass('hide'); $('article').eq(i).addClass('show'); setTimeout(function(){ btn_state = !btn_state; },500); } }); }); //# sourceURL=pen.js </script> </body></html>

Related: See More


Questions / Comments: