Tell me how to make it so that when resizing windows, elements that do not fit in the menu disappear under the button, write something like this plugin jsfiddle.net , it seems to work (reduce the window + update), however I can’t make it work at $(window).resize(); .

  • Why not use CSS3? bootstrap has such features that adjust the layout to the screen size. Especially a lot of implementations at the menu like yours - Vasily Barbashev
  • If you are given an exhaustive answer, mark it as correct (a daw opposite the selected answer). - Nicolas Chabanovsky ♦

2 answers 2

 function responseMenu(){ $('ul.dropdown-menu li.item').appendTo('ul.menu'); var items = $('ul.menu li.item'); var max_width = $('ul.menu').width() - $('ul.menu li.dd_menu').outerWidth(); var width = 0; var hide_from = 0; items.css({'width':'auto'}); items.each(function(index){ if (width + $(this).outerWidth() > max_width) { return false; } else { hide_from = index; width += $(this).outerWidth(); } }); if (hide_from < items.length - 1) { items.eq(hide_from).nextAll('li.item').appendTo('ul.dropdown-menu'); items.css({'width':(max_width / (hide_from + 1)) + 'px'}); $('ul.menu li.dd_menu').show(); } else { $('ul.menu li.dd_menu').hide(); } } $(document).ready(function () { $('.top_menu').on('click', '.dropdown-toggle', function () { $('.dropdown-menu').toggle(); }); $(window).on('resize', function(){ responseMenu(); }).trigger('resize'); }); 
 ul.menu {padding:0; margin:0;} ul.menu li {list-style-type:none; display:block; float:left; padding:5px 0; text-align:center; white-space:nowrap;} ul.menu li.dd_menu {float:right; position:relative; display:none;} ul.menu ul.dropdown-menu {display:none; position:absolute; top:35px; right:10px; padding:5px; border:#CCC 1px solid; border-radius:5px; z-index:2;} ul.menu ul.dropdown-menu li {float:none;} ul.menu a {color: #0b4da2; display:inline-block; margin:0 10px;} 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="top_menu"> <ul class="menu"> <li class="dd_menu"> <button class="dropdown-toggle" type="button">+</button> <ul class="dropdown-menu"></ul> </li> <li class="item"><a href="#"><span>Menu item #1</span></a></li> <li class="item"><a href="#"><span>Menu item #2</span></a></li> <li class="item"><a href="#"><span>Menu item #3</span></a></li> <li class="item"><a href="#"><span>Menu item #4</span></a></li> <li class="item"><a href="#"><span>Menu item #5</span></a></li> <li class="item"><a href="#"><span>Menu item #6</span></a></li> <li class="item"><a href="#"><span>Menu item #7</span></a></li> <li class="item"><a href="#"><span>Menu item #8</span></a></li> <li class="item"><a href="#"><span>Menu item #9</span></a></li> <li class="item"><a href="#"><span>Menu item #10</span></a></li> <li class="item"><a href="#"><span>Menu item #11</span></a></li> <li class="item"><a href="#"><span>Menu item #12</span></a></li> <li class="item"><a href="#"><span>Menu item #13</span></a></li> <li class="item"><a href="#"><span>Menu item #14</span></a></li> <li class="item"><a href="#"><span>Menu item #15</span></a></li> </ul> </div>

    I'm afraid I misunderstood the problem, but everything seems to be solved with the help of css, add the @media (max-width: 000px) {} media query (with the required width) and set a rule in which everything is hidden where you need it.

    • The elements will change, respectively, their width, too, need some kind of universal solution. - Johnny
    • one
      @Johnny did you read my comment to your question? See what bootstrap . Everything is quite simple there. - Vasily Barbashev
    • @ Vasily Barbashev, yes, I read, I know what a bootstrap is, there is not what I need (if you are hinting at something specific - say, maybe I'm wrong). - Johnny