Разбить выпадающее меню на 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> |
Igorsrt,
Посмотрите это |
Цитата:
|
Igorsrt,
Пример не мой, а j0hnik.:thanks: Да, там заранее известно, что элементы объединяются по два, и делается цикл по нечетным элементам. Вам же удобнее будет использовать цикл for с вычисленным шагом. Самостоятельно пробовали что-то написать? В чем проблемы? |
<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,
Тут еще есть проблема, если такие же блоки будут и в других пунктах меню. |
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> |
Цитата:
|
Dilettante_Pro,
а если будут еще и много меню, обернуть в форич еще раз :lol: |
Цитата:
|
Часовой пояс GMT +3, время: 08:15. |