如何根据 Vanilla Javascript 中的菜单控制列？

Question

如果菜单超过 4 个，我想将菜单显示为单独的列。我需要在 Vanilla Javascript 中实现这一点。下面是我的 html 和 CSS，我不确定如何在 Vanilla Javascript 中实现这一点。谁能指导一下吗？

.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>

任何帮助将不胜感激。

提前致谢。

Answer 1

我们可以使用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>

Answer 2

要根据菜单分隔列，您可以尝试以下脚本，

  (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>

如何根据 Vanilla Javascript 中的菜单控制列？

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

html

javascript

css

list

conditional-statements