Mobilizer Filter Panel Interaction

In this example below you will see how to do a Mobilizer Filter Panel Interaction with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by seanmateer, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright seanmateer ©
  • HTML
  • CSS
  • JavaScript
    <script type="text/javascript" src="//use.typekit.net/rdv7feq.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>

<header>
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/169362/mobilizer-logo.png">
</header>
<div class="toolbar"></div>
<div class="sidebar">
  <button>OPEN</button>
  <div class="inner-sidebar">
    <div class="filter-panel">
      <div class="filter-group">
        <h2>Operating System</h2>
        <ul class="filters">
          <li>uno</li>
          <li>uno</li>
          <li>uno</li>
          <li>uno</li>
        </ul>
      </div>
      <div class="filter-group">
        <h2>Form factor</h2>
        <ul class="filters">
          <li>uno</li>
          <li>uno</li>
          <li>uno</li>
          <li>uno</li>
        </ul>
      </div>
      <div class="filter-group">
        <h2>brand</h2>
        <ul class="filters">
          <li>uno</li>
          <li>uno</li>
          <li>uno</li>
          <li>uno</li>
        </ul>
      </div>
    </div>
  </div>
</div>

/*Downloaded from https://www.codeseek.co/seanmateer/mobilizer-filter-panel-interaction-YPbzMY */
    body{
  font-family: 'proxima-nova', sans-serif;
}

@mixin transition($property, $time, $method) {
    transition: $property $time $method;
}
@mixin delay($time){
  transition-delay: $time;
}

$cubic: cubic-bezier(.175,.885,.32,1.275); 
$cubic-out: cubic-bezier(.68,-.55,.265,1.55);
$bkg: #2b2c2c;
$filter: #1B1B1B;
$panel-width: 300px;
$blue: #01adb6;

header{
  height: 50px;
  background-color: black;
  img{
    width: 200px;
    height: auto;
    margin: 7px 20px;
  }
}
.toolbar{
  position: absolute;
  z-index: -1;
  top: 50px;
  width: 100vw;
  height: 40px;
  background-color: #e1e1e1;
}

.sidebar{
  @include transition(all, .5s, cubic-bezier(.64,.07,0,1));
  @include delay(.5s);
  display: block;
  width: $panel-width + 20px;
  height: 40px;
  background-color: #2b2c2c;
  overflow:hidden;
  
  button{
    text-align: center;
    color: white;
    border: 0px;
    background-color: $blue;
    width: 100%;
    height: 40px;
    outline: 0px;
  }
  
  .inner-sidebar{
    padding: 10px;
    width: $panel-width;
  }
  
  .filter-group{
    display: block;
    overflow: hidden;
    height: auto;
    margin-bottom: 20px;
   
    h2{
      @include transition(all, .4s, $cubic);
      @include delay(.4s);
      opacity: 0;
      color: white;
      text-transform: lowercase;
      font-variant: small-caps;
      letter-spacing: .02em;
      font-weight: 300;
      border-bottom: 1px solid white;
      position: relative;
      top: -40px;
    }
  }
  
  .filters{
    width: 100%;
    padding: 0;
    margin: 0;
    list-style-type: none;
  } 

  li{
    text-align: center;
    color: white;
    background-color: $filter;
    float: left;
    width: $panel-width/2-5;
    padding: 10px 0;
    margin-bottom: 10px;
    
    
    @include transition(all, .6s, $cubic);
    @include delay(.1s);
    position: relative;
    left: -200px;
    opacity: 0;

    &:nth-child(even){
      @include transition(all, .6s, $cubic);
      @include delay(.25s);
      position: relative;
      left: -300px;
      margin-left: 10px;
    }

  }
  
  &.active{
    @include transition(all, .9s, $cubic);
    height: 100vh;
    
    li{
        @include transition(all, .5s, $cubic);
        @include delay(.5s);
        margin-left: 0px;
        left: 0px;
        opacity: 1;
        
       &:nth-child(even){
         @include delay(.3s);
          margin-left: 10px;
       }
    }
    
    .filter-group h2{
      @include transition(all, .5s, $cubic);
      top: 0;
      opacity: 1;
    }
    
  }
}





/*Downloaded from https://www.codeseek.co/seanmateer/mobilizer-filter-panel-interaction-YPbzMY */
    $('button').on('click', function(){
  $('.sidebar').toggleClass('active');
});

Comments