"Bootstrap 3 dynamic sidenav"
Bootstrap 3.3.0 Snippet by ovi100

Post to Facebook Tweet this

<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Bootstrap 3 Sidenav</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <body> <div class="two-col-layout" id="two-col-layout"> <div class="top-navbar"> <nav class="navbar navbar-inverse navbar-fixed-top"> <div class="container-fluid"> <ul class="nav navbar-nav"> <li><a class="toggle-sidenav"><i class="fa fa-bars"></i></a></li> </ul> <div class="navbar-header"> <a class="navbar-brand" href="#">Dashboard</a> </div> <div class="nav navbar-nav" id="search-box"> <input type="text" class="form-control" placeholder="Search"> </div> <ul class="nav navbar-nav navbar-right"> <li><a href="#"><i class="fa fa-bell-o"></i><span class="badge">5</span></a></li> <li><a href="#"><i class="fa fa-cog"></i></a></li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-user-o"></i></a> <ul class="dropdown-menu"> <li><a href="#">Profile</a></li> <li><a href="#">Account</a></li> <li><a href="#">Feedback</a></li> <li class="divider"></li> <li><a href="#">Settings</a></li> <li><a href="#">Logout</a></li> </ul> </li> </ul> </div> </nav> </div> <div class="sidenav" id="sidenav"> <div class="sidenav-items"> <ul id="accordion"> <li class="panel"> <a data-toggle="collapse" data-parent="#accordion" href="#ml1"> <i class="fa fa-home"></i> Home </a> <div id="ml1" class="collapse in"> <ul id="accordion-sub"> <li><a href="#">Dashboard 1</a></li> <li><a href="#">Dashboard 2</a></li> </ul> </div> </li> <li class="panel"> <a data-toggle="collapse" data-parent="#accordion" href="#ml2"> <i class="fa fa-moon-o"></i> Themes </a> <div id="ml2" class="collapse"> <ul id="accordion-sub"> <li><a href="#">Light</a></li> <li><a href="#">Dark</a></li> </ul> </div> </li> <li><a href="#"><i class="fa fa-comments-o"></i> Chat</a></li> <li class="panel"> <a data-toggle="collapse" data-parent="#accordion" href="#ml3"> <i class="fa fa-file-text-o"></i> Pages </a> <div id="ml3" class="collapse"> <ul id="accordion-sub"> <li><a href="#">Billing</a></li> <li><a href="#">Pricing</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Contact Us</a></li> <li><a href="#">FAQ</a></li> </ul> </div> </li> </ul> </div> </div> <div class="main-content"> <div class="container-fluid"> <div id="myCarousel" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner"> <div class="item active"> <img class="img-responsive" src="https://placehold.jp/200/cccccc/999999/1920x750.png?text=Image%201%0A1920%20x%20500"> </div> <div class="item"> <img class="img-responsive" src="https://placehold.jp/200/cccccc/999999/1920x750.png?text=Image%201%0A1920%20x%20500"> </div> <div class="item"> <img class="img-responsive" src="https://placehold.jp/200/cccccc/999999/1920x750.png?text=Image%201%0A1920%20x%20500"> </div> </div> </div> <div class="collection"> <h3 class="text-center">Mens</h3> <div class="collection-slider"> <div class="owl-carousel owl-theme" id="collection-slider"> <div class="item"> <img src="https://placehold.jp/100/cccccc/999999/500x500.png?text=Image%201%0A500%20x%20500"> </div> <div class="item"> <img src="https://placehold.jp/100/cccccc/999999/500x500.png?text=Image%201%0A500%20x%20500"> </div> <div class="item"> <img src="https://placehold.jp/100/cccccc/999999/500x500.png?text=Image%201%0A500%20x%20500"> </div> <div class="item"> <img src="https://placehold.jp/100/cccccc/999999/500x500.png?text=Image%201%0A500%20x%20500"> </div> <div class="item"> <img src="https://placehold.jp/100/cccccc/999999/500x500.png?text=Image%201%0A500%20x%20500"> </div> <div class="item"> <img src="https://placehold.jp/100/cccccc/999999/500x500.png?text=Image%201%0A500%20x%20500"> </div> <div class="item"> <img src="https://placehold.jp/100/cccccc/999999/500x500.png?text=Image%201%0A500%20x%20500"> </div> <div class="item"> <img src="https://placehold.jp/100/cccccc/999999/500x500.png?text=Image%201%0A500%20x%20500"> </div> <div class="item"> <img src="https://placehold.jp/100/cccccc/999999/500x500.png?text=Image%201%0A500%20x%20500"> </div> <div class="item"> <img src="https://placehold.jp/100/cccccc/999999/500x500.png?text=Image%201%0A500%20x%20500"> </div> <div class="item"> <img src="https://placehold.jp/100/cccccc/999999/500x500.png?text=Image%201%0A500%20x%20500"> </div> <div class="item"> <img src="https://placehold.jp/100/cccccc/999999/500x500.png?text=Image%201%0A500%20x%20500"> </div> </div> </div> </div> </div> </div> </div> <!--jQuery--> <!-- Bootstrap JS--> <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/elevatezoom/3.0.8/jquery.elevatezoom.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script> </body> </html>
* { margin: 0; padding: 0; box-sizing: border-box; } a { cursor: pointer; } a:hover, a:focus { text-decoration: none; outline: 0; } .dropdown:hover > .dropdown-menu { display: block; } .two-col-layout { padding-top: 51.38px; padding-left: 250px; transition: padding-left 0.5s; } .two-col-layout .top-navbar #search-box { width: 15%; padding: 8px; margin-left: 5%; } .two-col-layout .top-navbar #search-box .form-control { border-radius: 0; box-shadow: none; } .two-col-layout .top-navbar #search-box .form-control:focus { border-color: #ccc; outline: 0; } .two-col-layout .top-navbar .badge { width: 18px; height: 18px; position: absolute; top: 8px; left: 23px; line-height: 10px; padding: 5px; vertical-align: middle; text-align: center; } .two-col-layout .sidenav { position: fixed; top: 51px; left: 0; height: 100vh; width: 250px; z-index: 10; background: #262626; transition: all 0.5s; } .two-col-layout .sidenav .sidenav-items ul { list-style: none; margin-left: 30px; padding: 15px 0; } .two-col-layout .sidenav .sidenav-items ul li { margin-bottom: 15px; background-color: transparent; } .two-col-layout .sidenav .sidenav-items ul li a { color: #9d9d9d; font-size: 16px; font-weight: 600; transition: color 0.5s; } .two-col-layout .sidenav .sidenav-items ul li a:hover { color: #fff; } .two-col-layout .sidenav .sidenav-items ul li #accordion-sub a { font-size: 15px; font-weight: 500; } .toggle-content { padding-left: 0; } .toggle-content .sidenav { width: 0; left: -300px; } /*# sourceMappingURL=demo.css.map */
$(document).ready(function() { var owl = $('#collection-slider'); owl.owlCarousel({ loop:true, margin:10, nav:true, responsiveBaseElement: '.main-content', responsive:{ 0:{ items:1 }, 600:{ items:3 }, 1000:{ items:4 } } }); $(".toggle-sidenav").click(function(event) { /* Act on the event */ $("#two-col-layout").toggleClass("toggle-content"); $('.main-content').one("webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend", function(event) { owl.trigger('refresh.owl.carousel'); }); }); });

Related: See More

Vue Argon Design System
Dynamic Sortable Tables
Bootstrap 4 Animated Dynamic Form
Dynamic Avatar Blur

Questions / Comments: