Что неверно в коде?
<nav>
<ul>
<li><a href="category.html">Категория 1 (424)</a></li>
<li><a href="category.html">Категория 2 (424)</a></li>
<li><a href="category.html">Категория 3 (424)</a></li>
<li><a href="category.html">Категория 4 (424)</a></li>
<li><a href="category.html">Категория 5 (424)</a></li>
<li><a href="category.html">Категория 6 (424)</a></li>
<li><a href="category.html">Категория 7 (424)</a></li>
<li><a href="category.html">Категория 8 (424)</a></li>
<li><a href="category.html">Категория 9 (424)</a></li>
<li><a href="category.html">Категория 10 (424)</a></li>
<li><a href="category.html">Категория 11 (424)</a></li>
<li class="ddMenu">
<button class="dropdown-toggle">+</button>
<ul class="dropdown-menu"></ul>
</li>
</ul>
</nav>
$(function() {
$('.dropdown-toggle').click(function() { $('.dropdown-menu').toggle(); });
$(window).resize(function() { responseMenu(); }).trigger('resize');
});
function responseMenu() {
$('.dropdown-menu li').appendTo('nav ul');
var items = $('nav li');
var maxWidth = $('nav ul').width() - $('nav ul .ddMenu').outerWidth();
var width = 0;
var hideFrom = 0;
items.css('width', 'auto');
items.each(function(index) {
if(width + $(this).outerWidth() > maxWidth) return false;
else {
hideFrom = index;
width += $(this).outerWidth();
}
});
if(hideFrom < items.length - 1) {
items.eq(hideFrom).nextAll('nav li').appendTo('nav .dropdown-menu');
items.css('width', (maxWidth / (hideFrom + 1)) + 'px');
$('nav ul .ddMenu').show();
}
else $('nav ul .ddMenu').hide();
}
P.S. Этот код скрывает пункты меню, которые не влезают в блок, в кнопку
