Добавление дополнительной кнопки для списка в адаптивной навигации ⇐ Jquery

[Anonymous]

У меня есть навигация, скажем, из 12 элементов, и когда разрешение становится меньшим, элементы переносятся на новую строку. Мне нужно сделать так, чтобы, когда элемент больше не помещался в навигацию, в правой части навигации должна была размещаться раскрывающаяся кнопка «БОЛЬШЕ». и поместите тот элемент, который не помещается в раскрывающийся список.
Если вы меня не поняли, есть изображение ниже.

Но проблема в том, что навигация элементы не всегда имеют одинаковую ширину, поскольку элементы навигации генерируются с помощью REST API.

Я попытался создать сценарий jQuery для расчета ширины элементов и добавления их в навигацию.
Вот сценарий, который я создал, я сделал его в спешке, так что он очень плохой.

Мне нужно помочь, как правильно рассчитать ширину элементов и ширину навигации, а также рассчитать, когда добавлять элементы в навигацию или удалять элементы из навигации.

Вот изображение, если вы его не поняли: http://img.hr/aagV

Код: Выделить всё

/*
* Here we check how many items can we put on the navigation bar
* If item doesn't fit we clone it on the more dropdown button
*/
function removeMany() {
var i = $items.length - 1;

if (itemsWidth > navWidth) {
while (itemsWidth > navWidth) {
$($items[i]).removeClass('first-level-item').addClass('second-level-item');
dropdownItems.push($items[i]);
$($items[i]).removeClass('showed');
$items.pop();

i--;
getItemsWidth();
}

$nav.append($navMore);

dropdownItems.reverse().forEach(function (element, index, array) {
$('ul.second-level').append(element);
});

getItems();
}
}

//If window is resized to bigger resolution we need to put back items on the navbar
function addMany() {
var i = dropdownItems.length - 1;

if (dropdownItems.length != 0) {

do {
$('ul.first-level').append(dropdownItems.reverse()[i]);
$items.push(dropdownItems[i]);
dropdownItems.pop();

i--;
getItemsWidth();
} while (itemsWidth < navWidth);

$navMore.remove();

$items.each(function (i) {
$(this).addClass('first-level-item showed').removeClass('second-level-item');
});

if (!(dropdownItems != 0)) {
return;
} else {
$nav.append($navMore);
}

}
}

Код: Выделить всё

body {
margin: 0;
padding: 0;
border: 0; }

ul, li {
margin: 0;
padding: 0;
list-style: none; }

ul.second-level li {
display: block !important; }
ul.second-level li > a {
color: black; }

a {
color: #fff;
text-decoration: none;
text-transform: uppercase; }

.second-level-item a {
color: #333 !important; }

.navigation {
width: 960px;
max-width: 100%;
background: #211;
color: #aaa;
margin: 0 auto; }

.first-level .first-level-item {
display: inline-block;
padding: 10px; }
.first-level .item-more {
display: inline-block; }
.first-level .item-more .second-level-item {
display: inline-block; }

.second-level {
position: absolute;
top: 100%;
right: 0;
width: 200px;
background: #fff;
padding: 10px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4); }

.has-second-level {
position: relative; }
.has-second-level .second-level {
display: none; }
.has-second-level:hover {
background: #fff;
color: #000; }
.has-second-level:hover .second-level {
display: block;  }

/*# sourceMappingURL=style.css.map */

Код: Выделить всё

DropDown

[*]





[list]

[url=#]Introduction to Irish Culture[/url]
[*][url=#]Cellular and Molecular Neurobiology[/url]
[*][url=#]Guitar foundations[/url]
[*][url=#]Startup Inovation[/url]
[*][url=#]Astrophysics[/url]

[*]
 More 



[/list]

Подробнее здесь: https://stackoverflow.com/questions/274 ... navigation