想要做这个效果在网上找不到，所以自己做出来了，就是与slide的效果相反的方向
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
ul,li{
margin: 0;
padding: 0;
list-style: none;
}
.sel-a {
display: inline-block;
margin-right: 72px;
position: relative;
z-index: 100;
}
.nav-second {
display: none;
position: absolute;
bottom: 0;
left: 0;
border: 5px solid rgba(182, 180, 184, 0.7);
border-radius: 8px;
width: 120%;
z-index: 180;
}
.nav-second li {
height: 85px;
line-height:85px;
background: #ccc;
}
</style>
</head>
<body>
<span class="sel-a sel-check">
<ul class="nav-second" style="">
<li class="active"><a href="javascript:;">列表1</a></li>
<li class=""><a href="javascript:;">列表2</a></li>
<li class=""><a href="javascript:;">列表3</a></li>
<li class=""><a href="javascript:;">列表4</a></li>
</ul>
<label for="abled">
<i><s class="active"></s><input type="radio" name="ableds" id="abled"></i>
<span>点击按钮</span>
</label>
</span>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
var onOff=true;
$(".sel-check").bind('click',function(){
if(onOff){
$(".nav-second").show().css('height','0').animate({'bottom':'-395px','height':'350px'},500);
$(".sel-a label i s").addClass('active');
onOff=!onOff;
return false; /*解决click事件执行两次的问题*/
}else{
$(".nav-second").animate({'bottom':'0','height':'0'},500,function(){
$(this).hide()
});
$(".sel-a label i s").removeClass('active');
onOff=true;
return false; /*同上*/
}
})
</script>
</body>
</html>
411
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
