社区微信群开通啦,扫一扫抢先加入社区官方微信群
社区微信群
1.实现下拉选项框
多的不说上代码:
HTML代码
<body>
<div class="menu">
<p>产品</p>
<ul class="menubar">
<li class="menuvalue" data-value="产品">产品</li>
<li data-value="工具与镜像">工具与镜像</li>
<li data-value="客户与伙伴">客户与伙伴</li>
<li data-value="帮助与支持">帮助与支持</li>
<li data-value="论坛与博客">论坛与博客</li>
</li>
</ul>
</div>
</body>
body,html,div,ul,li,p
{
margin: 0;
padding: 0;
}
body{
background-color: #34a250;
color: #000;
}
.menu
{
width: 100%;
height: 100%;
position: relative;
}
.menu p
{
position: relative;
margin: 100px auto 0 auto;
width: 150px;
height: 30px;
display: block;
cursor: pointer;
background-color: #fff;
text-align: center;
padding: 5px 0 0 0;
}
.menubar
{
position: relative;
width: 150px;
max-height: 0px;
margin: 0 auto;
overflow: hidden;
background-color: #968e8e;
}
.menubaropen
{
max-height: 200px;
transform-origin:50% 0;
-webkit-animation:slide-down .5s ease-in;
transition: all 0.3s ease-out;
}
.menubar li
{
list-style-type: none;
width: 100%;
padding: 5px 0 5px 0;
text-align: center;
display: block;
cursor: pointer;
}
.menubar li:hover
{
background-color: #c90;
}
.menuvalue
{
background-color: #ddc61a;
}
@-webkit-keyframes slide-down{
0%{transform:scale(1,0);}
25%{transform:scale(1,1.2);}
50%{transform:scale(1,0.85);}
75%{transform:scale(1,1.05);}
100%{transform:scale(1,1);}
}
<script src="js/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(function(){
$('.menu > p').on('click', function() {
$('.menubar').toggleClass('menubaropen');
});
$('.menu ul li').on('click', function() {
var _this=$(this);
$('.menu > p').text(_this.attr('data-value'));
_this.addClass('menuvalue').siblings('li').removeClass('menuvalue');
$('.menubar').removeClass('menubaropen');
});
});
</script>
如果觉得我的文章对您有用,请随意打赏。你的支持将鼓励我继续创作!