How to control the columns based on the menus in Vanilla Javascript?-CodePudding

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.

CodePudding user response：

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>

CodePudding user response：

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>