html5左侧弹出菜单怎样实现

发布网友发布时间：2022-04-20 23:13

共11个回答

热心网友时间：2022-04-20 01:07

这个可以通过绝对定位，配合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
希望能解决你的问题

热心网友时间：2022-04-20 02:25

纯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>

热心网友时间：2022-04-20 04:00

hover事件，表示当鼠标移到该位置的样式。
a:hover
{
display：；
}

第一步：先把您要弹出的菜单使用display：none隐藏起来。
第二步：设置hover事件，把你要显示的菜单display属性改为可见。

热心网友时间：2022-04-20 05:51

...好多种方法.. 先通过点击移动事件绑定一下，鼠标移动到什么地方发生时间
1.浮动或者定位把对象弄到屏幕外，然后鼠标移过去时JS改变定位数值；

2.高不动，宽为0；然后通过JS宽度增加；
3.设为透明度0；然后慢慢增加到1；
4.简单粗暴，display=none；JS然后display=block;
.........十几二十种方法

热心网友时间：2022-04-20 07:59

弹出菜单得靠div+css结合javascript才能够做出来。
1，写好一个菜单，包含样式或id，默认隐藏
2，给左侧向外拉动事件做监听，如果菜单已显示，不做处理，如果菜单隐藏，这时候改变为显示状态
3.为了给他更好的效果，左侧向内监听，如果菜单已显示，则隐藏

热心网友时间：2022-04-20 10:24

用html是做不出来的，必须得靠div+css结合javascript才能够做出来。

热心网友时间：2022-04-20 13:05

sui框架自带，复制代码就能用
原生js，就用div吧，left：-（div宽度）ps；
弹出时left： 0；使用jq添加动画

热心网友时间：2022-04-20 19:18

---用js或者css3，html不能做这种交互操作

热心网友时间：2022-04-20 22:49

去17素材网找吧，会找到你想要的

热心网友时间：2022-04-21 02:37

坐公交车，

热心网友时间：2022-04-21 06:42

首先，百度天空博客
我在博客里面发了教程
你可以看看，
望采纳