js实现侧边栏滑出弹出菜单效果代码
代码语言:html
所属分类:菜单导航
代码描述:js实现侧边栏滑出弹出菜单效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <style> body { background-color: #fafafa; } #menu { background-color: #222; } .container { max-width: 960px; } #menu li { list-style: none; margin: 1rem auto; } #menu li a { color: #fff; text-decoration: none; } #menu > div:not(.wrapper) { background-color: #eee; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .wrapper { width: 100%; height: 100%; overflow-y: auto; position: relative; -webkit-overflow-scrolling: touch; } #openMenu { position: absolute; top: 0; right: 15px; color: #fff; padding:10px; } #closeMenu { position: absolute; top: 0; right: 0; color: #fff; z-index: 1; padding: 5px 10px; background-color: #000 !important; } #toggleMenu { position: fixed; left: 0; bottom: 0; width: 100%; padding: 10px; background-color: #000; color: #fff; text-align: center; z-index: 1001; } </style> </head> <body> <div id="openMenu"> <img style="height:30px;" src='//repo.bfw.wiki/bfwrepo/icon/5d835254a1dd1.png' /> </div> <div id="menu" style="height: 100%; top: 0px; z-index: 1000; position: fixed; width: 300px; right: -300px;"> <div id="closeMenu"> <img style="height:30px;" src='//repo.bfw.wiki/bfwrepo/image/609f09b144431.png' /> </div>.........完整代码请登录后点击上方下载按钮下载查看
网友评论0