title: CSS3 Transition Slide Down/Up
body: <pre><code>.header {
          position:fixed;
          top:0;
          left:0;
          width:100%;
          height:50px;
          z-index:2
  }    
  .menu ul {
          position:absolute;
          top:0;
          left:0;
          width:100%;
          -webkit-transform:translateY(-100%);
          -moz-transform:translateY(-100%);
          transform:translateY(-50%);
          -webkit-transition: all 0.5s ease-in-out;
          -moz-transition: all 0.5s ease-in-out;
          transition: all 0.5s ease-in-out;
      }
  
      .menu ul.is-visible {
          -webkit-transform:translateY(50px);
          -moz-transform:translateY(50px);
          transform:translateY(50px)
          -webkit-transition: all 0.5s ease-in-out;
          -moz-transition: all 0.5s ease-in-out;
          transition: all 0.5s ease-in-out;
      }
  </code></pre>
  
  <p>The above is the CSS I use to toggle a menu open/close using a transition element for a sliding down/up effect. </p>
  
  <p>Currently the menu slides from the top of the header; is it possible for it to slide from the bottom of the header which is 50px from the top?</p>
  
  <p>I'm still trying to learn how to use transition, so any advice is much appreciated.</p>
  
  <p>Thanks!</p>