基础导航

时间:2013-08-21 22:14:41

标签: zurb-foundation nav

我在Zurb的基础导航方面遇到了问题(我是新手,而且我的学习曲线很陡峭而且我已经撞墙了)

我想做几件事:

  1. 切换顶部栏时,左侧有“菜单图标”。
  2. 我想在切换顶栏时有三个部分(标题/中间/菜单)
  3. 非常感谢任何想法或帮助!

    <nav class="top-bar">
    <ul class="title-area">
    <!-- Title Area -->
    <li class="name"><a href="index.html"></a><h1>Title</h1></li>
    <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="divider"></li>
        <li><a href="#"></a></li>
        <li class="divider"></li>
        <li class="has-dropdown"> <a href="#"></a>
        <ul class="dropdown">
                <li class="divider"><a href="#"></a></li>
                <li class="divider"><a href="#"></a></li>
                <li class="divider"><a href="#"></a></li>
                <li class="divider"><a href="#"></a></li>
    
    
    
        </ul>
        </li>
        <li class="divider"></li>
        <li><a href="#">Contact</a></li>
        </ul>
    </section>
    

1 个答案:

答案 0 :(得分:0)

尝试使用此代码:

<nav class="top-bar" data-topbar>
  <ul class="title-area">
    <li class="name">
      <h1><a href="#">My Site</a></h1>
    </li>
    <li class="toggle-topbar menu-icon"><a href="#">Menu</a></li>
  </ul>

  <section class="top-bar-section">
    <!-- Right Nav Section -->
    <ul class="right">
      <li class="has-dropdown">
        <a href="#">Menu</a>
        <ul class="dropdown">
          <li><a href="#">First link in dropdown</a></li>
          <li><a href="#">Second link in dropdown</a></li>
        </ul>
      </li>
    </ul>
  </section>
</nav>

继续:http://foundation.zurb.com/docs/components/topbar.html#