您的位置:首页 > Web前端 > JQuery

jQuery弹出侧边栏滑动菜单实现思路

2017-06-28 15:01 971 查看
昨天下午下了一个用jQuery实现弹出侧边栏滑动菜单的demo,其实看明白了很简单,现在把思路整理一下。

js部分:主要用了jQuery的toggleClass()方法,该方法检查每个元素中指定的类。如果不存在则添加类,如果已设置则删除之。

html部分:主要有三个部分:主页、侧滑菜单页、点击按钮(a标签)。

css部分:
     主页设置相对布局(relative),在这里看到一个单位vh,查了一下是视窗高度,1vh等于视窗高度的1%。同理vw是视窗宽度,1vw等于视窗宽度的1%。设置层级为2.最后还有
一个过渡transition: transform 0.7s;就是设置滑动时间,注意:这里并没有设置transform,而是在js调用toggleClass()切换类以后再设置:transform: translateX(80%);80%
表示隐藏主页的80%。  
    侧滑菜单页很简单,主要就设置了一个层级1,位于主页之下。
    点击按钮(a标签)就设置了一个fixed定位,层级大于等于2。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  jquery html