"panel"
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 lang='en' 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/jaca90/pen/vZJZMx" /> <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/twitter-bootstrap/3.3.7/css/bootstrap.min.css'><link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css'> <style class="cp-pen-styles">@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,700&subset=latin-ext"); html, body { height: 100%; width: 100%; } body { margin: 0; padding: 0; font-family: "Open Sans"; font-size: 14px; font-weight: 400; overflow: hidden; background-color: #ececec; color: #102c58; } * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } ::-webkit-input-placeholder { color: #c3c3c3; } h1 { font-size: 24px; } h2 { font-size: 20px; } h3 { font-size: 18px; } .u-list { margin: 0; padding: 0; list-style: none; } .u-input { outline: 0; border: 1px solid #d0d0d0; padding: 5px 10px; height: 35px; font-size: 12px; -webkit-border-radius: 10px; border-radius: 10px; background-clip: padding-box; } .c-badge { font-size: 10px; font-weight: 700; min-width: 17px; padding: 5px 4px; border-radius: 100px; display: block; line-height: 0.7; color: #fff; text-align: center; white-space: nowrap; background-color: #f91605; } .c-badge--header-icon { position: absolute; bottom: -9px; } .tooltip { width: 120px; } .tooltip-inner { padding: 8px 10px; color: #fff; text-align: center; background-color: #051835; font-size: 12px; border-radius: 3px; } .tooltip-arrow { border-right-color: #051835 !important; } .hamburger-toggle { position: relative; padding: 0; background: transparent; border: 1px solid transparent; cursor: pointer; order: 1; } .hamburger-toggle [class*='bar-'] { display: block; background: #102c58; -webkit-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .2s ease all; transition: .2s ease all; border-radius: 2px; height: 2px; width: 24px; margin-bottom: 4px; } .hamburger-toggle [class*='bar-']:nth-child(2) { width: 18px; } .hamburger-toggle [class*='bar-']:last-child { margin-bottom: 0; width: 12px; } .hamburger-toggle.is-opened { left: 3px; } .hamburger-toggle.is-opened [class*='bar-'] { background: #102c58; } .hamburger-toggle.is-opened .bar-top { -webkit-transform: rotate(45deg); transform: rotate(45deg); -webkit-transform-origin: 15% 15%; transform-origin: 15% 15%; } .hamburger-toggle.is-opened .bar-mid { opacity: 0; } .hamburger-toggle.is-opened .bar-bot { -webkit-transform: rotate(45deg); transform: rotate(-45deg); -webkit-transform-origin: 15% 95%; transform-origin: 15% 95%; width: 24px; } .hamburger-toggle:focus { outline-width: 0; } .hamburger-toggle:hover [class*='bar-'] { background: #f5642d; } .header-icons-group { display: flex; order: 3; margin-left: auto; height: 100%; border-left: 1px solid #cccccc; } .header-icons-group .c-header-icon:last-child { border-right: 0; } .c-header-icon { position: relative; display: flex; float: left; width: 70px; height: 100%; align-items: center; justify-content: center; line-height: 1; cursor: pointer; border-right: 1px solid #cccccc; } .c-header-icon i { font-size: 18px; line-height: 40px; } .c-header-icon--in-circle { border: 1px solid #d0d0d0; border-radius: 100%; } .c-header-icon:hover i { color: #f5642d; } .l-header { padding-left: 70px; position: fixed; top: 0; right: 0; z-index: 10; width: 100%; background: #ffffff; -webkit-transition: padding 0.5s ease-in-out; -moz-transition: padding 0.5s ease-in-out; -ms-transition: padding 0.5s ease-in-out; -o-transition: padding 0.5s ease-in-out; transition: padding 0.5s ease-in-out; } .l-header__inner { height: 100%; width: 100%; display: flex; height: 70px; align-items: center; justify-content: stretch; border-bottom: 1px solid; border-color: #cccccc; } .sidebar-is-expanded .l-header { padding-left: 220px; } .c-search { display: flex; height: 100%; width: 350px; } .c-search__input { border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-right: 0; flex-basis: 100%; height: 100%; border: 0; font-size: 14px; padding: 0 20px; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .c-dropdown { opacity: 0; text-align: left; position: absolute; flex-direction: column; display: none; width: 300px; top: 30px; right: -40px; background-color: #fff; overflow: hidden; min-height: 300px; border: 1px solid #d0d0d0; -webkit-border-radius: 10px; border-radius: 10px; background-clip: padding-box; -webkit-box-shadow: 0px 5px 14px -1px #cecece; -moz-box-shadow: 0px 5px 14px -1px #cecece; box-shadow: 0px 5px 14px -1px #cecece; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .l-sidebar { width: 70px; position: absolute; z-index: 10; left: 0; top: 0; bottom: 0; background: #102c58; -webkit-transition: width 0.5s ease-in-out; -moz-transition: width 0.5s ease-in-out; -ms-transition: width 0.5s ease-in-out; -o-transition: width 0.5s ease-in-out; transition: width 0.5s ease-in-out; } .l-sidebar .logo { width: 100%; height: 70px; display: flex; align-items: center; justify-content: center; background-color: #051835; } .l-sidebar .logo .logo__txt { font-size: 26px; line-height: 1; color: #fff; text-align: center; font-weight: 700; } .l-sidebar__content { height: 100%; position: relative; } .sidebar-is-expanded .l-sidebar { width: 220px; } .c-menu > ul { display: flex; flex-direction: column; } .c-menu > ul .c-menu__item { color: #fff; max-width: 100%; overflow: hidden; } .c-menu > ul .c-menu__item__inner { display: flex; flex-direction: row; align-items: center; min-height: 60px; position: relative; cursor: pointer; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .c-menu > ul .c-menu__item__inner:before { position: absolute; content: " "; height: 0; width: 2px; left: 0; top: 50%; margin-top: -18px; background-color: #5f9cfd; opacity: 0; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .c-menu > ul .c-menu__item.is-active .c-menu__item__inner { border-left-color: #5f9cfd; background-color: #1e3e6f; } .c-menu > ul .c-menu__item.is-active .c-menu__item__inner i { color: #5f9cfd; } .c-menu > ul .c-menu__item.is-active .c-menu__item__inner .c-menu-item__title span { color: #5f9cfd; } .c-menu > ul .c-menu__item.is-active .c-menu__item__inner:before { height: 36px; opacity: 1; } .c-menu > ul .c-menu__item:not(.is-active):hover .c-menu__item__inner { background-color: #f5642d; border-left-color: #f5642d; } .c-menu > ul .c-menu__item i { flex: 0 0 70px; font-size: 18px; font-weight: normal; text-align: center; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .c-menu > ul .c-menu__item .c-menu-item__expand { position: relative; left: 100px; padding-right: 20px; margin-left: auto; -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } .sidebar-is-expanded .c-menu > ul .c-menu__item .c-menu-item__expand { left: 0px; } .c-menu > ul .c-menu__item .c-menu-item__title { flex-basis: 100%; padding-right: 10px; position: relative; left: 220px; opacity: 0; -webkit-transition: all 0.7s ease-in-out; -moz-transition: all 0.7s ease-in-out; -ms-transition: all 0.7s ease-in-out; -o-transition: all 0.7s ease-in-out; transition: all 0.7s ease-in-out; } .c-menu > ul .c-menu__item .c-menu-item__title span { font-weight: 400; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .sidebar-is-expanded .c-menu > ul .c-menu__item .c-menu-item__title { left: 0px; opacity: 1; } .c-menu > ul .c-menu__item .c-menu__submenu { background-color: #051835; padding: 15px; font-size: 12px; display: none; } .c-menu > ul .c-menu__item .c-menu__submenu li { padding-bottom: 15px; margin-bottom: 15px; border-bottom: 1px solid; border-color: #072048; color: #5f9cfd; } .c-menu > ul .c-menu__item .c-menu__submenu li:last-child { margin: 0; padding: 0; border: 0; } main.l-main { width: 100%; height: 100%; padding: 70px 0 0 70px; -webkit-transition: padding 0.5s ease-in-out; -moz-transition: padding 0.5s ease-in-out; -ms-transition: padding 0.5s ease-in-out; -o-transition: padding 0.5s ease-in-out; transition: padding 0.5s ease-in-out; } main.l-main .content-wrapper { padding: 25px; height: 100%; } main.l-main .content-wrapper .page-content { border-top: 1px solid #d0d0d0; padding-top: 25px; } main.l-main .content-wrapper--with-bg .page-content { background: #fff; border-radius: 3px; border: 1px solid #d0d0d0; padding: 25px; } main.l-main .page-title { font-weight: 400; margin-top: 0; margin-bottom: 25px; } .sidebar-is-expanded main.l-main { padding-left: 220px; } </style></head><body> <body class="sidebar-is-reduced"> <header class="l-header"> <div class="l-header__inner clearfix"> <div class="c-header-icon js-hamburger"> <div class="hamburger-toggle"><span class="bar-top"></span><span class="bar-mid"></span><span class="bar-bot"></span></div> </div> <div class="c-header-icon has-dropdown"><span class="c-badge c-badge--header-icon animated shake">87</span><i class="fa fa-bell"></i> <div class="c-dropdown c-dropdown--notifications"> <div class="c-dropdown__header"></div> <div class="c-dropdown__content"></div> </div> </div> <div class="c-search"> <input class="c-search__input u-input" placeholder="Search..." type="text"/> </div> <div class="header-icons-group"> <div class="c-header-icon basket"><span class="c-badge c-badge--header-icon animated shake">12</span><i class="fa fa-shopping-basket"></i></div> <div class="c-header-icon logout"><i class="fa fa-power-off"></i></div> </div> </div> </header> <div class="l-sidebar"> <div class="logo"> <div class="logo__txt">D</div> </div> <div class="l-sidebar__content"> <nav class="c-menu js-menu"> <ul class="u-list"> <li class="c-menu__item is-active" data-toggle="tooltip" title="Flights"> <div class="c-menu__item__inner"><i class="fa fa-plane"></i> <div class="c-menu-item__title"><span>Flights</span></div> </div> </li> <li class="c-menu__item has-submenu" data-toggle="tooltip" title="Modules"> <div class="c-menu__item__inner"><i class="fa fa-puzzle-piece"></i> <div class="c-menu-item__title"><span>Modules</span></div> <div class="c-menu-item__expand js-expand-submenu"><i class="fa fa-angle-down"></i></div> </div> <ul class="c-menu__submenu u-list"> <li>Payments</li> <li>Maps</li> <li>Notifications</li> </ul> </li> <li class="c-menu__item has-submenu" data-toggle="tooltip" title="Statistics"> <div class="c-menu__item__inner"><i class="fa fa-bar-chart"></i> <div class="c-menu-item__title"><span>Statistics</span></div> </div> </li> <li class="c-menu__item has-submenu" data-toggle="tooltip" title="Gifts"> <div class="c-menu__item__inner"><i class="fa fa-gift"></i> <div class="c-menu-item__title"><span>Gifts</span></div> </div> </li> <li class="c-menu__item has-submenu" data-toggle="tooltip" title="Settings"> <div class="c-menu__item__inner"><i class="fa fa-cogs"></i> <div class="c-menu-item__title"><span>Settings</span></div> </div> </li> </ul> </nav> </div> </div> </body> <main class="l-main"> <div class="content-wrapper content-wrapper--with-bg"> <h1 class="page-title">Dashboard</h1> <div class="page-content">Content goes here</div> </div> </main> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script><script src='https://use.fontawesome.com/2188c74ac9.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script> <script >"use strict"; var Dashboard = function () { var global = { tooltipOptions: { placement: "right" }, menuClass: ".c-menu" }; var menuChangeActive = function menuChangeActive(el) { var hasSubmenu = $(el).hasClass("has-submenu"); $(global.menuClass + " .is-active").removeClass("is-active"); $(el).addClass("is-active"); // if (hasSubmenu) { // $(el).find("ul").slideDown(); // } }; var sidebarChangeWidth = function sidebarChangeWidth() { var $menuItemsTitle = $("li .menu-item__title"); $("body").toggleClass("sidebar-is-reduced sidebar-is-expanded"); $(".hamburger-toggle").toggleClass("is-opened"); if ($("body").hasClass("sidebar-is-expanded")) { $('[data-toggle="tooltip"]').tooltip("destroy"); } else { $('[data-toggle="tooltip"]').tooltip(global.tooltipOptions); } }; return { init: function init() { $(".js-hamburger").on("click", sidebarChangeWidth); $(".js-menu li").on("click", function (e) { menuChangeActive(e.currentTarget); }); $('[data-toggle="tooltip"]').tooltip(global.tooltipOptions); } }; }(); Dashboard.init(); //# sourceURL=pen.js </script> </body></html>

Related: See More

Gaia Bootstrap Template Pro
animated sinin and signup panel. animated login and registeration page, popup,
Register form, html bootstrap4 registration form card panel
Filter elements, sidebar filter panel bootstrap 4

Questions / Comments: