jquery.foldit实现折叠下拉菜单效果代码

代码语言:html

所属分类:菜单导航

代码描述:jquery.foldit实现折叠下拉菜单效果代码

代码标签: 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