基金会的移动菜单断点

2 回答

• 0

  我发现的所有解决方案都是 .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 中显示 hamburger （尽可能多的调用） . 因此，中小型设备将显示 hamburger ，其余设备将显示常规导航 .

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

  回复于 2024-05-02T00:08:01+08:00
• 0

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

  根据断点的设置，您可以为中型屏幕创建第二个导航菜单，然后使用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>
  

  回复于 2024-05-02T00:08:01+08:00