是否可以禁用顶部栏在移动设备上折叠的默认行为?我有一个左手菜单和右手菜单。我想让右侧菜单在所有屏幕尺寸上都完全相同,并且不希望它在手机/平板电脑上折叠。
所以桌面版在左侧有几个菜单项,在右侧显示三个图标,每个图标都有一个下拉菜单。我希望右侧菜单在手机上看起来完全一样,左侧菜单会正常折叠。
这是我想在移动设备上实现的:
还有这个 JS fiddle :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>
最佳答案
首先添加以下CSS来覆盖foundation.css:
.top-bar-section ul {
width: auto !important;
height: auto !important;
display: inline !important;
}
.row:before, .row:after {
content: " " !important;
display: table !important;
}
.top-bar-section ul li {
float: left !important;
}
.top-bar-section .has-dropdown > a:after {
content: "";
display: block;
width: 0;
height: 0;
border: inset 5px;
border-color: rgba(255, 255, 255, 0.4) transparent transparent transparent;
border-top-style: solid;
margin-top: -2.5px;
top: 22.5px;
}
.top-bar-section .has-dropdown > a {
padding-right: 35px !important;
}
.top-bar-section .right li .dropdown {
left: auto !important;
right: 0 !important;
}
.top-bar-section .dropdown {
left: 0 !important;
top: auto !important;
background: transparent !important;
min-width: 100% !important;
}
.top-bar-section li.active:not(.has-form) a:not(.button) {
padding: 0 15px !important;
line-height: 45px !important;
color: white !important;
background: #008cba !important;
}
.top-bar-section .has-dropdown.hover > .dropdown, .top-bar-section .has-dropdown.not-click:hover > .dropdown {
display: block !important;
position: static !important;
height: auto !important;
width: auto !important;
overflow: visible !important;
clip: auto !important;
position: absolute !important;
}
然后您必须更改您的 HTML 标记。
在你的 FIDDLE 中你有一个 div.right
。把它改成ul.right
,放到ul.left
里。
查看此 DEMO
关于javascript - Foundation 5 topbar - 在移动设备上禁用 JS 菜单折叠,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26389740/