jquery单页网站导航插件One Page Nav

所属分类:导航-垂直导航

 32335  325  查看评论 (4)
分享到微信朋友圈
X
jquery单页网站导航插件One Page Nav ie兼容6
,     changeHash: false,     scrollSpeed: 750,     scrollThreshold: 0.5,     filter: '',     easing: 'swing',     begin: function() {         //I get fired when the animation is starting     },     end: function() {         //I get fired when the animation is ending     },     scrollChange: function($currentListItem) {         //I get fired when you enter a section and I pass the list item of the section      } });


如果你想要改变当用户单击导航,然后改变changeHash选项为true。

如果你想过滤项目从你的导航然后传入一个选择器过滤选项。

<ul id="nav">
    <li class="current"><a href="#section-1">Section 1</a></li>
    <li><a href="#section-2">Section 2</a></li>
    <li><a href="#section-3">Section 3</a></li>
    <li><a href="#section-4">Section 4</a></li>
    <li><a href="#section-5">Section 5</a></li>
    <li><a href="http://google.com" class="external">Some other link</a></li>
</ul>
$('#nav').onePageNav({
    filter: ':not(.external)'
});

如果你在iOS设备上单击链接导航导致 其他链接断掉,你可以通过滚动操作来解决这个问题

$('#nav').onePageNav({
    begin: function() {
        //Hack so you can click other menu items after the initial click
        $('body').append('<div id="device-dummy" style="height: 1px;"></div>');
    },
    end: function() {
        $('#device-dummy').remove();
    }
});
相关插件-垂直导航

jquery下拉菜单导航

jquery hover事件下拉菜单导航仿京东商城商品分类导航样式布局,通过鼠标滑过商品分类导航展示商品分类子菜单内容的效果
  垂直导航
 46525  368

Css多级侧边栏导航

纯Css多级侧边栏导航
  垂直导航
 43101  395

jQuery仿京东移动web端商品分类两侧滑动效果

jQuery仿京东移动web端商品分类导航滑动效果展示
  垂直导航
 54577  476

jquery左侧导航滑动网页定位效果

jquery左侧导航滑动网页定位效果
  垂直导航
 79158  547

讨论这个项目(4)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    假牙 0
    2019/11/26 12:35:34
    请问移动端需要流出顶部header位置 怎么修改 回复
    我的王,my lord! 0
    2016/6/14 18:06:02
    Mr.LTx 0
    2015/4/29 13:52:02
    大圣 0
    2014/5/17 10:31:00
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复