简单实用的响应式菜单滚动列表插件scrollmenu,拥有:列表样式、九宫格样式、长按左键拖动或触屏滑动样式、带右侧图标无分割线样式四种,同时还兼容PC和移动端,菜单样式和图标等均可自行调整,真的好强大啊。
head部分先引入三个CSS样式:animate.css、fontCss.css、scrollmenu.css,分别对应菜单动画、字体、滚动样式,可自行修改:
<link type="text/css" rel="stylesheet" href="css/animate.css">
<link type="text/css" rel="stylesheet" href="fonts/fontCss.css">
<link type="text/css" rel="stylesheet" href="css/scrollmenu.css">
body部分写了4个触发样式的“按钮”,其实是div元素啦,你也可以用a或button标签来写的:
<body style="margin:0;width:100%;font-family:'Microsoft YaHei','Lantinghei SC','Open Sans',Arial,'Hiragino Sans GB','STHeiti','WenQuanYi Micro Hei','SimSun',sans-serif;letter-spacing:1px;">
<div style="width:268px;margin:100px auto;color:#fff;height:28px;font-size:14px;">
<div class="dw-btn btn-primary" style="width:268px;line-height:28px;text-align:center;display:block;margin:20px 0;border-radius:3px;background-color:#5bc0de;border:1px solid #46b8da;" onclick="showList()" style="cursor: pointer;">列表样式滚动菜单</div>
<div class="dw-btn btn-success" style="width:268px;line-height:28px;text-align:center;display:block;margin:20px 0;border-radius:3px;background-color:#00d46a;border:1px solid #00c161;" onclick="showList1()" >九宫格样式滚动菜单</div>
<div class="dw-btn btn-danger" style="width:268px;line-height:28px;text-align:center;display:block;margin:20px 0;border-radius:3px;background-color:#ff6055;border:1px solid #ff483a;" onclick="showListbscroll()">长按左键拖动或触屏滑动</div>
<div class="dw-btn btn-deepred" style="width:268px;line-height:28px;text-align:center;display:block;margin:20px 0;border-radius:3px;background-color:#ffc928;border:1px solid #ffc30c;" onclick="showListnoborder()">带右侧图标无分割线</div>
</div>
</body>
底部引入jquery库两个插件,然后绑定一下菜单触发,部分代码如下:
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script type="text/javascript" src="js/bscroll.js"></script>
<script type="text/javascript" src="js/scrollmenu.js"></script>
<script>
function showList(){
$("body").scrollmenu({
type:'cross',
// bscroll:true,
// animateIn:'bounceIn',
// animateOut:'bounceOut',
click:function(ret){
if(ret.hasHref){
return
}else{
// switch (ret.index){
// case 0:
// alert(0);
// break;
// }
alert(JSON.stringify(ret));
}
}
});
}
</script>
scrollmenu的参数说明如下:
height: //菜单栏的高度
zIndex: //层级
background: //背景色
type: //cross or '' 列表 或 九宫格
animateIn: //菜单进入的效果 可使用animate.css
animateOut: //菜单关闭的效果
duration: //动画执行时间
hasLineBorder: //是否显示一像素边框分割
bscroll: //是否使用bScroll的 滚动方式
showRightIcon: //横向列表下是否显示右侧图标
iconSIze: //图标大小
source: //列表的信息
title: //source 下的子属性 菜单名称
hasHref: //source 下的子属性 是否有链接
href: //source 下的子属性 链接地址
font_imgClass: //source 下的子属性 图标的class名称
hrefType: //source 下的子属性 //_self , _blank, _parent, _top 打开的类型
rightFont_imgClass: //source 下的子属性 //横向列表状态下 右侧的图标信息
click:function(ret){} //列表被点击时候的方法 ret.ele 点击的元素 ret.hasHref 是否有链接 ret.index 点击的索引 ret.title 文本内容 ret.icon_class 图标的class名称
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791