Responsive menu using jquery

Question

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

onClick working fine. Before the click, it will be hidden

I have taken inspiration from here

 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 > 20) { $(this).addClass('drop').css('opcaity', '1');; $(this).css('top', 'calc(100% + ' + val + 'px)'); val += h; } $('ul li.menu-item').addClass('show'); }) })

 .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%; } }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="primary-menu"> <ul> <li class="menu-item">Home <ul class="sub-menu"> <li class="sub-item">menu1</li> <li class="sub-item">menu2</li> <li class="sub-item">menu3</li> </ul> </li> <li class="menu-item">About us</li> <li class="menu-item">Service <ul class="sub-menu"> <li class="sub-item">menu1</li> <li class="sub-item">menu2</li> <li class="sub-item">menu3</li> </ul> </li> <li class="menu-item">product</li> <li class="menu-item">packages</li> <li class="menu-item">contact</li> <li class="menu-item">menu7</li> <li class="menu-item">menu8</li> <li class="menu-item">menu9</li> <li class="menu-item">menu10</li> <li class="menu-item">menu11 <ul class="sub-menu"> <li class="sub-item">menu1</li> <li class="sub-item">menu2</li> <li class="sub-item">menu3</li> </ul> </li> <li class="menu-item">menu12</li> <li class="menu-item">menu13</li> <li class="menu-item">menu14 <ul class="sub-menu"> <li class="sub-item">menu1</li> <li class="sub-item">menu2</li> <li class="sub-item">menu3</li> </ul> </li> </ul> <div class="click"></div> </div>

Answer 1

hope this will be useful.

 var h = 30; var val = 0; $('ul li.menu-item').each(function() { var of = $(this).offset().top - $('ul li.menu-item').offset().top; if ( of > 20) { $(this).addClass('hide'); } }) $('.click').click(function() { if ($('ul li.menu-item').hasClass('hide')) { $('ul li.menu-item').removeClass('hide'); } $('ul li.menu-item').each(function() { if($(this).hasClass('drop')){ $(this).addClass('hide'); } }); 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 > 20) { $(this).addClass('drop').css('opcaity', '1');; $(this).css('top', 'calc(100% + ' + val + 'px)'); val += h; } $('ul li.menu-item').addClass('show'); }) })

 .primary-menu { position: relative; width: 100%; 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%; } }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="primary-menu"> <ul> <li class="menu-item">Home <ul class="sub-menu"> <li class="sub-item">menu1</li> <li class="sub-item">menu2</li> <li class="sub-item">menu3</li> </ul> </li> <li class="menu-item">About us</li> <li class="menu-item">Service <ul class="sub-menu"> <li class="sub-item">menu1</li> <li class="sub-item">menu2</li> <li class="sub-item">menu3</li> </ul> </li> <li class="menu-item">product</li> <li class="menu-item">packages</li> <li class="menu-item">contact</li> <li class="menu-item">menu7</li> <li class="menu-item">menu8</li> <li class="menu-item">menu9</li> <li class="menu-item">menu10</li> <li class="menu-item">menu11 <ul class="sub-menu"> <li class="sub-item">menu1</li> <li class="sub-item">menu2</li> <li class="sub-item">menu3</li> </ul> </li> <li class="menu-item">menu12</li> <li class="menu-item">menu13</li> <li class="menu-item">menu14 <ul class="sub-menu"> <li class="sub-item">menu1</li> <li class="sub-item">menu2</li> <li class="sub-item">menu3</li> </ul> </li> </ul> <div class="click"></div> </div>