Cool-Hidden-Drawer.markdown

Cool Hidden Drawer

3d animated hidden drawer that is replacing a dropdown menu on a current project of mine!

A Pen by Matt Litherland on CodePen.

License.

index.html

<header class="center">
  <a class="open" href="#">Open my drawer!</a>
</header>

<div class="drawer-out">
  <div class="drawer">
    <div class="container">
      <div class="row">
        <div class="col-sm-6">
          <form role="form">
            <legend>Something</legend>
            <div class="form-group">
              <input type="email" class="form-control" placeholder="Enter email">
            </div>
            <div class="form-group">
              <input type="password" class="form-control" placeholder="Password">
            </div>
            <button type="submit" class="btn btn-primary">Submit</button>
          </form>
        </div>
        <!-- Social -->
        <div class="col-sm-6">
          <form action="">
            <legend>Social</legend>
            <div class="form-group">
            <a href="#" class="zocial-facebook"></a>
            <a href="#" class="zocial-twitter"></a>
            <a href="#" class="zocial-googleplus"></a>
            <a href="#" class="zocial-vimeo"></a>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="content center">
  <div class="container">
    <div class="row">
      <div class="col-sm-12">
        <h1>Cool CSS3 Animated Drawer</h1>
        <p class="lead">Click on the button above to show the animated drawer</p>
      </div>      
    </div>
  </div>
</div>

<footer>
  <div class="container">
    <div class="row">
      <div class="col-sm-12">Footer</div>
    </div>
  </div>
</footer>

script.js

$("a").click(function (event) {
  event.preventDefault();
  $(".drawer-out").toggleClass("opencan");
});

style.scss

// Core
*, *:before, *:after {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
body, html {
  width: 100%;
  height: 100%;
  background: #e0eafd;
  line-height: 50px;
  font-size: 14px;
  color: #92a5bf;
  text-align: left;
  font-family: 'Whitney', sans-serif;}

// Additional Helper Class
.center {
  text-align: center !important;}

// Override Included Pen
a {
  margin-top: 0;
  &:hover {
    color: white;
    text-decoration: none;
  }
}

// For Bootstrap
.container {
  padding: 30px 0;
  text-align: left;
}

header {
  float: left;
  width: 100%;
  height: 80px;
  background: #1ba0eb;
  color: #fff;
  z-index: 900;
  padding: 0;
  text-align: left;
  a.open {
    color: #fff;
    width: auto;
    height: auto;
    font-weight: bold;
    line-height: 18px;
    padding: 12px 12px;
    background: lighten(#1ba0eb, 15%);
    box-shadow: inset 0px -2px 0px darken(#1ba0eb, 4%);
    border-radius: 5px;
    text-decoration: none;
    margin: 18px 0;
    display: inline-block;
  }
}

.drawer-out {
  float: left;
  height: 0px;
  width: 100%;
  background: #333;
  overflow: hidden;
  position: relative;
  
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  
  // Drawer
  .drawer {
    float: left;
    width: 100%;
    height: 300px;
    background: #fff;
    opacity: 0;
    
    -webkit-transform: perspective(250px) rotateX(90deg);
    transform: perspective(250px) rotateX(90deg);
    
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
  }
  
  &.opencan {
    height: 300px;
    
    // Drawer
    .drawer {
      opacity: 1;
      
      -webkit-transform-style: preserve-3d;
      -moz-transform-style: preserve-3d;
      transform-style: preserve-3d;
      
      -webkit-transform: scale(1) perspective(1000px) rotateX(0deg);
      
      -webkit-animation: out 0.75s ease forwards;
      -moz-animation: out 0.75s ease forwards;
      animation: out 0.75s ease forwards;
    }
  }
}

@-webkit-keyframes out {
  0%   {
    -webkit-transform: scale(0.8) perspective(1000px) rotateX(90deg);
    transform: scale(0.8) perspective(1000px) rotateX(90deg);
  }
  100% {
    -webkit-transform: scale(1) perspective(1000px) rotateX(0deg);
    transform: scale(1) perspective(1000px) rotateX(0deg);
  }
}
@-moz-keyframes out {
  0%   { -moz-transform: scale(0.8) perspective(1000px) rotateX(90deg);}
  100% { -moz-transform: scale(1) perspective(1000px) rotateX(0deg);}
}
@keyframes out {
  0%   {
    -webkit-transform: scale(0.8) perspective(1000px) rotateX(90deg);
    transform: scale(0.8) perspective(1000px) rotateX(90deg);
  }
  100% {
    -webkit-transform: scale(1) perspective(1000px) rotateX(0deg);
    transform: scale(1) perspective(1000px) rotateX(0deg);
  }
}

.content {
  float: left;
  clear: both;
  height: 1400px; // Testing
  width: 100%;}

footer {
  float: left;
  clear: both;
  width: 100%;
  height: 120px;
  text-align: center;
  background: #333;}

p {
  font-size: 16px;
  opacity: 1;}