title: Slide Div's on menu click
body: <p>I wanted to create a transition while div is moved down on click of any nav button.</p>
  
  <p>Below is the code pen link where I have tried it. 
  I dont know anything about CSS3 I would need your help to get the transition effect while div slide down or up, also I wanted to make the nav bar fixed when the page is slide down.</p>
  
  <p>Please help with these things.  I am just learning how to do these things. I am trying to use bootstrap for the same in my local system but I am not able to do it. If any of you know how to do it, please let me know.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="tab_container"&gt;
      &lt;nav id="tabs"&gt;
          &lt;ul id="nav"&gt;
              &lt;li class="active"&gt;&lt;a href="#about"&gt;About&lt;/a&gt;
              &lt;/li&gt;
              &lt;li class="inactive"&gt;&lt;a href="#Services"&gt;Services&lt;/a&gt;
              &lt;/li&gt;
              &lt;li class="inactive"&gt;&lt;a href="#OurStaff"&gt;Our Staff&lt;/a&gt;
              &lt;/li&gt;
              &lt;li class="inactive"&gt;&lt;a href="#book"&gt;book&lt;/a&gt;
              &lt;/li&gt;
              &lt;li class="inactive"&gt;&lt;a href="#Gift"&gt;Gift Cards&lt;/a&gt;
              &lt;/li&gt;
              &lt;li class="inactive"&gt;&lt;a href="#Reviews"&gt;Reviews&lt;/a&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/nav&gt;
  &lt;/div&gt;
  &lt;div id='container'&gt;
      &lt;div id='services' class="box"&gt;Services&lt;/div&gt;
      &lt;div id='about' class="box"&gt;About&lt;/div&gt;
      &lt;div id='OurStaff' class="box"&gt;Our Staff&lt;/div&gt;
      &lt;div id='book' class="box"&gt;book&lt;/div&gt;
      &lt;div id='Gift' class="box"&gt;Gift&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.box{
    width : 100%;
    height : 200px;
    background : blue;
    color:red;
    font-size:25px;
    margin-bottom : 20px; 
    padding : 20px;
  -webkit-box-sizing: border-box; 
  -moz-box-sizing: border-box;    
  -webkit-border-radius: 29px 20px 20px 20px;
  -moz-border-radius: 29px 20px 20px 20px;
    border-radius: 29px 20px 20px 20px;
  }
  </code></pre>
  
  <blockquote>
    <p><a href="http://codepen.io/anon/pen/wrxEn" rel="nofollow">http://codepen.io/anon/pen/wrxEn</a></p>
  </blockquote>