如题所述
这个可以通过绝对定位，配合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
希望能解决你的问题
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
希望能解决你的问题
温馨提示：答案为网友推荐，仅供参考
第1个回答 2016-10-21
纯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>
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>
第2个回答 2016-09-18
hover事件，表示当鼠标移到该位置的样式。
a:hover
{
display：；
}
第一步：先把您要弹出的菜单使用display：none隐藏起来。
第二步：设置hover事件，把你要显示的菜单display属性改为可见。
a:hover
{
display：；
}
第一步：先把您要弹出的菜单使用display：none隐藏起来。
第二步：设置hover事件，把你要显示的菜单display属性改为可见。
第3个回答 2017-01-11
...好多种方法.. 先通过点击移动事件绑定一下，鼠标移动到什么地方发生时间
1.浮动或者定位把对象 弄到屏幕外，然后鼠标移过去时JS改变定位数值；
2.高不动，宽为0；然后通过JS宽度增加；
3.设为透明度0；然后慢慢增加到1；
4.简单粗暴，display=none；JS然后display=block;
.........十几二十种方法
1.浮动或者定位把对象 弄到屏幕外，然后鼠标移过去时JS改变定位数值；
2.高不动，宽为0；然后通过JS宽度增加；
3.设为透明度0；然后慢慢增加到1；
4.简单粗暴，display=none；JS然后display=block;
.........十几二十种方法
第4个回答 2017-04-18
弹出菜单得靠div+css结合javascript才能够做出来。
1，写好一个菜单，包含样式或id，默认隐藏
2，给左侧向外拉动事件做监听，如果菜单已显示，不做处理，如果菜单隐藏，这时候改变为显示状态
3.为了给他更好的效果，左侧向内监听，如果菜单已显示，则隐藏
1，写好一个菜单，包含样式或id，默认隐藏
2，给左侧向外拉动事件做监听，如果菜单已显示，不做处理，如果菜单隐藏，这时候改变为显示状态
3.为了给他更好的效果，左侧向内监听，如果菜单已显示，则隐藏
