在手机和平板电脑上使用移动菜单(汉堡)，用于基础5网站

Question

我确信有人问过这个问题，但我似乎找不到不使用SASS的示例。我只是使用了一个常规的CSS文件。我想把汉堡菜单改成大尺寸的水平菜单。(@media only screen and (min-width: 64.063em)(我看到一些帖子说要像这样更新settings.scs文件(http://foundation.zurb.com/forum/posts/1483-customize-topbar-breakpoint-in-scss)但我再次没有在这个项目中使用SASS。我似乎不明白是什么触发了菜单从手机变为桌面：媒体查询还是javascript。

Answer 1

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

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

Answer 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) {