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:
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:
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
ddSlick 是一款非常轻量的插件,能够帮助你实现自定义的下拉导航菜单效果(需要FQ),使用示例:
$('#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>
特别说明:需要FQ访问(⊙﹏⊙b汗)
最后推荐一款强大的导航菜单在线制作工具》CSS Menu Maker