js动画进度导航插件Progress Nav

所属分类:导航,其他-垂直导航,独立的部件

 2761  22  查看评论 (3)
js动画进度导航插件Progress Nav ie兼容12

Progress Nav

这个页面演示了如何在标准页面导航中显示进度的想法。 滚动页面并记下标记如何动画以突出显示当前屏幕上的所有部分。

发布时间:2018-1-18 1:18

使用方法

引用所需要的文件

<link href="style.css" rel="stylesheet" type="text/css" />
<script src="script.js"></script>

导航代码

<nav class="toc">
  <ul>
    <li><a href="#intro">Intro</a></li>
    <li> <a href="#dev">Developer Mode</a>
      <ul>
        <li><a href="#dev-edit-html">Edit HTML</a></li>
        <li><a href="#dev-element-classes">Element Classes</a></li>
        <li><a href="#dev-slide-classes">Slide Classes</a></li>
        <li><a href="#dev-export-html">Export HTML</a></li>
      </ul>
    </li>
    <li> <a href="#css">CSS Editor</a>
      <ul>
        <li><a href="#css-fonts">Custom Fonts</a></li>
        <li><a href="#css-developer-mode">Developer Mode</a></li>
        <li><a href="#css-examples">Examples</a></li>
      </ul>
    </li>
  </ul>
  <svg class="toc-marker" width="200" height="200" xmlns="http://www.w3.org/2000/svg">
    <path stroke="#444" stroke-width="3" fill="transparent" stroke-dasharray="0, 0, 0, 1000" stroke-linecap="round" stroke-linejoin="round" transform="translate(-0.5, -0.5)" />
  </svg>
</nav>

页面中加入对应所需要的锚点位置即可

<a href="#css">CSS editor</a>
相关插件-垂直导航,独立的部件

超酷的SVG左侧导航栏特效

超酷的SVG左侧导航栏特效(Cool SVG left navigation bar effects)
  垂直导航
 12169  116

手机端jQuery响应式菜单栏

手机端响应式菜单栏,请把浏览器宽度调整到640像素查看效果
  垂直导航
 22533  70

基于jQuery的垂直菜单特效

网站上常用的到的垂直菜单,基于jQuery的垂直菜单特效
  垂直导航
 17411  74

jQuery旅游网站导航

简单的旅游网站导航,加入了ie6对png的支持
  垂直导航
 2973  19

讨论这个项目(3)回答他人问题或分享插件使用方法奖励jQ币

    WhySoSerious 0
    2018/1/18 10:02:49
    能否针对ie兼容一下
        alone but happily0
        2018/1/19 10:55:27

        这种插件对IE低版本没必要兼容

        WhySoSerious0
        2018/1/22 13:49:33

        兼容11也好啊

    回复
取消回复