jquery.foldit实现折叠下拉菜单效果代码
代码语言:html
所属分类:菜单导航
代码描述:jquery.foldit实现折叠下拉菜单效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/foldit.css">
<style type="text/css">
body {
background:#666;
padding:0;
margin:0
}
.phone {
width:304px;
height:544px;
padding:108px 27px 110px 27px;
margin:30px auto;
background:url(//repo.bfw.wiki/bfwrepo/images/menu/phone.png) no-repeat
}
.app {
background:#0d3d69 url(//repo.bfw.wiki/bfwrepo/images/menu/bg.jpg) no-repeat 50% 0;
height:544px;
position:relative;
}
.folditmenu {
padding:0;
margin:0 0 0 -30px;
list-style:none;
width:60px;
position:absolute;
top:46px;
left:50%;
}
.folditmenu li {
height:60px;
background:#fff;
border-top:1px solid #ccc;
text-align:center;
z-index:1
}
.actionItem {
border-radius:0 0 10px 10px;
box-shadow:0 9px 9px -2px #ccc inset;
}
.menuIsOpen .actionItem {
box-shadow:none
}
.menuIsOpen li:first-child {
box-sha.........完整代码请登录后点击上方下载按钮下载查看
网友评论0