js+html5实现侧滑页面效果

js+html5实现侧滑页面效果

after:

js+html5实现侧滑页面效果

代码:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title></title> <script src="https://www.jb51.net/js/mui.min.js"></script> <link href="https://www.jb51.net/css/mui.min.css" /> <style type="text/css"> .cover { background-color: #0062CC; height: 100%; width: 100%; display: none; opacity: 0; position: absolute; } .mui-off-canvas-left { background-color: #F0AD4E; } </style> </head> <body> <!-- 侧滑导航根容器 --> <div> <!-- 主页面容器 --> <div> <!-- 菜单容器 --> <aside> <div> <div> 侧滑页面 </div> </div> </aside> <!-- 主页面标题 --> <header> <a></a> <h1>标题</h1> </header> <!-- 主页面内容容器 --> <div> <div></div> <div> <!-- 主界面具体展示内容 --> 主页面 </div> </div> </div> </div> <script src="https://www.jb51.net/js/jquery-git.js"></script> <script type="text/javascript"> $('.mui-pull-left').click(function() { mui('.mui-off-canvas-wrap').offCanvas('show'); $('.cover').css('display', 'block'); }); $('.cover').click(function() { mui('.mui-off-canvas-wrap').offCanvas('close'); $('.cover').css('display', 'none'); }); </script> </body> </html>

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wyjswf.html