"res test2"
Bootstrap 3.3.0 Snippet by neunygph

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ----------> <div id="wrapper"> <div class="overlay"></div> <!-- Sidebar --> <nav class="navbar navbar-inverse navbar-fixed-top" id="sidebar-wrapper" role="navigation"> <ul class="nav sidebar-nav"> <li class="sidebar-brand"> <a href="#"> Brand </a> </li> <li> <a href="#">Home</a> </li> <li> <a href="#">About</a> </li> <li> <a href="#">Events</a> </li> <li> <a href="#">Team</a> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Works <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li class="dropdown-header">Dropdown heading</li> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li><a href="#">Separated link</a></li> <li><a href="#">One more separated link</a></li> </ul> </li> <li> <a href="#">Services</a> </li> <li> <a href="#">Contact</a> </li> <li> <a href="https://twitter.com/maridlcrmn">Follow me</a> </li> </ul> </nav> <!-- /#sidebar-wrapper --> <!-- Page Content --> <div id="page-content-wrapper"> <button type="button" class="hamburger is-closed" data-toggle="offcanvas"> <span class="hamb-top"></span> <span class="hamb-middle"></span> <span class="hamb-bottom"></span> </button> <div class="container"> <div class="row"> <div class="col-lg-5 col-md-5 col-sm-8 col-xs-9 bhoechie-tab-container"> <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 bhoechie-tab-menu"> <div class="list-group"> <a href="javascript:void(0);" title="amazon" class="list-group-item text-center authlog"><span id="amazonnav" style="background-image: url(https://d1rwozpuswnigs.cloudfront.net/Content/themes/images/amzn.png);"></span></a> <a href="javascript:void(0);" title="google" class="list-group-item text-center authlog"><span id="googlenav" style="background-image: url(https://d1rwozpuswnigs.cloudfront.net/Content/themes/images/google.png);"></span></a> <a href="javascript:void(0);" title="one" class="list-group-item text-center authlog"><span id="onenav" style="background-image: url(https://d1rwozpuswnigs.cloudfront.net/Content/themes/images/onenav.png);"></span></a> <a href="javascript:void(0);" title="dropbox" class="list-group-item text-center authlog"><span id="dropboxnav" style="background-image: url(https://d1rwozpuswnigs.cloudfront.net/Content/themes/images/dropbox.png);"></span></a> <a href="javascript:void(0);" title="facebook" class="list-group-item text-center authlog"><span id="facebooknav" style="background-image: url(https://d1rwozpuswnigs.cloudfront.net/Content/themes/images/facebook.png);"></span></a> <a href="javascript:void(0);" title="instagram" class="list-group-item text-center authlog"><span id="instagramnav" style="background-image: url(https://d1rwozpuswnigs.cloudfront.net/Content/themes/images/instagram.png);"></span></a> </div> </div> <div class="col-lg-9 col-md-9 col-sm-9 col-xs-9 bhoechie-tab"> <div class="bhoechie-tab-content active"> <center> <div class="loginScreen"><div id="AmazonLoginLogo" class="authlog" title="amazon"></div></div> </center> </div> <div class="bhoechie-tab-content"> <center> <div class="loginScreen"><div id="GoogleLoginLogo" class="authlog" title="google"></div></div> </center> </div> <div class="bhoechie-tab-content"> <center> <div class="loginScreen"><div id="OneLoginLogo" class="authlog" title="one"></div></div> </center> </div> <div class="bhoechie-tab-content"> <center> <div class="loginScreen"><div id="DropboxLoginLogo" class="authlog" title="dropbox"></div></div> </center> </div> <div class="bhoechie-tab-content"> <center> <div class="loginScreen"><div id="FacebookLoginLogo" class="authlog" title="facebook"></div></div> </center> </div> <div class="bhoechie-tab-content"> <center> <div class="loginScreen"><div id="InstagramLoginLogo" class="authlog" title="instagram"></div></div> </center> </div> </div> </div> </div> </div> </div> <!-- /#page-content-wrapper --> </div> <!-- /#wrapper -->
body { position: relative; overflow-x: hidden; } body, html { height: 100%;} .nav .open > a, .nav .open > a:hover, .nav .open > a:focus {background-color: transparent;} /*-------------------------------*/ /* Wrappers */ /*-------------------------------*/ #wrapper { padding-left: 0; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } #wrapper.toggled { padding-left: 220px; } #sidebar-wrapper { z-index: 1000; left: 220px; width: 0; height: 100%; margin-left: -220px; overflow-y: auto; overflow-x: hidden; background: #1a1a1a; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } #sidebar-wrapper::-webkit-scrollbar { display: none; } #wrapper.toggled #sidebar-wrapper { width: 220px; } #page-content-wrapper { width: 100%; padding-top: 70px; } #wrapper.toggled #page-content-wrapper { position: absolute; margin-right: -220px; } /*-------------------------------*/ /* Sidebar nav styles */ /*-------------------------------*/ .sidebar-nav { position: absolute; top: 0; width: 220px; margin: 0; padding: 0; list-style: none; } .sidebar-nav li { position: relative; line-height: 20px; display: inline-block; width: 100%; } .sidebar-nav li:before { content: ''; position: absolute; top: 0; left: 0; z-index: -1; height: 100%; width: 3px; background-color: #1c1c1c; -webkit-transition: width .2s ease-in; -moz-transition: width .2s ease-in; -ms-transition: width .2s ease-in; transition: width .2s ease-in; } .sidebar-nav li:first-child a { color: #fff; background-color: #1a1a1a; } .sidebar-nav li:nth-child(2):before { background-color: #ec1b5a; } .sidebar-nav li:nth-child(3):before { background-color: #79aefe; } .sidebar-nav li:nth-child(4):before { background-color: #314190; } .sidebar-nav li:nth-child(5):before { background-color: #279636; } .sidebar-nav li:nth-child(6):before { background-color: #7d5d81; } .sidebar-nav li:nth-child(7):before { background-color: #ead24c; } .sidebar-nav li:nth-child(8):before { background-color: #2d2366; } .sidebar-nav li:nth-child(9):before { background-color: #35acdf; } .sidebar-nav li:hover:before, .sidebar-nav li.open:hover:before { width: 100%; -webkit-transition: width .2s ease-in; -moz-transition: width .2s ease-in; -ms-transition: width .2s ease-in; transition: width .2s ease-in; } .sidebar-nav li a { display: block; color: #ddd; text-decoration: none; padding: 10px 15px 10px 30px; } .sidebar-nav li a:hover, .sidebar-nav li a:active, .sidebar-nav li a:focus, .sidebar-nav li.open a:hover, .sidebar-nav li.open a:active, .sidebar-nav li.open a:focus{ color: #fff; text-decoration: none; background-color: transparent; } .sidebar-nav > .sidebar-brand { height: 65px; font-size: 20px; line-height: 44px; } .sidebar-nav .dropdown-menu { position: relative; width: 100%; padding: 0; margin: 0; border-radius: 0; border: none; background-color: #222; box-shadow: none; } /*-------------------------------*/ /* Hamburger-Cross */ /*-------------------------------*/ .hamburger { position: fixed; top: 20px; z-index: 999; display: block; width: 32px; height: 32px; margin-left: 15px; background: transparent; border: none; } .hamburger:hover, .hamburger:focus, .hamburger:active { outline: none; } .hamburger.is-closed:before { content: ''; display: block; width: 100px; font-size: 14px; color: #fff; line-height: 32px; text-align: center; opacity: 0; -webkit-transform: translate3d(0,0,0); -webkit-transition: all .35s ease-in-out; } .hamburger.is-closed:hover:before { opacity: 1; display: block; -webkit-transform: translate3d(-100px,0,0); -webkit-transition: all .35s ease-in-out; } .hamburger.is-closed .hamb-top, .hamburger.is-closed .hamb-middle, .hamburger.is-closed .hamb-bottom, .hamburger.is-open .hamb-top, .hamburger.is-open .hamb-middle, .hamburger.is-open .hamb-bottom { position: absolute; left: 0; height: 4px; width: 100%; } .hamburger.is-closed .hamb-top, .hamburger.is-closed .hamb-middle, .hamburger.is-closed .hamb-bottom { background-color: #1a1a1a; } .hamburger.is-closed .hamb-top { top: 5px; -webkit-transition: all .35s ease-in-out; } .hamburger.is-closed .hamb-middle { top: 50%; margin-top: -2px; } .hamburger.is-closed .hamb-bottom { bottom: 5px; -webkit-transition: all .35s ease-in-out; } .hamburger.is-closed:hover .hamb-top { top: 0; -webkit-transition: all .35s ease-in-out; } .hamburger.is-closed:hover .hamb-bottom { bottom: 0; -webkit-transition: all .35s ease-in-out; } .hamburger.is-open .hamb-top, .hamburger.is-open .hamb-middle, .hamburger.is-open .hamb-bottom { background-color: #1a1a1a; } .hamburger.is-open .hamb-top, .hamburger.is-open .hamb-bottom { top: 50%; margin-top: -2px; } .hamburger.is-open .hamb-top { -webkit-transform: rotate(45deg); -webkit-transition: -webkit-transform .2s cubic-bezier(.73,1,.28,.08); } .hamburger.is-open .hamb-middle { display: none; } .hamburger.is-open .hamb-bottom { -webkit-transform: rotate(-45deg); -webkit-transition: -webkit-transform .2s cubic-bezier(.73,1,.28,.08); } .hamburger.is-open:before { content: ''; display: block; width: 100px; font-size: 14px; color: #fff; line-height: 32px; text-align: center; opacity: 0; -webkit-transform: translate3d(0,0,0); -webkit-transition: all .35s ease-in-out; } .hamburger.is-open:hover:before { opacity: 1; display: block; -webkit-transform: translate3d(-100px,0,0); -webkit-transition: all .35s ease-in-out; } /*-------------------------------*/ /* Overlay */ /*-------------------------------*/ .overlay { position: fixed; display: none; width: 100%; height: 100%; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(250,250,250,.8); z-index: 1; } /*-------------------------------*/ /* Body */ /*-------------------------------*/ /* bhoechie tab */ div.bhoechie-tab-container{ z-index: 10; background-color: #ffffff; padding: 0 !important; border-radius: 4px; -moz-border-radius: 4px; border:1px solid #ddd; margin-top: 20px; -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175); box-shadow: 0 6px 12px rgba(0,0,0,.175); -moz-box-shadow: 0 6px 12px rgba(0,0,0,.175); background-clip: padding-box; opacity: 0.97; filter: alpha(opacity=97); width:100%; } .bhoechie-tab{ width:84%; } div.bhoechie-tab-menu{ padding-right: 0; padding-left: 0; padding-bottom: 0; width:72px; } div.bhoechie-tab-menu div.list-group{ margin-bottom: 0; width:72px; } div.bhoechie-tab-menu div.list-group>a{ margin-bottom: 0; } div.bhoechie-tab-menu div.list-group>a .glyphicon, div.bhoechie-tab-menu div.list-group>a .fa { color: #5A55A3; } div.bhoechie-tab-menu div.list-group>a:first-child{ border-top-right-radius: 0; -moz-border-top-right-radius: 0; } div.bhoechie-tab-menu div.list-group>a:last-child{ border-bottom-right-radius: 0; -moz-border-bottom-right-radius: 0; } div.bhoechie-tab-menu div.list-group>a.active, div.bhoechie-tab-menu div.list-group>a.active .glyphicon, div.bhoechie-tab-menu div.list-group>a.active .fa{ background-color: #5A55A3; background-image: #5A55A3; color: #ffffff; } div.bhoechie-tab-menu div.list-group>a.active:after{ content: ''; position: absolute; left: 100%; top: 50%; margin-top: -13px; border-left: 0; border-bottom: 13px solid transparent; border-top: 13px solid transparent; border-left: 10px solid #5A55A3; } div.bhoechie-tab-content{ background-color: #ffffff; /* border: 1px solid #eeeeee; */ padding-left: 20px; padding-top: 10px; } div.bhoechie-tab div.bhoechie-tab-content:not(.active){ display: none; } /* Custom */ #amazonnav, #onenav, #googlenav, #facebooknav, #dropboxnav, #instagramnav{ height:40px; width:40px; display:inline-block; background-size:100% 100%; } #AmazonLoginLogo{ background-image: url("https://d1rwozpuswnigs.cloudfront.net/Content/themes/images/amazonlogscreen.png"); width:213px; height:56px; cursor:pointer; } #OneLoginLogo{ background-image: url("https://d1rwozpuswnigs.cloudfront.net/Content/themes/images/onelogscreen.png"); width:213px; height:56px; cursor:pointer; background-size:100%; } #GoogleLoginLogo{ background-image: url("https://d1rwozpuswnigs.cloudfront.net/Content/themes/images/googlelogscreen.png"); width:213px; height:60px; cursor:pointer; background-size:100%; } #DropboxLoginLogo{ background-image: url("https://d1rwozpuswnigs.cloudfront.net/Content/themes/images/dropboxlogscreen.png"); width:213px; height:60px; cursor:pointer; background-size:100% 100%; } #FacebookLoginLogo{ background-image: url("https://d1rwozpuswnigs.cloudfront.net/Content/themes/images/facebooklogscreen.png"); width:213px; height:60px; cursor:pointer; background-size:100% 100%; } #InstagramLoginLogo{ background-image: url("https://d1rwozpuswnigs.cloudfront.net/Content/themes/images/instagramlogscreen.png"); width:213px; height:60px; cursor:pointer; background-size:100% 100%; } .container{ width:100% !important; }
$(document).ready(function () { var trigger = $('.hamburger'), overlay = $('.overlay'), isClosed = false; trigger.click(function () { hamburger_cross(); }); function hamburger_cross() { if (isClosed == true) { overlay.hide(); trigger.removeClass('is-open'); trigger.addClass('is-closed'); isClosed = false; } else { overlay.show(); trigger.removeClass('is-closed'); trigger.addClass('is-open'); isClosed = true; } } $('[data-toggle="offcanvas"]').click(function () { $('#wrapper').toggleClass('toggled'); }); //body script $("div.bhoechie-tab-menu>div.list-group>a").click(function(e) { e.preventDefault(); $(this).siblings('a.active').removeClass("active"); $(this).addClass("active"); var index = $(this).index(); $("div.bhoechie-tab>div.bhoechie-tab-content").removeClass("active"); $("div.bhoechie-tab>div.bhoechie-tab-content").eq(index).addClass("active"); }); });

Related: See More


Questions / Comments: