这是一款jQuery和css3时尚二级下拉导航菜单插件。当你的网站上有非常多的子栏目，你的导航菜单应该如何布局才能使用户得到最佳体验效果？你也可以像这个jQuery和css3炫酷隐藏侧边栏菜单特效插件一样将子菜单都隐藏起来。在这个插件中我们不这样做，我们制作一个巨型的下拉导航菜单，里面可以有二级菜单和图文介绍和图标文字介绍等等内容。

插件中使用的图标来自于Dario Ferrando，你可以在Freebiesbug.com免费下载它们。

HTML结构

html结构使用一个嵌套的无序列表结构。我们创建4个主要的section：<header>、<main>、<nav>和.cd-search<div>。你一定想知道导航为什么不放到header中？因为我们在大屏幕上（分辨率大于1170px）使用jQuery将它放到header里面。在小屏幕设备上，它很容易作为一个单独的元素进行处理。

<header class="cd-main-header">
  <a class="cd-logo" href="#0"><img src="img/cd-logo.svg" alt="Logo"></a>
 
  <ul class="cd-header-buttons">
    <li><a class="cd-search-trigger" href="#cd-search">Search<span></span></a></li>
    <li><a class="cd-nav-trigger" href="#cd-primary-nav">Menu<span></span></a></li>
  </ul> <!-- cd-header-buttons -->
</header>
 
<main class="cd-main-content">
  <!-- your content here -->
  
  <div class="cd-overlay"></div>
</main>
 
<nav class="cd-nav">
  <ul id="cd-primary-nav" class="cd-primary-nav is-fixed">
    <li class="has-children">
      <a href="#0">Clothing</a>
 
      <ul class="cd-secondary-nav is-hidden">
        <li class="go-back"><a href="#0">Menu</a></li>
        <li class="see-all"><a href="#0">All Clothing</a></li>
        <li class="has-children">
          <a href="#0">Accessories</a>
 
          <ul class="is-hidden">
            <li class="go-back"><a href="#0">Clothing</a></li>
            <li class="see-all"><a href="#0">All Accessories</a></li>
            <li class="has-children">
              <a href="#0">Beanies</a>
 
              <ul class="is-hidden">
                <li class="go-back"><a href="#0">Accessories</a></li>
                <li class="see-all"><a href="#0">All Benies</a></li>
                <li><a href="#0">Caps</a></li>
                <li><a href="#0">Gifts</a></li>
                <li><a href="#0">Scarves</a></li>
              </ul>
            </li>
            <li><!-- ... --></li>
          </ul>
        </li>
 
        <li><!-- ... --></li>
        <li><!-- ... --></li>
        <li><!-- ... --></li>
      </ul>
    </li>
 
    <li class="has-children">
      <!-- ... -->
    </li>
 
    <li class="has-children">
      <!-- ... -->
    </li>
 
    <li><a href="#0">Standard</a></li>
  </ul> <!-- primary-nav -->
</nav> <!-- cd-nav -->
 
<div id="cd-search" class="cd-search">
  <form>
    <input type="search" placeholder="Search...">
  </form>
</div>

CSS样式

CSS样式十分简单，你可以下载文件来自行研究一下。有一件事必须指出，我们位导航菜单创建了两个class，这两个样式稍有一些不同：

  • nav-is-fixed - 用于固定导航。
  • nav-on-left - 如果你希望在移动手机设备上导航在左侧就使用它。