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

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

HorizontalNav

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

　　HTML：

?

1 2 3 4 5 6 7 8 9

<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：

View Code

　　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：

?

1 2 3 4 5 6 7 8 9 10 11

< div  id = "wrapper" >    < div  id = "sidebar" >      < p >sidebar</ p >    </ div >    < div  id = "main" >      < p >main</ p >    </ div >    < div  id = "footer" >      Footer    </ div > </ div >

　　CSS：

View Code

　　JavaScript：

?

1 2 3

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

 　　插件下载     效果演示

 

ddSlick

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

?

1 2 3 4 5 6 7 8 9

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

 　　插件下载     效果演示

 

jQuery Collapse

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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14

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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35

< 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

原文地址：http://www.cnblogs.com/lhb25/archive/2013/02/20/50-jquery-plugins-b.html