支烟网页侧滑JS插件
yizhiyan 浏览(3,471)

先上效果图:


功能介绍:

1.实现手机侧滑导航栏

2.可自动设置左滑还是右滑

3.支持侧滑和遮罩2种

4.使您的网站更加好看

5.让您的网站看上去高端大气上档次

6.使用户更加有体验感

7.一键式滑动

操作步骤:

1.引入插件zyHd.js

2.准备2个容器,一个装隐藏部分一个装显示部分和一个按钮,设置其样式

具体如下:

<body>
	<!-- 隐藏菜单 -->
	<div id="hiddenDiv">
		这个是隐藏菜单
	</div>
	<!-- 显示内容 -->
	<div id="showDiv">
		<input id="btn" type="button" value="显示" />
		这是显示的内容
	</div>
</body>
3.调用zy_zy_init()方法进行初始化,具体操作如下:


 zy_init({
        menu:"#hiddenDiv",//需要显示的菜单
        panel:"#showDiv",//面板
        btn:"#btn",//打开关闭按钮
        direction:2,//菜单栏方向 1.left或2.right
        time:200,//打开和关闭时间
        type:2//1遮罩方式 2.侧滑方式,
    });
完成效果图:




实际运用案例如本站手机端

最后奉上地址:http://libs.1zyan.cn/js/zyjs/zyHd.js


打赏

发表评论

电子邮件地址不会被公开。 必填项已用*标注

最新文章