头像

Tocify动态生成左侧智能定位导航

来源:http://www.sucaihuo.com/js/564.html 素材火管理员 2015-11-15 05:05浏览(745) 收藏

Tocify是一个能够动态生成菜单导航的jQuery插件。比如有一篇很长的文章,文章有多个节点,那么使用Tocify可以根据节点元素动态生成文章目录,点击目录可以平滑的滚动到相应的节点。另外Tocify还支持移动端浏览器哦!~
Tocify动态生成左侧智能定位导航
分类:悬浮层/弹出层 > 悬浮层 难易:中级

程序员,你不是一个人;网站开发QQ群:35291327 在线充值,或联系QQ416148489直接充值

查看演示 下载资源: 125 下载资源 下载积分: 20 积分

内容节点,h2一级菜单,h3是对应子级

<div class="wrap"> 
    <h1>Tocify</h1> 
    <br /> 
    <section> 
        <h2>网站模板</h2> 
        <p>内容</p> 
    </section> 
    <br /> 
    <section> 
        <h2>网页特效</h2> 
        <p>内容</p> 
        <h3>导航菜单</h3>
        <h3>客服代码</h3>
    </section> 
</div>

引入tocify相关插件

<link type="text/css" rel="stylesheet" href="jquery.tocify.css" /> 
<link type="text/css" rel="stylesheet" href="bootstrap.css" /> 
<script src="jquery-1.7.2.min.js"></script> 
<script src="jquery-ui-1.9.1.custom.min.js"></script> 
<script src="jquery.tocify.min.js""></script>

创建一个生成菜单的地方,样式你可以自定义

<div id="toc"></div>

tocify生成动态导航菜单

$(function() { 
  $("#toc").tocify(); 
});
标签: 定位智能
评论4
头像

友情提示:垃圾评论一律封号...

  • 头像 3楼
    09-03 14:30
    1405366033
    太棒了,非常好
  • 头像 板凳
    01-08 09:58
    Star
    这个太棒了。
  • 头像 椅子
    01-07 10:56
    joyer
    真是太棒了,非常谢谢版主!
  • 头像 沙发
    01-07 10:34
    hanquantao
    每天都有惊喜!谢谢管理员
1 2