js实现的一个简单的侧滑菜单
2017-06-18 00:00
549 查看
先来看看最终效果！这样的菜单在移动端比较常见，实现起来非常简单
最终效果图
第一步
html代码
对应的效果
效果图
第二步，添加导航菜单
对应的效果
效果图
第三步，给导航加上样式
CSS代码
就成这样了。
效果
第四步，需要把菜单隐藏起来，让用户可以自己打开和关闭
把导航的宽度设置为0px。达到隐藏的效果。css代码
第五步，添加打开和关闭的javascript代码
javascript代码
为了达到更好的效果，需要给正文加上下面这个样式
css代码
对应的效果，还不错！
效果
到这里，一个简单的侧滑菜单效果就完成了。下次见！
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- js实现一个简单的树形菜单
- 一个简单地list侧滑菜单，自己实现不是梦
- 利用JS实现一个简单的二级联动菜单
- 一个简单的js实现的隔行变色脚本
- 树形菜单的一个简单实现
- js实现一个简单的锁屏功能
- 一个简单的js脚本实现表格排序
- 一个简单的js树形菜单
- 一个简单的菜单按钮的实现
- 原创：Js解析xml文件并简单实现省市区级联菜单(并解决各浏览器兼容性问题).
- 用JS实现一个TreeMenu树形菜单效果
- node.js 一个简单的页面输出实现代码
- 一个简单的js的省市二级联动菜单（转）
- 使用Node.js + MongoDB实现一个简单的日志分析系统
- JS实现一个简单的页面两份样式表
- 一个简单的JS菜单，带效果截图
- 一个超简单的JS拖拽实现代码(兼容IE,Firefox)
- 一个简单的实现不同权限的用户登录后看到不同的菜单设计的数据库表清单
- node.js 一个简单的页面输出实现代码
- 一个简单的js树形菜单