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 -100px; list-style:none; width:200px; position:relative; top:46px; left:50%; } .folditmenu div { height:60px; width:100%; background:#fff; text-align:center; } .actionItem { border-radius:50px; border:1px solid #252628; position:absolute; left:50%; top:10px; margin-left:-30px; width:60px; color:#252628; text-align:center; overflow:hidden; font-size:30px; line-height:10px; height:20px; cursor:pointer; background:rgba(50,50,50,.3) } .actionItem:hover { border:1px solid #EFF8FC; background:rgba(250,250,250,.5) } .menuIsOpen .actionItem { box-shadow:none } .menuIsOpen div:first-child { box-shadow:0 9px 9px -2px rgba(0,0,0,.4) inset; } @media (max-width:640px) { .phone { width:auto; height:544px; padding:0; margin:0px auto; background:none } } </style> <div class="phone"> <div class="app"> <div class="actionItem"></div> <div class="folditmenu"> <div style="background:#3498db"> <a href=&quo.........完整代码请登录后点击上方下载按钮下载查看
网友评论0