2012年最有用的50款 jQuery 插件集锦——《导航篇》
2012年最有用的50款 jQuery 插件集锦——《导航篇》
继续向大家分享 2012 年发布的优秀 jQuery 插件，今天带来的实现导航功能的插件。2012年众多的 jQuery 新插件发布出来，可以说是一个伟大的 jQuery 年份。这个系列的文章向大家分享最具创新的，同时也是最有用的50款 jQuery 插件，这些插件分成以下 类别：网页布局插件，导航插件，表格插件，滑块和转盘插件，图表插件，图片特效插件，视频插件等等。
您可能感兴趣的相关文章
最有用的50款 jQuery 插件集锦-网页布局篇 精心挑选的优秀jQuery Ajax分页插件和教程 精心挑选的优秀 jQuery 文本特效插件和教程 2013年最值得大家关注的网页设计流行趋势 精心挑选的美轮美奂的 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：
$(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 是一款非常轻量的插件，能够帮助你实现自定义的下拉导航菜单效果（需要FQ），使用示例：
$( '#demoBasic' ).ddslick({
data: ddData,
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 >
特别说明：需要FQ访问（⊙﹏⊙b汗）
插件下载 效果演示
您可能感兴趣的相关文章
60款非常酷的 jQuery 幻灯片演示和下载 15个款优秀的 jQuery 图片特效插件推荐 几款优秀的 jQuery Ajax 分页插件和教程 Web开发者必备的20款超赞 jQuery 插件 分享23款美轮美奂的 jQuery 图片特效插件
本文链接： 2012年最有用的50款 jQuery 插件集锦——导航篇
编译来源： 梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源
推荐阅读 ◆ 最受欢迎的文章 期待已久的2012年度最佳 jQuery 插件揭晓 Web 前端工程师和设计师必读精华文章推荐 分享10套精美的免费网站后台管理系统模板 分享13套非常精美 Web 应用程序图标素材 12款优秀的Twitter Bootstrap组件和工具 8个非常惊艳的 HTML5 和 JavaScript 特效 35款特别精致的 HTML5 和 CSS3 网页模板 60款值得珍藏的 jQuery 幻灯片演示和下载
分享到： 新浪微博 QQ空间 腾讯微博 人人网 开心网 豆瓣 0
作者： 山边小溪
出处： jizhula测试数据 记住啦：）
欢迎任何形式的转载，但请务必注明出处。
分类: jQuery , 原创翻译
标签: jQuery , jQuery导航插件 , 网页导航插件
作者： Leo_wl
出处： http://HdhCmsTestcnblogs测试数据/Leo_wl/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
版权信息查看更多关于2012年最有用的50款 jQuery 插件集锦——《导航篇》的详细内容...