I want to display the menus as separate columns if its more than 4 menus. I need to achieve this in Vanilla Javascript. Below is my html and CSS and I'm not sure how to achieve this in Vanilla Javascript. Can anyone please guide?
.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>Any help will be appreciated.
Thanks in advance.
To Separate columns based on the Menus, you can try the below 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>We can use the display: grid property.
.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>