一款非常时尚的jQuery和css3二级下拉导航菜单插件。该导航菜单插件中带有二级子菜单,也可以以图文方式展示或图标加文字方式组合展示,非常灵活方便。
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 - 如果你希望在移动手机设备上导航在左侧就使用它。