本站公告: 暂无公告....

最常用的5款jquery导航插件

工具下载 兰亭楼 0评论 520浏览
本文是《最常用的5款jquery导航插件 》系列的第一篇,整个文章系列还会为大家分享一下分类的jquery插件:视频插件,滑块和转盘插件,网页布局插件,综合插件,表格插件,图表插件,图片特效插件等

HorizontalNav

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:

1
2
3
4
$(document).ready(function() {
    // Call horizontalNav on the navigations wrapping element
    $('.full-width').horizontalNav({});
});
插件下载     效果演示

stickyMojo

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 ddSlick 是一款非常轻量的插件,能够帮助你实现自定义的下拉导航菜单效果(需要翻墙),使用示例:
$('#demoBasic').ddslick({
    data: ddData,
    width: 300,
    imagePosition: "left",
    selectText: "Select your favorite social network",
    onSelected: function (data) {
        console.log(data);
    }
});
插件下载     效果演示

jQuery Collapse

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

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>
特别说明:需要翻墙访问(⊙﹏⊙b汗) 插件下载     效果演示 最后推荐一款强大的导航菜单在线制作工具》CSS Menu Maker

转载请注明: 兰亭楼 » 最常用的5款jquery导航插件

发表我的评论 换个身份
取消评论

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址