盗用一下图片吧:实际效果图如下:

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动画实现菜单栏从左边滑出的更多相关文章

  1. Activity左边滑出,右边滑入的动画切换

    Activity左边滑出,右边滑入的动画切换 转载请注明出处:http://blog.csdn.net/u012301841/article/details/46920809 大家都知道Android ...

  2. (转)Android四大组件——Activity跳转动画、淡出淡入、滑出滑入、自定义退出进入

    文章转自:http://blog.csdn.net/qq_30379689/article/details/52494270 Activity跳转动画.淡入淡出.滑入滑出.自定义退出进入 前言: 系统 ...

  3. Android四大组件——Activity跳转动画、淡出淡入、滑出滑入、自定义退出进入

    Activity跳转动画.淡入淡出.滑入滑出.自定义退出进入 前言: 系统中有两个定义好的Activity跳转动画:fade_in.fade_out.slide_in_left.slide_out_r ...

  4. CSS 动画一站式指南

    CSS 动画一站式指南 目录 CSS 动画一站式指南 1. CSS 动画 1.1 变换 1.1.1 变换属性介绍 1.1.2 变换动画实践 1.2 过渡 1.2.1 过渡属性介绍 1.2.2 过渡动画 ...

  5. css transition 实现滑入滑出

    transition是css最简单的动画. 通常当一个div属性变化时,我们会立即看的变化,从旧样式到新样式是一瞬间的,嗖嗖嗖!!! 但是,如果我希望是慢慢的从一种状态,转变成另外一种状态,怎么办?  ...

  6. 【jquery隐藏、显示事件and提示callback】【淡入淡出fadeToggle】【滑入滑出slideToggle】【动画animate】【停止动画stop】

    1.jquery隐藏and显示事件 $("p").hide();      //隐藏事件$("p").hide(1000);  //1秒内缓慢隐藏$(" ...

  7. 在 jQuery 中使用滑入滑出动画效果,实现二级下拉导航菜单的显示与隐藏效果

    查看本章节 查看作业目录 需求说明: 在 jQuery 中使用滑入滑出动画效果,实现二级下拉导航菜单的显示与隐藏效果 用户将光标移动到"最新动态页"或"帮助查询" ...

  8. Css动画形式弹出遮罩层,内容区上下左右居中于不定宽高的容器中

    <!DOCTYPE html> <html> <head> </head> <body id="body"> <! ...

  9. jQuary总结7:动画操作,显示与隐藏 淡入淡出, 滑入滑出

    1 jquery提供了三组基本动画,这些动画都是标准的.有规律的效果,jquery还提供了自定义动画的功能. 2 显示与隐藏: show([speed],[easing],[callback]) 显示 ...

随机推荐

  1. (原)使用1080Ti显卡时安装ubuntu16.04.1及驱动的步骤

    转载请注明出处: http://www.cnblogs.com/darkknightzh/p/6811328.html 参考网址: http://www.cnblogs.com/darkknightz ...

  2. <转>赋值表达式解析的流程

    转自:http://www.cnblogs.com/nazhizq/p/6520072.html 上节说到表达式的解析问题,exprstate函数用于解析普通的赋值表达式.lua语言支持多变量赋值.本 ...

  3. 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下载好了之后 ...

  4. 蛋疼的经历--wireshark不能启动的问题

    事情是这样子的,最近新入职,安装了wireshark,,,在急需要其观察数据包结构,,,,写代码时,,,,卡了,,,我的天!!! 刚开始是提示说,找不到动态链接库api-ms-win-crt-runt ...

  5. sql server 删除所有表、视图、存储过程

    如果由于外键约束删除table失败,则先删除所有约束:   --/第1步**********删除所有表的外键约束*************************/   DECLARE c1 curs ...

  6. Docker : endpoint with name xxx already exists.

    停止不了容器,在尝试过: docker stop [container_id] docker kill  [container_id] 都不行之后,强制删除容器: docker rm -f [cont ...

  7. Kibana常用命令

    一.范围(>500) totalTime: [500 TO *] 二.不等于 NOT monitorName: "XXX" 三.字符匹配 正则表达式:    +url:/.* ...

  8. AndroidStudio 编译异常java.lang.OutOfMemoryError: GC overhead limit exceeded

    在build.gradle中的android{}添加如下脚本就可以顺利编译了 dexOptions { incremental true javaMaxHeapSize “4g” }

  9. Easyui combobox 始终选择第一个的问题

    //必须指定 id 和 text $('#contact_city').combobox({ valueField:'id', textField:'text', });

  10. tableView的用法具体解释

    1 tableView的类型   1.1 UITableViewStylePlain  没有区头 不显区头     向上滑动区头不会移动到屏幕外面 ' 1.2 UITableViewStyleGrou ...