在移动设备和平板电脑尺寸上使用移动菜单（汉堡）为基础 5 站点答案

【问题标题】：Use Mobile menu (burger) on mobile and tablet sizes for a foundation 5 site在移动设备和平板电脑尺寸上使用移动菜单（汉堡）为基础 5 站点
【发布时间】：2015-07-07 18:21:10
【问题描述】：

我确定有人问过这个问题，但我似乎找不到不使用 SASS 的示例。我只有一个正在使用的常规 CSS 文件。我希望汉堡菜单更改为更大尺寸的水平菜单。（@media only screen and (min-width: 64.063em)）我已经看到一些帖子说要像这样更新 settings.scss 文件（http://foundation.zurb.com/forum/posts/1483-customize-topbar-breakpoint-in-scss）但我还是没有使用这个项目的 SASS。我似乎无法弄清楚是什么触发了菜单从移动设备更改为桌面设备：媒体查询或 javascript。

【问题讨论】：

如果你只是升级你的项目以使用 Foundation Sass，那么通过覆盖 Foundation 的默认 CSS 来让它工作会遇到更多的麻烦。可能不是您想听到的，但从长远来看，为切换到 Foundation Sass 所做的少量工作将获得回报。

标签： html css zurb-foundation zurb-foundation-5

【解决方案1】：

如果您想使用 CSS，您可以在 foundation.css 后面的单独 CSS 文件（即：styles.css）部分中覆盖 Foundation CSS

Demo on Codeply

@media only screen and (max-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;
    }
}

http://codeply.com/go/OtVVMn0n6V

【讨论】：

此方法禁用移动菜单表单的工作。在您的演示文件中也是如此。

【解决方案2】：

如果你不想使用SASS，那么你最好改变foundation.css文件。

在第 1682 行左右更改

meta.foundation-mq-topbar {
  font-family: "/only screen and (min-width:40.063em)/";
  width: 40.063em;
}

到

meta.foundation-mq-topbar {
  font-family: "/only screen and (min-width:64.063em)/";
  width: 64.063em;
}

也在 2006 行左右，将其更改为

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

到

@media only screen and (min-width: 64.063em) {

【讨论】：

更改这些数字时汉堡菜单被禁用