web前端技术,零框架实现侧滑菜单,就是
先来看看最终效果!这样的菜单在移动端比较常见,实现起来非常简单
最终效果图
第一步
html代码
对应的效果
效果图
第二步,添加导航菜单
html代码
对应的效果
效果图
第三步,给导航加上样式
CSS代码
就成这样了。
效果
第四步,需要把菜单隐藏起来,让用户可以自己打开和关闭
把导航的宽度设置为0px。达到隐藏的效果。
css代码
第五步,添加打开和关闭的javascript代码
javascript代码
为了达到更好的效果,需要给正文加上下面这个样式
css代码
对应的效果,还不错!
效果
到这里,一个简单的侧滑菜单效果就完成了。下次见!