社区首页 / web前端 / 帖子详情

web前端技术,零框架实现侧滑菜单,就是

发表于:2017-06-19 13:34 [ 只看楼主] 5791 0 0

先来看看最终效果!这样的菜单在移动端比较常见,实现起来非常简单

web前端技术,零框架实现侧滑菜单,就是这么简单!

最终效果图

第一步

web前端技术,零框架实现侧滑菜单,就是这么简单!

html代码

对应的效果

web前端技术,零框架实现侧滑菜单,就是这么简单!

效果图

第二步,添加导航菜单

web前端技术,零框架实现侧滑菜单,就是这么简单!

html代码

对应的效果

web前端技术,零框架实现侧滑菜单,就是这么简单!

效果图

第三步,给导航加上样式

web前端技术,零框架实现侧滑菜单,就是这么简单!

CSS代码

就成这样了。

web前端技术,零框架实现侧滑菜单,就是这么简单!

效果

第四步,需要把菜单隐藏起来,让用户可以自己打开和关闭

把导航的宽度设置为0px。达到隐藏的效果。

web前端技术,零框架实现侧滑菜单,就是这么简单!

css代码

第五步,添加打开和关闭的javascript代码

web前端技术,零框架实现侧滑菜单,就是这么简单!

javascript代码

web前端技术,零框架实现侧滑菜单,就是这么简单!

为了达到更好的效果,需要给正文加上下面这个样式

web前端技术,零框架实现侧滑菜单,就是这么简单!

css代码

对应的效果,还不错!

web前端技术,零框架实现侧滑菜单,就是这么简单!

效果

到这里,一个简单的侧滑菜单效果就完成了。下次见!

web前端技术,零框架实现侧滑菜单,就是这么简单!

  • 点赞  0
  • 收藏
  • 扫一扫分享朋友圈

    二维码

  • 分享

全部回复 (0) 倒向排序