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

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

您可能感兴趣的相关文章

 

HorizontalNav

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

这是一款水平方向的 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({});  });

  插件下载     效果演示

 

stickyMojo

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

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'});  });

   插件下载     效果演示

 

ddSlick

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

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

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

   插件下载     效果演示

 

jQuery Collapse

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

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

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

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

您可能感兴趣的相关文章

   

本文链接:2012年最有用的50款 jQuery 插件集锦——导航篇

编译来源:前端里 ◆ 关注前端开发技术 ◆ 分享网页设计资源

赞 (0) 打赏

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏