Question

我在使用基础图标集时遇到问题。我想在导航栏中使用图标作为下拉菜单的按钮。

<div class="contain-to-grid sticky">
  <nav class="top-bar" data-topbar role="navigation" data-options="sticky_on: large">
    <ul class="title-area">
      <li class="name">
        <a href="#"><img src="http://placehold.it/100x45&text=Logo"/></a>
      </li> 
      <li class="toggle-topbar menu-icon"><a href="#">menu</a></li>
    </ul>
    <section class="top-bar-section">
      <ul class="right">
        <li>
          <i class="fi-thumbnails has-dropdown"></i>
          <ul class="dropdown">
            <li>All</li>
            <li>Art</li>
            <li>Music</li>
            <li>Lifestyle</li>
          </ul>
        </li>
        <li><i class="fi-list has-dropdown" href="#">menu</i></li>
      </ul>
    </section>
  </nav>
</div>

任何建议？

Answer 1

尝试将图标包装在锚标记中，并将href属性设置为#。此外，class="has-dropdown"应移至父列表项。

<ul class="right">
  <li class="has-dropdown">
    <a href="#"><i class="fi-thumbnails"></i></a>
    <ul class="dropdown">
      <li>All</li>
      <li>Art</li>
      <li>Music</li>
      <li>Lifestyle</li>
    </ul>
  </li>
  <li class="has-dropdown">
    <a href="#"><i class="fi-list">menu</i></a>
    <ul class="dropdown">
      <li>Menu Item</li>
    </ul>
  </li>
</ul>

zurb-foundation图标作为下拉菜单

1 个答案: