CSS动画实现菜单栏从左边滑出
盗用一下图片吧:实际效果图如下:
1,有一个nav的侧边栏,有一个遮罩层,随着侧边栏打开,然后点击遮罩层关闭侧边栏
关键代码:
1.给slideNav(侧边栏设置如下属性)
.slideNav {
position: absolute;
left: -7rem;
top:;
width: 7rem;
height: 100%;
background: #555;
transition: left linear .3s;
}
2.当点击显示菜单按钮的时候:
btn.addEventListener('click', function () {
mask.style.display = 'block';
nav.style.left = 0;
}, false);
3,当点击mask遮罩层:--菜单划出
mask.addEventListener('click', function () {
mask.style.display = 'none';
nav.style.left = '-7rem';
}, false)
CSS动画实现菜单栏从左边滑出的更多相关文章
- Activity左边滑出,右边滑入的动画切换
Activity左边滑出,右边滑入的动画切换 转载请注明出处:http://blog.csdn.net/u012301841/article/details/46920809 大家都知道Android ...
- (转)Android四大组件——Activity跳转动画、淡出淡入、滑出滑入、自定义退出进入
文章转自:http://blog.csdn.net/qq_30379689/article/details/52494270 Activity跳转动画.淡入淡出.滑入滑出.自定义退出进入 前言: 系统 ...
- Android四大组件——Activity跳转动画、淡出淡入、滑出滑入、自定义退出进入
Activity跳转动画.淡入淡出.滑入滑出.自定义退出进入 前言: 系统中有两个定义好的Activity跳转动画:fade_in.fade_out.slide_in_left.slide_out_r ...
- CSS 动画一站式指南
CSS 动画一站式指南 目录 CSS 动画一站式指南 1. CSS 动画 1.1 变换 1.1.1 变换属性介绍 1.1.2 变换动画实践 1.2 过渡 1.2.1 过渡属性介绍 1.2.2 过渡动画 ...
- css transition 实现滑入滑出
transition是css最简单的动画. 通常当一个div属性变化时,我们会立即看的变化,从旧样式到新样式是一瞬间的,嗖嗖嗖!!! 但是,如果我希望是慢慢的从一种状态,转变成另外一种状态,怎么办? ...
- 【jquery隐藏、显示事件and提示callback】【淡入淡出fadeToggle】【滑入滑出slideToggle】【动画animate】【停止动画stop】
1.jquery隐藏and显示事件 $("p").hide(); //隐藏事件$("p").hide(1000); //1秒内缓慢隐藏$(" ...
- 在 jQuery 中使用滑入滑出动画效果,实现二级下拉导航菜单的显示与隐藏效果
查看本章节 查看作业目录 需求说明: 在 jQuery 中使用滑入滑出动画效果,实现二级下拉导航菜单的显示与隐藏效果 用户将光标移动到"最新动态页"或"帮助查询" ...
- Css动画形式弹出遮罩层,内容区上下左右居中于不定宽高的容器中
<!DOCTYPE html> <html> <head> </head> <body id="body"> <! ...
- jQuary总结7:动画操作,显示与隐藏 淡入淡出, 滑入滑出
1 jquery提供了三组基本动画,这些动画都是标准的.有规律的效果,jquery还提供了自定义动画的功能. 2 显示与隐藏: show([speed],[easing],[callback]) 显示 ...
随机推荐
- (原)使用1080Ti显卡时安装ubuntu16.04.1及驱动的步骤
转载请注明出处: http://www.cnblogs.com/darkknightzh/p/6811328.html 参考网址: http://www.cnblogs.com/darkknightz ...
- <转>赋值表达式解析的流程
转自:http://www.cnblogs.com/nazhizq/p/6520072.html 上节说到表达式的解析问题,exprstate函数用于解析普通的赋值表达式.lua语言支持多变量赋值.本 ...
- fisheye Error occurred during initialization of VM Could not reserve enough space for object heap 问题解决!
参考文章:https://answers.atlassian.com/questions/9397/not-enough-heap-space-to-run-fisheye fisheye下载好了之后 ...
- 蛋疼的经历--wireshark不能启动的问题
事情是这样子的,最近新入职,安装了wireshark,,,在急需要其观察数据包结构,,,,写代码时,,,,卡了,,,我的天!!! 刚开始是提示说,找不到动态链接库api-ms-win-crt-runt ...
- sql server 删除所有表、视图、存储过程
如果由于外键约束删除table失败,则先删除所有约束: --/第1步**********删除所有表的外键约束*************************/ DECLARE c1 curs ...
- Docker : endpoint with name xxx already exists.
停止不了容器,在尝试过: docker stop [container_id] docker kill [container_id] 都不行之后,强制删除容器: docker rm -f [cont ...
- Kibana常用命令
一.范围(>500) totalTime: [500 TO *] 二.不等于 NOT monitorName: "XXX" 三.字符匹配 正则表达式: +url:/.* ...
- AndroidStudio 编译异常java.lang.OutOfMemoryError: GC overhead limit exceeded
在build.gradle中的android{}添加如下脚本就可以顺利编译了 dexOptions { incremental true javaMaxHeapSize “4g” }
- Easyui combobox 始终选择第一个的问题
//必须指定 id 和 text $('#contact_city').combobox({ valueField:'id', textField:'text', });
- tableView的用法具体解释
1 tableView的类型 1.1 UITableViewStylePlain 没有区头 不显区头 向上滑动区头不会移动到屏幕外面 ' 1.2 UITableViewStyleGrou ...