dosboy0716/sliding-nav

滑动效果的导航菜单

sliding-nav

滑动效果的导航菜单

Usage

1. Include file sliding-nav.js before tag in a HTML file.

<script src="/path/to/sliding-nav.js"></script>

2. Use class name sliding-nav in a navigation bar element，and use .active for a selected menu item.
3. Use following attributes to change its color,radius and height:sn-color, sn-radius,sn-height. (if no these attributes, default settings following will be used)

<ul class="nav sliding-nav" sn-color="#F00" sn-radius="0px" sn-height="3px">
    <li class="active">menu-item 1</li>
    <li>menu-item 2</li>
    <li>menu-item 3</li>
<ul>

使用方法

1、在标记结束前，引用sliding-nav.js文件 2、在需要滑动条的菜单容器上加类名 sliding-nav，当前项使用类名：active 3、使用属性来定定外观:sn-color="颜色" sn-radius="圆度" sn-height="高度"

<script src="/path/to/sliding-nav.js"></script>
<ul class="nav sliding-nav" sn-color="#F00" sn-radius="0px" sn-height="3px">
    <li class="active">菜单项1</li>
    <li>菜单项2</li>
    <li>菜单项3</li>
<ul>

Sliding Navigation Bar By Dosboy(yan,ZHANG) Mailto: [email protected] --2020.02.06