如何解决自定义移动导航:水平菜单,垂直子菜单
我在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 & 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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。