title: Responsive menu using jquery
body: <p>I'm working on the responsive menu. when we resize the screen menu items will be appear down is working fine but the problem is onClick on red button is working fine. When I refresh the page all items visible. I want before it will be hidden on click the red button then the menu will appear.
  It is coming like this i want to hide overflow menu
  <a href="https://i.stack.imgur.com/Bc3sm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Bc3sm.png" alt="enter image description here"></a></p>
  
  <p>onClick working fine. Before the click, it will be hidden
  <a href="https://i.stack.imgur.com/hC991.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hC991.png" alt="enter image description here"></a></p>
  
  <p><a href="http://demo.themerex.net/?theme=monyxi&amp;_ga=2.109913990.2028767309.1545223654-217436162.1545223654" rel="nofollow noreferrer">I have taken inspiration from here</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var h = 30;
  var val = 0;
  
  $('.click').click(function() {
    if ($('ul li.menu-item').hasClass('show')) {
      $('ul li.menu-item').removeClass('show');
      $('ul li.menu-item').removeClass('drop')
      return;
    }
    val = 0;
    $('ul li.menu-item').each(function() {
      var of = $(this).offset().top - $('ul li.menu-item').offset().top;
      if ( of &gt; 20) {
        $(this).addClass('drop').css('opcaity', '1');;
  
        $(this).css('top', 'calc(100% + ' + val + 'px)');
        val += h;
      }
      $('ul li.menu-item').addClass('show');
    })
  })</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.primary-menu {
    position: relative;
    width: 64%;
    margin: 0 auto;
    max-height: 50px;
    overflow: hiddin;
    background: #ccc;
  }
  
  ul.menu-item {
    box-sizing: border-box;
    position: relative;
  }
  
  .menu-item {
    display: inline-block;
    text-decoration: none;
    color: #000000;
    font-size: 20px;
    padding: 10px;
    text-transform: capitalize;
    list-style: none;
    background-color: #88c0c7;
    position: relative;
  }
  
  li.drop {
    display: block;
    position: absolute;
    right: 0;
  }
  
  ul.sub-menu {
    flex-direction: column;
    position: absolute;
    top: 52px;
    display: none;
    background-color: #000;
    color: #fff;
  }
  
  .menu-item:hover ul.sub-menu {
    display: block;
  }
  
  .drop ul.sub-menu {
    position: absolute;
    top: 36%;
    left: -72%;
  }
  
  .click {
    position: absolute;
    opacity: 0;
    background: red;
    right: -5%;
    top: -2%;
    width: 40px;
    height: 40px;
    margin: 4px;
    z-index: 2;
  }
  
  .hide {
    opacity: 0;
  }
  
  
  /* Small Desktop Resolution and iPad Landscape
  ======================================================================== */
  
  @media only screen and (min-width: 960px) and (max-width: 1024px) {
    .click {
      opacity: 1;
      right: 2%;
    }
  }
  
  
  /* iPad Portrait
  ======================================================================== */
  
  @media only screen and (min-width: 768px) and (max-width: 959px) {
    .click {
      opacity: 1;
      right: 2%;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="primary-menu"&gt;
    &lt;ul&gt;
      &lt;li class="menu-item"&gt;Home
        &lt;ul class="sub-menu"&gt;
          &lt;li class="sub-item"&gt;menu1&lt;/li&gt;
          &lt;li class="sub-item"&gt;menu2&lt;/li&gt;
          &lt;li class="sub-item"&gt;menu3&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li class="menu-item"&gt;About us&lt;/li&gt;
      &lt;li class="menu-item"&gt;Service
        &lt;ul class="sub-menu"&gt;
          &lt;li class="sub-item"&gt;menu1&lt;/li&gt;
          &lt;li class="sub-item"&gt;menu2&lt;/li&gt;
          &lt;li class="sub-item"&gt;menu3&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li class="menu-item"&gt;product&lt;/li&gt;
      &lt;li class="menu-item"&gt;packages&lt;/li&gt;
      &lt;li class="menu-item"&gt;contact&lt;/li&gt;
      &lt;li class="menu-item"&gt;menu7&lt;/li&gt;
      &lt;li class="menu-item"&gt;menu8&lt;/li&gt;
      &lt;li class="menu-item"&gt;menu9&lt;/li&gt;
      &lt;li class="menu-item"&gt;menu10&lt;/li&gt;
      &lt;li class="menu-item"&gt;menu11
        &lt;ul class="sub-menu"&gt;
          &lt;li class="sub-item"&gt;menu1&lt;/li&gt;
          &lt;li class="sub-item"&gt;menu2&lt;/li&gt;
          &lt;li class="sub-item"&gt;menu3&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li class="menu-item"&gt;menu12&lt;/li&gt;
      &lt;li class="menu-item"&gt;menu13&lt;/li&gt;
      &lt;li class="menu-item"&gt;menu14
        &lt;ul class="sub-menu"&gt;
          &lt;li class="sub-item"&gt;menu1&lt;/li&gt;
          &lt;li class="sub-item"&gt;menu2&lt;/li&gt;
          &lt;li class="sub-item"&gt;menu3&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  
    &lt;div class="click"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>