当我调整浏览器大小时,移动菜单 显示在默认断点所在的 568x320 处。
所以我想做的是在 900px 附近创建一个断点,以消除菜单问题(菜单太大),如下图所示,但我不知道该怎么做去做吧。我已经尝试了 5 个小时。直,我想不通。有什么帮助吗? <强> Fiddle here 强>。谢谢。
<nav class="top-bar" data-topbar role="navigation">
<ul class="title-area">
<li class="name">
<h1><a href="#">My Site</a></h1>
</li>
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
<li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a>
</li>
</ul>
<section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="right">
<li class="has-dropdown"> <a href="#">Right Button Dropdown</a>
<ul class="dropdown">
<li><a href="#">First link in dropdown</a>
</li>
<li class="active"><a href="#">Active link in dropdown</a>
</li>
</ul>
</li>
</ul>
</section>
</nav>
最佳答案
我找到的所有解决方案都是 .scss
,而我使用的是普通 .css
。就是这样:
@media only screen and (max-width: 64.063em) {
meta.foundation-mq-topbar {
font-family: "/only screen and (min-width:64.063em)/";
width: 64.063em;
}
.top-bar {
overflow: hidden;
height: 2.8125rem;
line-height: 2.8125rem;
position: relative;
background: #333;
margin-bottom: 0;
}
.top-bar-section {
left: 0;
position: relative;
width: auto;
transition: left 300ms ease-out;
}
.top-bar-section ul {
padding: 0;
width: 100%;
height: auto;
display: block;
font-size: 16px;
margin: 0;
}
.top-bar .toggle-topbar.menu-icon {
top: 50%;
margin-top: -16px;
display:block;
}
.top-bar .title-area {
float: none;
}
}
解决了我的问题。我只是想改变刹车点。我希望汉堡包(尽可能多的调用)以max-width: 64.063em
显示。因此,中小型设备将显示汉堡包,其余设备将显示常规导航。
这是它的 fiddle :https://jsfiddle.net/labanino/99sz3wt0/5/embedded/result/
关于jquery - Foundation 中的移动菜单断点,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32854455/