Simple Sidebar Transition

Sidebars are responsive components that display various forms of information to the side of applications or sites. This approach is designed to fit in with the Bootstrap framework. Hence, Bootstrap components and JQuery are needed.

Default Sidebar

Default Sidebar works as same as .col-md-3 in Bootstrap grid system. But when the device width is less than its breakpoint size, it hides itself instead of Collapsing to start.

<div class="container">
  <div class="row">
    <div class="sidebar">
    </div>
    <div class="col-md-10">
    </div>
  </div>
</div>

Fixed to Top

The sidebar hides itself when the device width is less than its breakpoint size. And it can be toogled to show and hide the element via class changes.

Adjustment required

The fixed sidebar will overlay Bootstrap Navbar and create a gap when the screen scrolls down. So the following adjustments are needed.

Add .sidebar-fixed and include a .sidebar-container to contain content.
Add .navbar-fixed-top to navbar if available.
Add offsetting class .col-md-offset-2 to the right side.
Add padding to the top of the <body>. By default, the navbar is 50px high.
Set up toggle element via data-toogle-target attribute.

Example

<div class="container">
  <div class="row">
    <div class="sidebar sidebar-fixed">
      <button type="button" class="btn" data-toggle-target="#sidebar-fixed-1"><span class="glyphicon glyphicon-align-justify"></span></button>
      <div class="sidebar-container">
    </div>
    <div class="col-md-10 col-md-offset-2">
    </div>
  </div>
</div>

Javascript

Include the following code snippet to your page and replace the toggle element selector with your own. By default, it is .sidebar>.btn It requires JQuery.

+function($){
  function toggleSidebar(e) {
    $($(e.currentTarget).attr('data-toggle-target')).toggleClass('open');
  }

  $(document).on('click.sidebar', '.sidebar>.btn', toggleSidebar);
}(jQuery)

Inverted Fixed to Top

Modify to sidebar to have it collapse regardless deveice width by adding .sidebar-fixed-inverse.

<div class="container">
  <div class="row">
    <div class="sidebar sidebar-fixed-inverse">
      ...
    </div>
  </div>
</div>

Style sidebar

Include the following style to your page or stylesheet file to make it properly display.

.sidebar-fixed, .sidebar-fixed-inverse{
  background-color:#eee;
  position:fixed;
  top:51px;
  bottom:0;
  z-index:2;
  transition: left 0.3s;
  -moz-transition: left 0.3s; /* Firefox 4 */
  -webkit-transition: left 0.3s; /* Safari 和 Chrome */
  -o-transition: left 0.3s; /* Opera */
}
.sidebar>.btn{
  display:none;
  border-radius:0;
  background-color:#eee;
  border-color:#e0e0e0;
}
.sidebar-fixed>.btn, .sidebar-fixed-inverse>.btn{
  position:absolute;
  right:-40px;
  top:0;
 display:block;
}
.sidebar-fixed>.sidebar-container, .sidebar-fixed-inverse>.sidebar-container{
  overflow:auto;
  position:absolute;
  top:0;
  bottom:0;
  margin:0;
  width:100%;
}
.sidebar.open{
  left:0;
}
@media(min-width: 768px){
  .sidebar{
    display:none;
  }
  .sidebar-fixed, .sidebar-fixed-inverse{
    display:block;
    width:25%;
    left:-25%;
  }
}
@media(min-width: 992px){
  .sidebar{
    display:block;
    float:left;
    width:16.66666667%;
  }
  .sidebar-fixed, .sidebar-fixed-inverse{
    width:16.66666667%;
    left:-16.66666667%;
  }
  .sidebar-fixed{
    left:0;
  }
  .sidebar-fixed>.btn{
    display:none;
  }
}

Yiran's Seed Sanctuary

2015年10月17日星期六