2012年最有用的50款 jQuery 插件集锦——《导航篇》

怼烎@ 2023-06-02 15:52 7阅读 0赞

继续向大家分享 2012 年发布的优秀 [**jQuery**][jQuery] 插件，今天带来的实现导航功能的插件。2012年众多的 [**jQuery**][jQuery] 新插件发布出来，可以说是一个伟大的 [**jQuery**][jQuery] 年份。这个系列的文章向大家分享最具创新的，同时也是最有用的50款 jQuery 插件，这些插件分成以下类别：网页布局插件，导航插件，表格插件，滑块和转盘插件，图表插件，图片特效插件，视频插件等等。

### 您可能感兴趣的相关文章 ###

*  [最有用的50款 jQuery 插件集锦-网页布局篇][50_ jQuery _-]
 *  [精心挑选的优秀jQuery Ajax分页插件和教程][jQuery Ajax]
 *  [精心挑选的优秀 jQuery 文本特效插件和教程][jQuery 1]
 *  [2013年最值得大家关注的网页设计流行趋势][2013]
 *  [精心挑选的美轮美奂的 jQuery 图片特效插件][jQuery 2]

#### [HorizontalNav][] ####

[![HorizontalNav][HorizontalNav 1]][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： ####

// There is no required CSS for this plugin to work properly // but here is what is being used to style this demo .horizontal-nav { background: #efefef; border-radius: 6px; } .horizontal-nav ul { background: #128F9A; float: left; text-align: center; border-radius: 6px; border: 1px solid #0e7079; } .horizontal-nav ul li { float: left; border-left: 1px solid #0e7079; } .horizontal-nav ul li:first-child { border-left: 0 none; } .horizontal-nav ul li a { display: block; padding: 10px 20px; color: #fff; border-top: 1px solid rgba(255,255,255, 0.25); border-left: 1px solid rgba(255,255,255, 0.25); } .horizontal-nav ul li:first-child a { border-left: 0 none; } .horizontal-nav ul li a:hover { background: #12808a; } .horizontal-nav ul li:first-child a { border-top-left-radius: 6px; border-bottom-left-radius: 6px; } .horizontal-nav ul li:last-child a { border-top-right-radius: 6px; border-bottom-right-radius: 6px; }

#### 　　JavaScript： ####

$(document).ready(function() { // Call horizontalNav on the navigations wrapping element $('.full-width').horizontalNav({}); });

[插件下载][Link 1]     [效果演示][Link 2]

#### [stickyMojo][] ####

[![stickyMojo][stickyMojo 1]][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： ####

body { margin:0; padding:0; } #main { width:750px; height: 750px; /*can be anything, just should make sure it is taller than the sidebar*/ padding: 25px; float: left; background-color: #fafafa; } #sidebar { width: 120px; background-color: #ccc; min-height: 200px; margin: 10px 0 15px 0; /*controls the cutoff of the top and bottom limitations*/ padding: 15px 10px; float: left; /* float right for a right aligned sidebar */ } #footer { width: 940px; clear:both; background-color: #ccc; height: 500px; margin-top: 100px; } #wrapper { width: 940px; /* MUST HAVE WIDTH SET, should be the sidebar width main width */ margin-left: auto; margin-right: auto; }

#### 　　JavaScript： ####

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

[插件下载][Link 3]     [效果演示][stickyMojo]

#### [ddSlick][] ####

[![ddSlick][ddSlick 1]][ddSlick]

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

$('#demoBasic').ddslick({ data: ddData, width: 300, imagePosition: "left", selectText: "Select your favorite social network", onSelected: function (data) { console.log(data); } });

[插件下载][Link 4]     [效果演示][Link 5]

#### [jQuery Collapse][] ####

[![jQuery Collapse][jQuery Collapse 1]][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 属性能够自动触发脚本，更详细教程参考这里：[使用帮助][Link 6]。

[插件下载][Link 7]     [效果演示][jQuery Collapse]

#### [jQuery Accordion][] ####

[![jQuery Accordion][jQuery Accordion 1]][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汗）

[插件下载][Link 8]     [效果演示][Link 9]

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

### 您可能感兴趣的相关文章 ###

*  [60款非常酷的 jQuery 幻灯片演示和下载][60_ jQuery]
 *  [15个款优秀的 jQuery 图片特效插件推荐][15_ jQuery]
 *  [几款优秀的 jQuery Ajax 分页插件和教程][jQuery Ajax]
 *  [Web开发者必备的20款超赞 jQuery 插件][Web_20_ jQuery]
 *  [分享23款美轮美奂的 jQuery 图片特效插件][jQuery 2]

本文链接：[2012年最有用的50款 jQuery 插件集锦——导航篇][50_ jQuery _-]

编译来源：[梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源][_ _ _]

更多专业前端知识，请上 **【猿2048】www.mk2048.com**

[jQuery]: http://www.cnblogs.com/lhb25/category/277997.html
[50_ jQuery _-]: http://www.cnblogs.com/lhb25/archive/2013/02/01/50-jquery-plugins-a.html
[jQuery Ajax]: http://www.cnblogs.com/lhb25/archive/2012/08/08/ajax-jquery-pagination-plugin-tutorial.html
[jQuery 1]: http://www.cnblogs.com/lhb25/archive/2012/08/06/jquery-text-effects-plugins.html
[2013]: http://www.cnblogs.com/lhb25/archive/2013/02/01/web-design-trends-in-2013.html
[jQuery 2]: http://www.cnblogs.com/lhb25/archive/2012/08/13/jquery-image-effects-plugins.html
[HorizontalNav]: http://sebnitu.github.com/HorizontalNav/
[HorizontalNav 1]: http://speckycdn.sdm.netdna-cdn.com/wp-content/uploads/2012/09/new_jquery_18.jpg
[Link 1]: https://github.com/sebnitu/HorizontalNav/zipball/master
[Link 2]: http://sebnitu.github.com/HorizontalNav
[stickyMojo]: http://mojotech.github.com/stickymojo/
[stickyMojo 1]: http://speckycdn.sdm.netdna-cdn.com/wp-content/uploads/2012/09/new_jquery_17.jpg
[Link 3]: https://github.com/mojotech/stickymojo/zipball/master
[ddSlick]: /images/20230601/9ccfbba1dd5440c58d971455d6fadab8.png
[ddSlick 1]: http://speckycdn.sdm.netdna-cdn.com/wp-content/uploads/2012/09/new_jquery_22.jpg
[Link 4]: http://bit.ly/KI2Mzw
[Link 5]: /images/20230601/9ccfbba1dd5440c58d971455d6fadab8.png#demo
[jQuery Collapse]: /images/20230601/e185f0d955cf46eeb7abf7741aefcded.png
[jQuery Collapse 1]: http://speckycdn.sdm.netdna-cdn.com/wp-content/uploads/2012/04/jquery-new-plugin-08.jpg
[Link 6]: https://github.com/danielstocks/jQuery-Collapse/blob/523c08f9747b42251e8a1fd84154ed0a2e1b979a/README.md
[Link 7]: https://github.com/danielstocks/jQuery-Collapse/zipball/1.0
[jQuery Accordion]: http://www.egrappler.com/a-stylo-modern-jquery-accordion-akordeon/
[jQuery Accordion 1]: http://speckycdn.sdm.netdna-cdn.com/wp-content/uploads/2012/04/jquery-new-plugin-16.jpg
[Link 8]: http://www.egrappler.com/akordeon/akordeon.zip
[Link 9]: http://www.egrappler.com/akordeon/index.htm
[CSS Menu Maker]: http://cssmenumaker.com/
[60_ jQuery]: http://www.cnblogs.com/lhb25/archive/2011/05/31/2056103.html
[15_ jQuery]: http://www.cnblogs.com/lhb25/archive/2011/11/20/15-jquery-image-effects.html
[Web_20_ jQuery]: http://www.cnblogs.com/lhb25/archive/2011/02/16/1956557.html
[_ _ _]: http://www.cnblogs.com/lhb25/