title: Top Slide Menu without plugin using Jquery
body: <p>Hi I am creating a top slide menu using Jquery and Css. As i click on the button the menu should appear on the top of the screen, and If i click on the button or any where in the window it should get close.</p>
  
  <p>I am unable to get the nav bar, some thing is going wrong with my code. Here is the code what I have tried.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;body class="cbp-spmenu-push"&gt;
      &lt;nav class="cbp-spmenu cbp-spmenu-horizontal cbp-spmenu-top" id="cbp-spmenu-s3"&gt;
          &lt;h3&gt;Menu&lt;/h3&gt;
          &lt;a href="#"&gt;Celery seakale&lt;/a&gt; 
          &lt;a href="#"&gt;Dulse daikon&lt;/a&gt; 
          &lt;a href="#"&gt;Zucchini garlic&lt;/a&gt; 
          &lt;a href="#"&gt;Catsear azuki bean&lt;/a&gt; 
          &lt;a href="#"&gt;Dandelion bunya&lt;/a&gt; 
          &lt;a href="#"&gt;Rutabaga&lt;/a&gt; 
          &lt;a href="#"&gt;Celery seakale&lt;/a&gt; 
          &lt;a href="#"&gt;Dulse daikon&lt;/a&gt; 
          &lt;a href="#"&gt;Zucchini garlic&lt;/a&gt;
          &lt;a href="#"&gt;Catsear azuki bean&lt;/a&gt; 
          &lt;a href="#"&gt;Dandelion bunya&lt;/a&gt; 
          &lt;a href="#"&gt;Rutabaga&lt;/a&gt;
      &lt;/nav&gt;
      &lt;div class="container"&gt;
          &lt;div class="main"&gt;
              &lt;section&gt;
                  &lt;button id="showTop" style="margin-top:300px;"&gt;Show/Hide Top Slide Menu&lt;/button&gt;
              &lt;/section&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>$(document).ready(function(){
      $('#showTop').click(function() {
      debugger;
      $('#cbp-spmenu-s3').toggle();
      $('#cbp-spmenu-s3').toggleClass('active');
  });
  });
  </code></pre>
  
  <p>Css:</p>
  
  <pre><code>.cbp-spmenu-horizontal {
      width: 100%;
      height: 150px;
      left: 0;
      z-index: 1000;
      overflow: hidden;
  }
  .cbp-spmenu-horizontal a {
      float: left;
      width: 20%;
      padding: 0.8em;
      border-left: 1px solid #258ecd;
  }
  .cbp-spmenu,
  .cbp-spmenu-push {
      -webkit-transition: all 0.3s ease;
      -moz-transition: all 0.3s ease;
      transition: all 0.3s ease;
  }
  .cbp-spmenu-top {
      top: -150px;
      display:none;
  }
  .cbp-spmenu-top.cbp-spmenu-open {
      top: 0px;
  }
  </code></pre>
  
  <p>demo Link:
  <a href="http://jsfiddle.net/rC8Sk/1/" rel="nofollow">Demo Code Link</a></p>