3

是否可以在 Foundation 中没有顶部栏折叠到菜单和三行。我们并不真正需要此功能，但不确定如何禁用折叠。

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

4

4 回答 4

5

如果您通过 sass 使用 Foundation，那么还有一种更好的方法。只需打开 _settings.scss 文件并找到这一行：

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

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

于 2013-10-01T15:53:57.627 回答
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 {
于 2014-02-20T01:44:12.227 回答
1

是的，在不修改任何 js 文件的情况下，可以使用菜单切换图标不显示小屏幕的默认导航菜单。Foundation 4 使用一系列可见性类来显示和隐藏屏幕上的元素以及媒体查询。

作为示例，这里是上面链接的 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 的相应行甚至全局变量来覆盖，以便这是默认视图。

于 2013-07-18T04:57:27.190 回答
1

如果您直接使用 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。奇迹般有效。

于 2013-09-02T20:02:03.947 回答