Question

我正在使用Zurb Foundation，我想创建一个固定在窗口底部的导航栏。我已正确定位，但无法看到下拉菜单，因为它们出现在窗口底部下方。

如何让菜单从导航中删除而不是下拉？

这是一个显示隐藏菜单的codepen：http://cdpn.io/lnqFL

<div class="fixed-bottom">
  <nav class="top-bar" id="menu" data-topbar>
    <ul class="title-area">
      <li class="name"></li>
      <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
    </ul>

    <section class="top-bar-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>
         </ul>
       </li>
    </ul>
    </section>
  </nav>
</div>

这是我用来定位导航的菜单类：

#menu {
  margin-bottom: 0;
  bottom: 0;
  position: fixed;
  width: 100%;
}

Answer 1

@ bigfish66让我走了一半，但在小屏幕上，数据选项值被忽略了。为了让菜单始终放下，我从较大屏幕上的下拉菜单中取出了css，并将其应用于！important以覆盖元素样式，将菜单放回较小屏幕上的按钮下方。

<button data-dropdown="drop1" aria-controls="drop1" data-options="align:top" aria-expanded="false">Has Dropdown</button>
<ul id="drop1" class="f-dropdown" data-dropdown-content aria-hidden="true" tabindex="-1">
  <li><a href="#">This is a link</a></li>
  <li><a href="#">This is another</a></li>
  <li><a href="#">Yet another</a></li>
</ul>

#drop1:before {
    bottom: -14px !important;
    top: auto !important;
    content: "";
    display: block;
    width: 0;
    height: 0;
    border: inset 6px;
    border-top-style: solid;
    position: absolute;
    left: 10px;
    right: auto;
    z-index: 89;
    border-color: white transparent transparent transparent;
}

#drop1:after {
    bottom: -14px !important;
    top: auto !important;
    content: "";
    display: block;
    width: 0;
    height: 0;
    border: inset 7px;
    border-color: #cccccc transparent transparent transparent;
    border-top-style: solid;
    position: absolute;
    left: 9px;
    right: auto;
    z-index: 88;
}

#drop1 {
    top: 227px !important;
}

Answer 2

您可以将它们与数据选项属性对齐...这样就可以与顶部对齐：

<section class="top-bar-section">
<ul class="right">
   <li class="has-dropdown">
     <a href="#" data-options = "align:top" >Right Button Dropdown</a>
     <ul class="dropdown">
        <li><a href="#">First link in dropdown</a></li>
     </ul>
   </li>
</ul>
</section>

此处的文档：Dropdowns

Zurb Foundation：使用底部固定导航栏（而不是下拉列表）下拉菜单

2 个答案: