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;
  }
}

Use the following CSS to hide the text. This piece of CSS will hide the exceeded part and replace with some "..." instead.

.nowrap{
  white-space: nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

This will work with both fixed width and percentage width. See the sample below:

The text-overflow property determines how overflowed content that is not displayed is signaled to users. It can be clipped, display an ellipsis , or display a custom string.

But sometime it doesn't work. I encountered several problems when using it. So I list the problems here just in case somebody got the problem.

"text-overflow" will only apply to its PLAIN text child elements.
The text-overflow property determines how overflowed content that is not displayed is signaled to users. It can be clipped, display an ellipsis , or display a custom string.
The text-overflow property determines how overflowed content that is not displayed is signaled to users. It can be clipped, display an ellipsis , or display a custom string.
"text-overflow" will not apply to "table" element.

The text-overflow property determines how overflowed content that is not displayed is signaled to users. It can be clipped, display an ellipsis , or display a custom string.

Yiran's Seed Sanctuary

2015年10月17日星期六