html5左侧弹出菜单怎样实现

 我来答
阿衰de悲哀
2017-06-13 · 超过11用户采纳过TA的回答
知道答主
回答量:28
采纳率:0%
帮助的人:12万
展开全部
这个可以通过绝对定位,配合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
希望能解决你的问题
a3476012
2016-10-21 · TA获得超过1268个赞
知道小有建树答主
回答量:484
采纳率:87%
帮助的人:132万
展开全部
纯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>
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
美图鉴赏大官人
2016-09-18 · TA获得超过1488个赞
知道小有建树答主
回答量:1928
采纳率:61%
帮助的人:323万
展开全部
hover事件,表示当鼠标移到该位置的样式。
a:hover
{
display:;
}

第一步:先把您要弹出的菜单使用display:none隐藏起来。
第二步:设置hover事件,把你要显示的菜单display属性改为可见。
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
百度网友ea70956462
2017-01-11 · 超过23用户采纳过TA的回答
知道答主
回答量:58
采纳率:0%
帮助的人:22.5万
展开全部
...好多种方法.. 先通过点击移动事件绑定一下,鼠标移动到什么地方发生时间
1.浮动或者定位把对象 弄到屏幕外,然后鼠标移过去时JS改变定位数值;

2.高不动,宽为0;然后通过JS宽度增加;
3.设为透明度0;然后慢慢增加到1;
4.简单粗暴,display=none;JS然后display=block;
.........十几二十种方法
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
qqlxinye
2017-04-18 · TA获得超过1980个赞
知道大有可为答主
回答量:2257
采纳率:65%
帮助的人:529万
展开全部
弹出菜单得靠div+css结合javascript才能够做出来。
1,写好一个菜单,包含样式或id,默认隐藏
2,给左侧向外拉动事件做监听,如果菜单已显示,不做处理,如果菜单隐藏,这时候改变为显示状态
3.为了给他更好的效果,左侧向内监听,如果菜单已显示,则隐藏
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 更多回答(10)
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式