自定义移动导航：水平菜单，垂直子菜单

问题描述

我在Woocommerce中使用店面子主题。我想创建一个看起来像图片的“移动”（手持）菜单，主要项目在水平线上位于顶部，子项目在垂直下方。

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

解决方法

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

• 有一个主nav容器，其中包含两个子ul列表（top-menu和dropdown-menu）。根据您的屏幕截图，在响应模式下，它应具有height: 100vh。

• 两个ul标签都将显示：flex应用于它们，但是对于下拉菜单，您将需要将flex-direction: column添加到下拉菜单容器中。 （无需将flex-direction: row添加到.top-menu，display: flex已默认添加。

• .top-menu也将具有justify-content: space-between，因此它占据了导航的整个宽度，并且它们之间的边距相等。

• dropdown-menu将有justify-content: flex-start。

• 使用JS，您将根据在顶部菜单上选择的内容为下拉列表呈现不同的内容。

• 在那之后，您将不得不尝试一些样式，字体等。

工作片段：

* {
  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>