Question

是否可以不让Foundation中的顶栏折叠到Menu和三行。我们并不真正需要此功能，但不确定如何禁用崩溃。

这需要修改foundation.topbar.js吗？

Answer 1

如果您通过sass使用Foundation，那么可以采用更好的方法。只需打开_settings.scss文件并找到以下行：

// $topbar-breakpoint: emCalc(940px); // Change to 9999px for always mobile layout

取消注释并将值更改为0，或者您想要使用的任何断点。

Answer 2

基础5.1.1的情况发生了变化，这在css中对我有用：改变了

@media only screen and (min-width: 40.063em) {
  .top-bar {

到

@media only screen and (min-width: 4.063em) {
  .top-bar {

Answer 3

是的，可以不使用菜单切换图标显示小屏幕的默认导航菜单，而无需修改任何js文件。 Foundation 4使用一系列visibility classes来显示和隐藏屏幕上的元素以及media queries。

这里的例子是上面链接的Zurb演示网站的主要导航：

<nav class="top-bar hide-for-small" style="">
  <ul class="title-area">
    <!-- Title Area -->
    <li class="name">
      <h1><a href="/">Foundation</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="divider"></li>
      <li class=""><a href="/grid.php">Features</a></li>
      <li class="divider"></li>
      <li class=""><a href="/templates.php">Add-ons</a></li>
      <li class="divider"></li>
      <li class=""><a href="/case-jacquelinewest.php">Case Studies</a></li>
      <li class="divider"></li>
      <li class=""><a href="/docs/">Docs</a></li>
      <li class="divider"></li>
      <li class=""><a href="/training.php">Training</a></li>
      <li class="divider"></li>
      <li class="has-form">
        <a href="http://foundation.zurb.com/docs" class="button">Getting Started</a>
      </li>
    </ul>
  </section></nav>

您可以看到删除.menu-icon类甚至li很简单;如果查看docs.css的第2816行，您可以看到为.top-bar类设置了最小屏幕断点（58.75em）：

@media only screen and (min-width: 58.75em) {
.top-bar {
background: #111111;
*zoom: 1;
overflow: visible; }
.top-bar:before, .top-bar:after {
  content: " ";
  display: table; }
.top-bar:after {
  clear: both; }
.top-bar .toggle-topbar {
  display: none; }
.top-bar .title-area {
  float: left; }
.top-bar .name h1 a {
  width: auto; }
...

由于F4默认采用移动优先设计方法构建，因此菜单设置为小屏幕。在最小宽度为58.75 em时，断点设置为修改较大屏幕的默认.top-bar视图，以便菜单ul以内联方式显示，子li向左浮动。

您可以覆盖.top-bar，以便通过覆盖css / scss的相应行甚至全局变量来保证这是默认视图。

Answer 4

如果你直接使用Foundation CSS，你可以通过将以下CSS行中的断点更改为0em来覆盖.top-bar菜单的移动模式：

.top-bar-js-breakpoint {
  width: 58.75em !important;
  visibility: hidden; }

.js-generated {
  display: block; }

@media only screen and (min-width: 58.75em) {
----- numerous lines below -------

但是，如果您在WordPress或其他CMS中使用子主题，则必须复制实际媒体查询下方的所有.top-bar相关选择器并将其粘贴到您的子CSS中，然后更改断点到0.就像一个魅力。

Zurb Foundation - 顶栏 - 不要折叠到菜单

4 个答案: