js动画进度导航插件Progress Nav

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

 1594  17  查看评论 (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>
相关插件-垂直导航,独立的部件

jQuery后台左侧菜单导航

jQuery导航菜单 适用于后台网站侧边多级下拉导航菜单
  垂直导航
 42010  284

基于jQuery的垂直菜单特效

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

jQuery垂直四级导航

jQuery垂直下拉多级菜单
  垂直导航
 6742  40

超酷的SVG左侧导航栏特效

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

讨论这个项目(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也好啊

    回复
取消回复