是否可以禁用顶部栏的默认行为以在移动设备上折叠?我有一个左手菜单和右手菜单 . 我希望在所有屏幕尺寸上保持右手菜单完全相同,并且不希望它在移动设备/平板电脑上崩溃 .
因此,桌面版左侧和右侧有几个菜单项,它显示三个图标,每个图标都有一个下拉列表 . 我希望右手菜单在手机上看起来完全一样,左手菜单会正常折叠 .
这就是我想在手机上实现的目标:
这个JS小提琴:http://jsfiddle.net/z9d6jh8n/告诉你我有多接近 .
我一直在努力解决这个问题 . 有人可以帮忙吗?
原始代码:
<nav class="top-bar" data-topbar >
<ul class="title-area">
<!-- Title Area -->
<li class="name"> </li>
<li class="toggle-topbar menu-icon"><a href="#"><span></span></a></li>
</ul>
<section class="top-bar-section">
<!-- main nav section -->
<ul class="left">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
<li class="has-dropdown"><a href="#">Links</a>
<ul class="dropdown">
<li><a href="#" class="">Dropdown Level 1</a></li>
<li><a href="#">Dropdown Option</a></li>
<li><a href="#">Dropdown Option</a></li>
</ul>
</li>
</ul>
<!--Language, account, currency section-->
<ul class="right">
<li class="has-dropdown" id="account">
<a href="#" class="top-bar-colour1"><i class="fi-en"></i></a>
<ul class="dropdown"><li><a href="#">Languages</a></li></ul>
</li>
<li class="has-dropdown" id="basket">
<a href="#" class="top-bar-colour2"><i class="fi-dollar"></i></a>
<ul class="dropdown"><li><a href="#">Currency</a></li></ul>
</li>
<li class="has-dropdown" id="currency">
<a href="#" class="top-bar-colour3"><i class="fi-lock medium"></i></a>
<ul class="dropdown"><li><a href="#">Login</a></li></ul>
</li>
</ul>
</section>
</nav>
2 回答
首先添加以下CSS来覆盖foundation.css:
然后你必须改变你的HTML标记 .
在你的FIDDLE中你有一个
div.right
. 将其更改为ul.right
并将其从ul.left
中删除 .See this DEMO
将此添加到您的CSS:
这是小提琴http://jsfiddle.net/4gp2hojw/