23.07.2018, 14:54
|
|
Профессор
|
|
Регистрация: 21.02.2016
Сообщений: 271
|
|
|
Разбить выпадающее меню на 5 колонок
Здравствуйте!
Имеется обычное двухуровневое меню на CMS Modx вида:
<nav>
<ul>
<li><a href="[[!++site_url]]"><span>Пункт меню</span></a></li>
<li>
<a href="[[~70]]"><span>Пункт меню с выпадающим списком</span></a>
<ul>
<li><a href="[[~73]]"><span>Пункт подменю</span></a></li>
<li><a href="[[~73]]"><span>Пункт подменю</span></a></li>
<li><a href="[[~73]]"><span>Пункт подменю</span></a></li>
<li><a href="[[~73]]"><span>Пункт подменю</span></a></li>
<li><a href="[[~73]]"><span>Пункт подменю</span></a></li>
<li><a href="[[~73]]"><span>Пункт подменю</span></a></li>
<li><a href="[[~73]]"><span>Пункт подменю</span></a></li>
<li><a href="[[~73]]"><span>Пункт подменю</span></a></li>
<li><a href="[[~73]]"><span>Пункт подменю</span></a></li>
<li><a href="[[~73]]"><span>Пункт подменю</span></a></li>
<li><a href="[[~73]]"><span>Пункт подменю</span></a></li>
<li><a href="[[~73]]"><span>Пункт подменю</span></a></li>
<li><a href="[[~73]]"><span>Пункт подменю</span></a></li>
<li><a href="[[~73]]"><span>Пункт подменю</span></a></li>
<li><a href="[[~73]]"><span>Пункт подменю</span></a></li>
<li><a href="[[~73]]"><span>Пункт подменю</span></a></li>
<li><a href="[[~73]]"><span>Пункт подменю</span></a></li>
<li><a href="[[~73]]"><span>Пункт подменю</span></a></li>
<li><a href="[[~73]]"><span>Пункт подменю</span></a></li>
<li><a href="[[~73]]"><span>Пункт подменю</span></a></li>
</ul>
</li>
<li><a href="[[!++site_url]]"><span>Пункт меню</span></a></li>
<li><a href="[[!++site_url]]"><span>Пункт меню</span></a></li>
<li><a href="[[!++site_url]]"><span>Пункт меню</span></a></li>
</ul>
</nav>
Пункты меню добавляются из админки сайта и соответсвенно их количество будет меняться. Можно ли с помощью js разбивать выпадающее меню на 5 одинаковых колонок? Т.е. что бы в итоге верстка выглядела так:
<nav>
<ul>
<li><a href="[[!++site_url]]"><span>Пункт меню</span></a></li>
<li>
<a href="[[~70]]"><span>Пункт меню</span></a>
<ul>
<li>
<ul>
<li><a href="[[~73]]"><span>Пункт подменю</span></a></li>
<li><a href="[[~73]]"><span>Пункт подменю</span></a></li>
<li><a href="[[~73]]"><span>Пункт подменю</span></a></li>
<li><a href="[[~73]]"><span>Пункт подменю</span></a></li>
</ul>
</li>
<li>
<ul>
<li><a href="[[~73]]"><span>Пункт подменю</span></a></li>
<li><a href="[[~73]]"><span>Пункт подменю</span></a></li>
<li><a href="[[~73]]"><span>Пункт подменю</span></a></li>
<li><a href="[[~73]]"><span>Пункт подменю</span></a></li>
</ul>
</li>
<li>
<ul>
<li><a href="[[~73]]"><span>Пункт подменю</span></a></li>
<li><a href="[[~73]]"><span>Пункт подменю</span></a></li>
<li><a href="[[~73]]"><span>Пункт подменю</span></a></li>
<li><a href="[[~73]]"><span>Пункт подменю</span></a></li>
</ul>
</li>
<li>
<ul>
<li><a href="[[~73]]"><span>Пункт подменю</span></a></li>
<li><a href="[[~73]]"><span>Пункт подменю</span></a></li>
<li><a href="[[~73]]"><span>Пункт подменю</span></a></li>
<li><a href="[[~73]]"><span>Пункт подменю</span></a></li>
</ul>
</li>
<li>
<ul>
<li><a href="[[~73]]"><span>Пункт подменю</span></a></li>
<li><a href="[[~73]]"><span>Пункт подменю</span></a></li>
<li><a href="[[~73]]"><span>Пункт подменю</span></a></li>
<li><a href="[[~73]]"><span>Пункт подменю</span></a></li>
</ul>
</li>
</ul>
</li>
<li><a href="[[!++site_url]]"><span>Пункт меню</span></a></li>
<li><a href="[[!++site_url]]"><span>Пункт меню</span></a></li>
<li><a href="[[!++site_url]]"><span>Пункт меню</span></a></li>
</ul>
</nav>
|
|
23.07.2018, 15:09
|
|
Профессор
|
|
Регистрация: 27.11.2015
Сообщений: 2,899
|
|
|
|
|
23.07.2018, 15:32
|
|
Профессор
|
|
Регистрация: 21.02.2016
Сообщений: 271
|
|
В этом примере, насколько я понимаю, заранее известно, что в каждом блоке будет по 2 элемента... У меня же количество пунктов в колонках будет меняться - т.е. получается нужно посдчитать общее количество, затем поделить на 5, а уже потом по Вашему примеру разбивать на колонки... а я в js не силен ( |
|
23.07.2018, 15:50
|
|
Профессор
|
|
Регистрация: 27.11.2015
Сообщений: 2,899
|
|
Igorsrt,
Пример не мой, а j0hnik. 
Да, там заранее известно, что элементы объединяются по два, и делается цикл по нечетным элементам.
Вам же удобнее будет использовать цикл for с вычисленным шагом.
Самостоятельно пробовали что-то написать? В чем проблемы?
|
|
23.07.2018, 15:55
|
 |
Профессор
|
|
Регистрация: 01.12.2016
Сообщений: 3,650
|
|
<nav>
<ul>
<li><a href="[[!++site_url]]"><span>Пункт меню</span></a></li>
<li>
<a href="[[~70]]"><span>Пункт меню с выпадающим списком</span></a>
<ul>
<li><a href="[[~73]]"><span>Пункт подменю</span></a></li>
<li><a href="[[~73]]"><span>Пункт подменю</span></a></li>
<li><a href="[[~73]]"><span>Пункт подменю</span></a></li>
<li><a href="[[~73]]"><span>Пункт подменю</span></a></li>
<li><a href="[[~73]]"><span>Пункт подменю</span></a></li>
<li><a href="[[~73]]"><span>Пункт подменю</span></a></li>
<li><a href="[[~73]]"><span>Пункт подменю</span></a></li>
<li><a href="[[~73]]"><span>Пункт подменю</span></a></li>
<li><a href="[[~73]]"><span>Пункт подменю</span></a></li>
<li><a href="[[~73]]"><span>Пункт подменю</span></a></li>
<li><a href="[[~73]]"><span>Пункт подменю</span></a></li>
<li><a href="[[~73]]"><span>Пункт подменю</span></a></li>
<li><a href="[[~73]]"><span>Пункт подменю</span></a></li>
<li><a href="[[~73]]"><span>Пункт подменю</span></a></li>
<li><a href="[[~73]]"><span>Пункт подменю</span></a></li>
<li><a href="[[~73]]"><span>Пункт подменю</span></a></li>
<li><a href="[[~73]]"><span>Пункт подменю</span></a></li>
<li><a href="[[~73]]"><span>Пункт подменю</span></a></li>
<li><a href="[[~73]]"><span>Пункт подменю</span></a></li>
<li><a href="[[~73]]"><span>Пункт подменю</span></a></li>
</ul>
</li>
<li><a href="[[!++site_url]]"><span>Пункт меню</span></a></li>
<li><a href="[[!++site_url]]"><span>Пункт меню</span></a></li>
<li><a href="[[!++site_url]]"><span>Пункт меню</span></a></li>
</ul>
</nav>
<script>
var z = Math.floor(document.querySelectorAll('ul li ul li').length / 5);
[].forEach.call(document.querySelectorAll('ul li ul li:nth-child('+z+'n-'+(z-1)+')'),function(el,i){
el.insertAdjacentHTML('beforebegin', '<li><ul></ul></li>');
var wrap = document.querySelectorAll('ul li ul li ul')[i];
var x = z-1;
while(x-- && el.nextElementSibling) wrap.appendChild(el.nextElementSibling);
wrap.insertBefore(el, wrap.firstChild);
});
</script>
если ровно не делится остатки будут перекинуты в следующий блок
плохо что нет классов нигде
Последний раз редактировалось j0hnik, 23.07.2018 в 16:08.
|
|
23.07.2018, 16:03
|
|
Профессор
|
|
Регистрация: 27.11.2015
Сообщений: 2,899
|
|
|
j0hnik,
Тут еще есть проблема, если такие же блоки будут и в других пунктах меню.
|
|
23.07.2018, 16:12
|
|
Профессор
|
|
Регистрация: 01.12.2016
Сообщений: 3,650
|
|
Dilettante_Pro,
без классов конечно трешак полный
<nav>
<ul>
<li><a href="[[!++site_url]]"><span>Пункт меню</span></a></li>
<li>
<a href="[[~70]]"><span>Пункт меню с выпадающим списком</span></a>
<ul>
<li><a href="[[~73]]"><span>Пункт подменю</span></a></li>
<li><a href="[[~73]]"><span>Пункт подменю</span></a></li>
<li><a href="[[~73]]"><span>Пункт подменю</span></a></li>
<li><a href="[[~73]]"><span>Пункт подменю</span></a></li>
<li><a href="[[~73]]"><span>Пункт подменю</span></a></li>
<li><a href="[[~73]]"><span>Пункт подменю</span></a></li>
<li><a href="[[~73]]"><span>Пункт подменю</span></a></li>
<li><a href="[[~73]]"><span>Пункт подменю</span></a></li>
<li><a href="[[~73]]"><span>Пункт подменю</span></a></li>
<li><a href="[[~73]]"><span>Пункт подменю</span></a></li>
<li><a href="[[~73]]"><span>Пункт подменю</span></a></li>
<li><a href="[[~73]]"><span>Пункт подменю</span></a></li>
<li><a href="[[~73]]"><span>Пункт подменю</span></a></li>
<li><a href="[[~73]]"><span>Пункт подменю</span></a></li>
<li><a href="[[~73]]"><span>Пункт подменю</span></a></li>
<li><a href="[[~73]]"><span>Пункт подменю</span></a></li>
<li><a href="[[~73]]"><span>Пункт подменю</span></a></li>
<li><a href="[[~73]]"><span>Пункт подменю</span></a></li>
<li><a href="[[~73]]"><span>Пункт подменю</span></a></li>
<li><a href="[[~73]]"><span>Пункт подменю</span></a></li>
</ul>
</li>
<li><a href="[[!++site_url]]"><span>Пункт меню</span></a></li>
<li><a href="[[!++site_url]]"><span>Пункт меню</span></a></li>
<li><a href="[[!++site_url]]"><span>Пункт меню</span></a></li>
</ul>
<ul>
<li><a href="[[!++site_url]]"><span>Пункт меню</span></a></li>
<li>
<a href="[[~70]]"><span>Пункт меню с выпадающим списком</span></a>
<ul>
<li><a href="[[~73]]"><span>Пункт подменю</span></a></li>
<li><a href="[[~73]]"><span>Пункт подменю</span></a></li>
<li><a href="[[~73]]"><span>Пункт подменю</span></a></li>
<li><a href="[[~73]]"><span>Пункт подменю</span></a></li>
<li><a href="[[~73]]"><span>Пункт подменю</span></a></li>
<li><a href="[[~73]]"><span>Пункт подменю</span></a></li>
<li><a href="[[~73]]"><span>Пункт подменю</span></a></li>
<li><a href="[[~73]]"><span>Пункт подменю</span></a></li>
<li><a href="[[~73]]"><span>Пункт подменю</span></a></li>
<li><a href="[[~73]]"><span>Пункт подменю</span></a></li>
<li><a href="[[~73]]"><span>Пункт подменю</span></a></li>
<li><a href="[[~73]]"><span>Пункт подменю</span></a></li>
<li><a href="[[~73]]"><span>Пункт подменю</span></a></li>
<li><a href="[[~73]]"><span>Пункт подменю</span></a></li>
<li><a href="[[~73]]"><span>Пункт подменю</span></a></li>
<li><a href="[[~73]]"><span>Пункт подменю</span></a></li>
<li><a href="[[~73]]"><span>Пункт подменю</span></a></li>
<li><a href="[[~73]]"><span>Пункт подменю</span></a></li>
<li><a href="[[~73]]"><span>Пункт подменю</span></a></li>
<li><a href="[[~73]]"><span>Пункт подменю</span></a></li>
</ul>
</li>
<li><a href="[[!++site_url]]"><span>Пункт меню</span></a></li>
<li><a href="[[!++site_url]]"><span>Пункт меню</span></a></li>
<li><a href="[[!++site_url]]"><span>Пункт меню</span></a></li>
</ul>
</nav>
<script>
[].forEach.call(document.querySelectorAll('ul li ul'), function(elt){
var z = Math.floor(elt.querySelectorAll('li').length / 5);
[].forEach.call(elt.querySelectorAll('li:nth-child('+z+'n-'+(z-1)+')'),function(el,i){
el.insertAdjacentHTML('beforebegin', '<li><ul></ul></li>');
var wrap = elt.querySelectorAll('li ul')[i];
var x = z-1;
while(x-- && el.nextElementSibling) wrap.appendChild(el.nextElementSibling);
wrap.insertBefore(el, wrap.firstChild);
});
});
</script>
Последний раз редактировалось j0hnik, 23.07.2018 в 16:14.
|
|
23.07.2018, 16:15
|
|
Профессор
|
|
Регистрация: 21.02.2016
Сообщений: 271
|
|
Сообщение от j0hnik
|
<nav>
<ul>
<li><a href="[[!++site_url]]"><span>Пункт меню</span></a></li>
<li>
<a href="[[~70]]"><span>Пункт меню с выпадающим списком</span></a>
<ul>
<li><a href="[[~73]]"><span>Пункт подменю</span></a></li>
<li><a href="[[~73]]"><span>Пункт подменю</span></a></li>
<li><a href="[[~73]]"><span>Пункт подменю</span></a></li>
<li><a href="[[~73]]"><span>Пункт подменю</span></a></li>
<li><a href="[[~73]]"><span>Пункт подменю</span></a></li>
<li><a href="[[~73]]"><span>Пункт подменю</span></a></li>
<li><a href="[[~73]]"><span>Пункт подменю</span></a></li>
<li><a href="[[~73]]"><span>Пункт подменю</span></a></li>
<li><a href="[[~73]]"><span>Пункт подменю</span></a></li>
<li><a href="[[~73]]"><span>Пункт подменю</span></a></li>
<li><a href="[[~73]]"><span>Пункт подменю</span></a></li>
<li><a href="[[~73]]"><span>Пункт подменю</span></a></li>
<li><a href="[[~73]]"><span>Пункт подменю</span></a></li>
<li><a href="[[~73]]"><span>Пункт подменю</span></a></li>
<li><a href="[[~73]]"><span>Пункт подменю</span></a></li>
<li><a href="[[~73]]"><span>Пункт подменю</span></a></li>
<li><a href="[[~73]]"><span>Пункт подменю</span></a></li>
<li><a href="[[~73]]"><span>Пункт подменю</span></a></li>
<li><a href="[[~73]]"><span>Пункт подменю</span></a></li>
<li><a href="[[~73]]"><span>Пункт подменю</span></a></li>
</ul>
</li>
<li><a href="[[!++site_url]]"><span>Пункт меню</span></a></li>
<li><a href="[[!++site_url]]"><span>Пункт меню</span></a></li>
<li><a href="[[!++site_url]]"><span>Пункт меню</span></a></li>
</ul>
</nav>
<script>
var z = Math.floor(document.querySelectorAll('ul li ul li').length / 5);
[].forEach.call(document.querySelectorAll('ul li ul li:nth-child('+z+'n-'+(z-1)+')'),function(el,i){
el.insertAdjacentHTML('beforebegin', '<li><ul></ul></li>');
var wrap = document.querySelectorAll('ul li ul li ul')[i];
var x = z-1;
while(x-- && el.nextElementSibling) wrap.appendChild(el.nextElementSibling);
wrap.insertBefore(el, wrap.firstChild);
});
</script>
если ровно не делится остатки будут перекинуты в следующий блок
плохо что нет классов нигде
|
маленько не так... попробовал добавить в список еще пару элементов - появилась шестая колонка (а мне нужно именно 5)... классы добавить не проблема (они там вообще есть, это я так для упрощения все постирал... давайте например добавим в пример <nav class="mymenu">, что бы конкретная привязка была)
|
|
23.07.2018, 16:16
|
|
Профессор
|
|
Регистрация: 01.12.2016
Сообщений: 3,650
|
|
Dilettante_Pro,
а если будут еще и много меню, обернуть в форич еще раз 
|
|
23.07.2018, 16:17
|
|
Профессор
|
|
Регистрация: 01.12.2016
Сообщений: 3,650
|
|
|
Сообщение от Igorsrt
|
|
попробовал добавить в список еще пару элементов - появилась шестая колонка...
|
а должно быть пять неполных? |
|
|
|
