请使用firefox,chrome等最新浏览器浏览本站。

jquery/zepto多级垂直导航

js+jquery 阿豹 439次浏览 0个评论 扫描二维码

查看demo
github下载demo

使用说明:
1.同时引入vmenuModule.css、vmenuModule.js,以及jquery或zepto

2.html格式:

<div>
    <ul>
        <li>
            <a href="#">Item 1</a>
            <ul>
                <li><a href="#">Subitem 1</a>
                </li>
                <li>
                    <a href="#">Subitem 2</a>
                    <ul>
                        <li><a href="#">Subitem 1</a>
                            <ul>
                                <li><a href="#">Subitem 1</a>
                                </li>
                                <li><a href="#">Subitem 2</a>
                                </li>
                                <li><a href="#">Subitem 3</a>
                                </li>
                                <li><a href="#">Subitem 4</a>
                                </li>
                            </ul>
                        </li>
                        <li><a href="#">Subitem 2</a>
                        </li>
                        <li><a href="#">Subitem 3</a>
                        </li>
                        <li><a href="#">Subitem 4</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>

3.js调用:

$(".u-vmenu").vmenuModule({
    Speed: 200,
    autostart: true,
    autohide: true
});
参数说明:
/*
 *@param {type} option
 * {
 *   @param Speed: num,//动画收缩时间
 *   @param autostart: ture/false,//初次加载是否将菜单全部展开
 *   @param autohide: true/false,//同级菜单是否隐藏
 * }
 *
 *返回值为空
 * return obj
 *   none
 */

喜欢 (4)or分享 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到