Question

当我调整浏览器大小时，移动设备菜单会显示在 568x320 ，其中默认断点为。

所以我想做的是在 900px 周围创建一个断点来摆脱菜单问题（菜单很大），如下图所示，但我不知道如何去做吧。我已经尝试了5个小时。直，我无法弄清楚。有帮助吗？的 Fiddle here 即可。感谢。

<nav class="top-bar" data-topbar role="navigation">
    <ul class="title-area">
        <li class="name">
            <h1><a href="#">My Site</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="has-dropdown"> <a href="#">Right Button Dropdown</a>

                <ul class="dropdown">
                    <li><a href="#">First link in dropdown</a>

                    </li>
                    <li class="active"><a href="#">Active link in dropdown</a>

                    </li>
                </ul>
            </li>
        </ul>
    </section>
</nav>

Answer 1

我找到的所有解决方案都是.scss，我使用普通.css。所以就是这样：

@media only screen and (max-width: 64.063em) {
    meta.foundation-mq-topbar {
        font-family: "/only screen and (min-width:64.063em)/";
        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;
    }
}

解决了我的问题。我只想改变刹车点。我想在max-width: 64.063em中显示汉堡包（尽可能多的电话）。因此，中小型设备将显示汉堡包，其余设备将显示常规导航。

这是它的小提琴：https://jsfiddle.net/labanino/99sz3wt0/5/embedded/result/

Answer 2

目前尚不清楚是否要使用右手下拉菜单替换所有屏幕上的菜单，或者如果您只是想在某些屏幕宽度下摆脱它。我认为它是第二个，这是这个例子的用途。

根据断点的设置，您可以为中画面创建第二个导航菜单，然后使用visibility classes显示900px到1024px菜单的下拉菜单。

如果您需要调整或创建新的断点here's some helpful info。

看起来像这样：Fiddle

<nav class="top-bar" data-topbar role="navigation">
    <ul class="title-area">
        <li class="name">
             <h1><a href="#">My Site</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 show-for-medium-only">
            <li class="has-dropdown"> <a href="#">Right Button Dropdown</a>

                <ul class="dropdown">
                    <li><a href="#">First link in dropdown</a>

                    </li>
                    <li class="active"><a href="#">Active link in dropdown</a>

                    </li>
                </ul>
            </li>
        </ul>
        <ul class="right show-for-large-only">
            <li><a href="#">First link in dropdown</a></li>
            <li class="active"><a href="#">Active link in dropdown</a></li>
        </ul>
</section>
</nav>

基金会中的移动菜单断点

2 个答案: