html5左侧弹出菜单怎样实现
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html5左侧弹出菜单怎样实现相关的知识，希望对你有一定的参考价值。
这个可以通过绝对定位，配合left设置 或者translate去实现left的方法：
比如让class为menu的元素宽为300px，高100%的，设置left为-300px；在这期间可以加一个过渡transition:left 0.3s ...；
然后让class为menu active的元素设置 left设置为0就可以了 ，在这期间可以加一个过渡transition:left 0.3s ...；
然后可以通过Jquery的toggleClass('active');来实现切换
translate
比如让class为menu的元素宽为300px，高100%的，设置left为-300px；在这期间可以加一个过渡transition:left 0.3s ...；
然后让class为menu active的元素设置 transform:translate3d(-300px,0,0) ，在这期间可以加一个过渡transition:left 0.3s ...；
然后可以通过Jquery的toggleClass('active');来实现切换
这个过程中 需要注意 body需要overflow：hidden; (不然会有滚动条，可设置overflow-x即可)
left 和 translate 最好用translate ，translate3d可以开启GPU硬件加速，性能会更好，体验会更流畅
我github有类似小组件样式
github： IFmiss
希望能解决你的问题 参考技术A 纯HTML+CSS完成侧滑效果的话，主要的几点就是
1.overflow: hidden;
2.position: relative;
3.还有就是伪类，比如hover
代码如下（刚写的demo,菜单的样式可以根据需要自己调整）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="format-detection" content="telephone=no" />
<title>Demo</title>
<style>
*
padding:0;
margin:0;
box-sizing: border-box;
html,body
min-height: 100%;
body
overflow-x: hidden;//超出隐藏，所以当整个滑块在body左边的时候就会隐藏 position: relative;//可写可不写，为了规范而已
.siderBox
text-align: center;
position: absolute;
top: 80px;
width: 200px;
left: -200px;
-webkit-transition: all 2s;
-moz-transition: all 2s ;
-ms-transition: all 2s ;
-o-transition: all 2s ;
transition: all 2s ;
.nav
width: 200px;
background-color: #fff;
height: 100%;
vertical-align: top;
.nav p
padding: 10px;
background-color: #666;
color: #fff;
.navOpen
position: relative; //为left前提条件
left: 115px;top:-80px; //定位置
width: 30px;
background: #333;
display: inline-block;
padding: 10px;
border-radius: 0 5px 5px 0;
color: #fff;
font-weight: bold;
cursor: pointer;
.navOpen p//css3，过渡效果，IE8不支持
-webkit-transition: all 2s;
-moz-transition: all 2s ;
-ms-transition: all 2s ;
-o-transition: all 2s ;
transition: all 2s ;
.siderBox:hover//鼠标滑过，整体向右移动200px
left: 0;
.siderBox:hover .navOpen p//鼠标滑过，箭头转弯
transform: rotate(180deg);
</style>
</head>
<body>
<div class="siderBox">
<div class="nav">
<p>菜单1</p>
<p>菜单2</p>
<p>菜单3</p>
<p>菜单4</p>
</div>
<div class="navOpen"><p> > </p></div>
</div>
</body>
</html> 参考技术B hover事件，表示当鼠标移到该位置的样式。
a:hover
display：；
第一步：先把您要弹出的菜单使用display：none隐藏起来。
第二步：设置hover事件，把你要显示的菜单display属性改为可见。 参考技术C ...好多种方法.. 先通过点击移动事件绑定一下，鼠标移动到什么地方发生时间
1.浮动或者定位把对象 弄到屏幕外，然后鼠标移过去时JS改变定位数值；
2.高不动，宽为0；然后通过JS宽度增加；
3.设为透明度0；然后慢慢增加到1；
4.简单粗暴，display=none；JS然后display=block;
.........十几二十种方法 参考技术D 弹出菜单得靠div+css结合javascript才能够做出来。
1，写好一个菜单，包含样式或id，默认隐藏
2，给左侧向外拉动事件做监听，如果菜单已显示，不做处理，如果菜单隐藏，这时候改变为显示状态
3.为了给他更好的效果，左侧向内监听，如果菜单已显示，则隐藏
以上是关于html5左侧弹出菜单怎样实现的主要内容，如果未能解决你的问题，请参考以下文章
UISplitViewController 在菜单弹出框可见的情况下旋转时缩小左侧