极品分享

最常用的5款jquery导航插件

本文是《最常用的5款jquery导航插件》系列的第一篇，整个文章系列还会为大家分享一下分类的jquery插件：视频插件，滑块和转盘插件，网页布局插件，综合插件，表格插件，图表插件，图片特效插件等

HorizontalNav

这是一款水平方向的 jQuery 导航插件，能够自适应容器的宽度。使用示例：

　　HTML：

<nav class="horizontal-nav full-width horizontalNav-notprocessed">

<ul>

<li><a href="#">Navigation Item</a></li>

<li><a href="#">Work</a></li>

<li><a href="#">Blog</a></li>

<li><a href="#">About</a></li>

<li><a href="#">Contact</a></li>

</ul>

</nav>

　　CSS：

　　JavaScript：

1

2

3

4

$(document).ready(function() {

// Call horizontalNav on the navigations wrapping element

$('.full-width').horizontalNav({});

});

插件下载效果演示

stickyMojo

stickyMojo 是一款轻量的，灵活的侧栏固定导航插件，兼容 Firefox, Chrome, Safari, 以及 IE8+。

在 IE 更低版本的浏览器能够优雅降级处理，使用示例：

　　HTML：

<div id="wrapper">

<div id="sidebar">

<p>sidebar</p>

</div>

<div id="main">

<p>main</p>

</div>

<div id="footer">

Footer

</div>

</div>

　　CSS：

　　JavaScript：

$(document).ready(function(){

$('#sidebar').stickyMojo({footerID: '#footer', contentID: '#main'});

});

插件下载效果演示

ddSlick

ddSlick 是一款非常轻量的插件，能够帮助你实现自定义的下拉导航菜单效果（需要翻墙），使用示例：

$('#demoBasic').ddslick({

data: ddData,

width: 300,

imagePosition: "left",

selectText: "Select your favorite social network",

onSelected: function (data) {

console.log(data);

}

});

插件下载效果演示

jQuery Collapse

jQuery Collapse 这个插件为您提供一个方便和轻量级的解决方案，实现风格各异的折叠导航功能，使用示例：

<div id="demo" data-collapse="accordion persist">

<h2>Fruits</h2>

<ul>

<li>Apple</li>

<li>Pear</li>

<li>Orange</li>

</ul>

<h2>Hint</h2>

<div>

<p>One fruit a day keeps the doctor away</p>

</div>

<h2>Third</h2>

<p>Just a paragraph here</p>

</div>

data-collapse 属性能够自动触发脚本，更详细教程参考这里：使用帮助。

插件下载效果演示

jQuery Accordion

Akordeon 提供了一种实现手风琴效果的轻量解决方案，能够在有限的空间内展现各种形式的数据，使用示例：

<div class="akordeon">

<div class="akordeon-item">

<div class="akordeon-item-head">

<div class="akordeon-item-head-container">

<div class="akordeon-heading">

Header Here

</div>

</div>

</div>

<div class="akordeon-item-body">

<div class="akordeon-item-content">

Contents here

</div>

</div>

</div>

<div class="akordeon-item-head">

<div class="akordeon-item-head-container">

<div class="akordeon-heading">

Header Here

</div>

</div>

</div>

<div class="akordeon-item-body">

<div class="akordeon-item-content">

Contents here

</div>

</div>

</div>

<script>

$(document).ready(function () {

$('.akordeon').akordeon();

});

</script>

特别说明：需要翻墙访问（⊙﹏⊙b汗）

插件下载效果演示

最后推荐一款强大的导航菜单在线制作工具》CSS Menu Maker

2014-05-21 1596 0 /

jQuery

/

标签:

评论回复