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-shadow:0 9px 9px -2px #ccc inset; } [class^="icon-"],[class*=" icon-"] { display:inline-block; width:34px; height:34px; margin-top:15px; line-height:14px; vertical-align:text-top; background-image:url("//repo.bfw.wiki/bfwrepo/images/menu/icon.png"); background-position:14px 14px; background-repeat:no-repeat; } .icon-heart { background-position:0 2px; } .icon-comment { background-position:0px -39px; } .icon-edit { background-position:-4px -91px; } .icon-send { background-position:-2px -147px; } .icon-menu {.........完整代码请登录后点击上方下载按钮下载查看
网友评论0