Quiero mostrar los menús como columnas separadas si hay más de 4 menús. Necesito lograr esto en Vanilla Javascript. A continuación se muestra mi html y CSS y no estoy seguro de cómo lograr esto en Vanilla Javascript. ¿Puede alguien por favor guiar?
.main-nav-list.column{ column-count: 2; column-fill: balance;} <nav class="main-nav"> <ul class="main-nav-list"> <li class="a"> <a href="/">First</a> <ul class="main-nav-list"> <li class="b"> <a href="/">Type of menu</a> <ul class="main-nav-list column"> <li class="c"> <a href="/">Summer</a> </li> <li class="c"> <a href="/">Winter</a> </li> <li class="c"> <a href="/">All season</a> </li> <li class="c"> <a href="/">Spring </a> </li> <li class="c"> <a href="/">Spring </a> </li> <li class="c"> <a href="/">Spring </a> </li> </ul> </li> </ul> </li> </ul> </nav>Cualquier ayuda será apreciada.
Gracias por adelantado.
Para separar columnas según los menús, puede probar el siguiente script,
(function columnCount() { //get all lists with selected name var lists = document.getElementsByClassName("column"); //loop through all gathered lists for (i = 0; i < lists.length; i++) { //shorthand elements for easy use var list = lists[i]; var items = list.getElementsByTagName("li"); list.className += items.length < 5 ? " lesscolumn" : " morecolumn"; } })(); .lesscolumn { column-count: 1; } .morecolumn { column-count: 2; } <nav class="main-nav"> <ul class="main-nav-list"> <li class="a"> <a href="/">First</a> <ul class="main-nav-list"> <li class="b"> <a href="/">Type of menu</a> <ul class="main-nav-list column"> <li class="c"> <a href="/">Summer</a> </li> <li class="c"> <a href="/">Winter</a> </li> <li class="c"> <a href="/">All season</a> </li> <li class="c"> <a href="/">Spring </a> </li> <li class="c"> <a href="/">Spring </a> </li> <li class="c"> <a href="/">Spring </a> </li> </ul> </li> </ul> </li> </ul> </nav>Podemos usar la propiedad display: grid .
.main-nav-list.column { display: grid; grid-template-rows: repeat(4, 1fr); grid-auto-flow: column; } <nav class="main-nav"> <ul class="main-nav-list"> <li class="a"> <a href="/">First</a> <ul class="main-nav-list"> <li class="b"> <a href="/">Type of menu</a> <ul class="main-nav-list column"> <li class="c"> <a href="/">Summer</a> </li> <li class="c"> <a href="/">Winter</a> </li> <li class="c"> <a href="/">All season</a> </li> <li class="c"> <a href="/">Spring </a> </li> <li class="c"> <a href="/">Spring </a> </li> <li class="c"> <a href="/">Spring </a> </li> </ul> </li> </ul> </li> </ul> </nav>