在 foundation 5 站点的手机和平板电脑尺寸上使用移动菜单（汉堡）

Question

我确定有人问过这个问题，但我似乎找不到不使用 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.

Answer 1

如果你不想使用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) {

Answer 2

如果您想使用 CSS，您可以在 [=12] 之后的单独 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

在 foundation 5 站点的手机和平板电脑尺寸上使用移动菜单（汉堡）

Use Mobile menu (burger) on mobile and tablet sizes for a foundation 5 site

html

css

zurb-foundation

zurb-foundation-5