Horizontal sidebar toggle in Bootstrap


<div class="container">
  <!-- This button is used to show/hide the sidebar -->
  <button type="button" class="sidebar-toggle pull-left visible-xs">
    <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
  <!-- Layout -->
  <div class="row content">
    <div class="sidebar col-xs-12 col-sm-3 col-md-3 col-lg-3">Here the sidebar</div>
    <div class="main col-xs-12 col-sm-9 col-md-9 col-lg-9">Here the main content</div>


// For XS devices
@media (max-width: @screen-xs-max) { 
  // Sidebar with horizontal toggle
  // 1) Hide the sidebar, placing it out of browser window
  // 2) Clicking .sidebar-toggle button the JS apply the .open-sidebar class which shows the sidebar
    @offset: 300px;
    overflow: hidden;

      position: relative;
      left: 0px;
      transition: all 0.25s ease-out;
      // Move the sidebar inside the window
        left: @offset;
      // Move the sidebar off the window
        position: absolute;
        top: 0;
        left: -@offset;
  } // end Sidebar horizontal toggle



// Applica la classe active che mostra la sidebar
$(document.body).on('click', 'button.sidebar-toggle', function() {


Category BootstrapCategory CoffeescriptCategory DrupalCategory GravCategory HTMLCategory JavascriptCategory JoomlaCategory jQueryCategory LaravelCategory MagentoCategory PHPCategory SharePointCategory SpringCategory ThymeleafCategory WordPressCategory Workflow


Developed and designed by Netgloo
© 2019 Netgloo