自定义移动导航：水平菜单、垂直子菜单答案

【问题标题】：customize mobile navigation: horizontal menus, vertical sub-menus自定义移动导航：水平菜单、垂直子菜单
【发布时间】：2020-12-06 11:30:21
【问题描述】：

我正在使用带有 Woocommerce 的 Storefront 子主题。我想创建一个如图所示的移动（手持）菜单，主要项目位于顶部的水平线上，而子项目位于垂直的下方。

<div class="handheld-navigation">
<ul id="menu-mobile-en" class="menu">
    <li id="menu-item-33867" class="wholesale-only-element menu-item menu-item-type-custom menu-item-object-custom menu-item-33867">
        <a href="/index.php/wholesale-ordering/">WHOLESALE SHOP</a>
    </li>
    <li id="menu-item-20858" class="retail-only-element menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-20858">
        <a href="#">SHOP</a>
        <button aria-expanded="false" class="dropdown-toggle">
            <span class="screen-reader-text">Expand child menu</span>
        </button>
        <ul class="sub-menu">
            <li id="menu-item-9404" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-9404">
                <a href="https://staging.mysite.com/all/">All</a>
            </li>
            <li id="menu-item-39924" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-39924">
                <a href="https://staging.mysite.com/eshop2/new/">New</a>
            </li>
            <li id="menu-item-4352" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-4352">
                <a href="https://staging.mysite.com/eshop2/boxers-for-men/">Boxers</a>
            </li>
            <li id="menu-item-4357" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-4357">
                <a href="https://staging.mysite.com/eshop2/briefs/">Briefs</a>
            </li>
            <li id="menu-item-4358" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-4358">
                <a href="https://staging.mysite.com/eshop2/tank-tops/">Tank Tops</a>
            </li>
            <li id="menu-item-4355" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-4355">
                <a href="https://staging.mysite.com/eshop2/t-shirts/">T-shirts</a>
            </li>
            <li id="menu-item-4353" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-4353">
                <a href="https://staging.mysite.com/eshop2/henleys/">Henleys</a>
            </li>
            <li id="menu-item-4354" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-4354">
                <a href="https://staging.mysite.com/eshop2/longjohns/">Longjohns</a>
            </li>
            <li id="menu-item-4356" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-4356">
                <a href="https://staging.mysite.com/eshop2/accessories/">Accessories</a>
            </li>
            <li id="menu-item-34091" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-34091">
                <a href="https://staging.mysite.com/eshop2/last-chance/">Last chance</a>
            </li>
        </ul>
    </li>
    <li id="menu-item-1928" class="retail-only-element menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-1928">
        <a href="#">COLLABS</a>
        <button aria-expanded="false" class="dropdown-toggle">
            <span class="screen-reader-text">Expand child menu</span>
        </button>
        <ul class="sub-menu">
            <li id="menu-item-34207" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-34207">
                <a href="https://staging.mysite.com/mysite-x-poglia/">mysite X POGLIA</a>
            </li>
            <li id="menu-item-27530" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-27530">
                <a href="https://staging.mysite.com/mysite-x-guy-cotten/">mysite X GUY COTTEN</a>
            </li>
            <li id="menu-item-1930" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1930">
                <a href="https://staging.mysite.com/mysite-x-deus/">mysite X DEUS</a>
            </li>
            <li id="menu-item-3285" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3285">
                <a href="https://staging.mysite.com/mysite-x-dwc/">mysite X DWC</a>
            </li>
        </ul>
    </li>
    <li id="menu-item-1925" class="retail-only-element menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-1925">
        <a href="#">DISCOVER</a>
        <button aria-expanded="false" class="dropdown-toggle">
            <span class="screen-reader-text">Expand child menu</span>
        </button>
        <ul class="sub-menu">
            <li id="menu-item-1926" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1926">
                <a href="https://staging.mysite.com/about/">ABOUT</a>
            </li>
            <li id="menu-item-1927" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1927">
                <a href="https://staging.mysite.com/stockists/">STOCKISTS</a>
            </li>
            <li id="menu-item-1929" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1929">
                <a href="https://staging.mysite.com/editorial-ss20/">EDITORIAL SS20</a>
            </li>
        </ul>
    </li>
    <li id="menu-item-lang" class="retail-only-element">
        <div class="flags_top">
            <span class="icl-fr">
                <a rel="alternate" hreflang="fr" href="https://staging.mysite.com/fr/">fr</a>
            </span>  /
                        
            <span class="icl-en icl-current">
                <a rel="alternate" hreflang="en" href="https://staging.mysite.com/">en</a>
            </span>
        </div>
    </li>
    <li id="menu-item-20860" class="wholesale-retail-element menu-item menu-item-type-custom menu-item-object-custom menu-item-20860">
        <a href="https://staging.mysite.com/my-account-2-2/edit-account/">MY ACCOUNT</a>
    </li>
    <li id="menu-item-20866" class="wholesale-retail-element menu-item menu-item-type-post_type menu-item-object-page menu-item-20866">
        <a href="https://staging.mysite.com/cart/">
            <span class="count-cart">2</span>
        </a>
    </li>
    <li id="menu-item-20862" class="wholesale-retail-element menu-item menu-item-type-custom menu-item-object-custom menu-item-20862">
        <a href="https://www.instagram.com/mysite/">INSTAGRAM</a>
    </li>
    <li id="menu-item-20864" class="mobile-menu-shipping-1 retail-only-element menu-item menu-item-type-custom menu-item-object-custom menu-item-20864">
        <a href="#">
            <span class="shipping-menu-item">FREE SHIPPING</span>
            <br>
                <span class="shipping-menu-item">IN FRANCE &amp; EUROPE FROM 150€</span>
            </a>
        </li>
    </ul>
</div>

【问题讨论】：

标签： css wordpress woocommerce storefront

【解决方案1】：

根据您的要求，我认为您可以使用这种方法：

有一个主容器 nav 包含两个子 ul 列表（top-menu 和 dropdown-menu）。根据你的截图，在响应模式下，它应该有height: 100vh。
ul 两个标签都将应用 display: flex，但对于下拉菜单，您将需要将 flex-direction: column 添加到下拉菜单容器中。（.top-menu不用加flex-direction: row，display: flex已经默认加了。
.top-menu 也将有 justify-content: space-between，因此它占据了导航的整个宽度，它们之间的边距相等。
dropdown-menu 将拥有justify-content: flex-start。
使用 JS，您可以根据您在顶部菜单中选择的内容为下拉列表呈现不同的内容。
之后，您将不得不尝试一些样式、字体等。

工作sn-p：

* {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav {
  width: 400px;
  height: 100vh;
  background-color: grey;
  padding: 10px 20px;
}

.active {
  text-decoration: underline;
}

.top-menu {
  display: flex;
  justify-content: space-between;
}

.top-menu li {
  font-weight: bold;
  cursor: pointer;
}

.dropdown-menu {
  width: 100%;
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  text-transform: uppercase;
}


.dropdown-menu li:not(:first-child) {
  margin-top: 20px;
}

<nav>
  <ul class="top-menu">
    <li>SHOPS</li>
    <li>COLLABS</li>
    <li>DISCOVER</li>
    <li class="active">INFO</li>
  </ul>

  <ul class="dropdown-menu">
    <li class="active">Login</li>
    <li>Instagram</li>
    <li>Facebook</li>
    <li>Pinterest</li>
    <li>Log out</li>
  </ul>
</nav>

【讨论】：