给大家带来一个css做出的垂直手风琴,由于过于简单,不过多讲解.
效果图
css手风琴.gif
html代码
<div class="maxbox">
<div class="box">
<p>M</p>
<ul class="minbox">
<li>QAQ</li>
<li>QAQ</li>
<li>QAQ</li>
</ul>
</div>
<div class="box">
<p>I</p>
<ul class="minbox">
<li>0v0</li>
<li>0v0</li>
<li>0v0</li>
</ul>
</div>
<div class="box">
<p>A</p>
<ul class="minbox">
<li>0w0</li>
<li>0w0</li>
<li>0w0</li>
</ul>
</div>
<div class="box">
<p>O</p>
<ul class="minbox">
<li>0.0</li>
<li>0.0</li>
<li>0.0</li>
</ul>
</div>
</div>
css代码
<style>
* {
margin: 0;
padding: 0;
}
.maxbox {
margin: 100px auto;
width: 20%;
}
.maxbox .box {
border-bottom: 1px solid #f08080;
color: #eee;
}
.maxbox p {
padding: 10px;
background-color: #ffb6c1;
}
.minbox {
height: 0;
/* 这里高要设置为0,作为隐藏效果 */
overflow: hidden;
/* 溢出隐藏 */
background-color: #ffc0cb;
transition: 0.5s all;
/* 给个效果过渡 */
}
ul {
list-style: none;
}
ul li {
padding: 5px 15px;
line-height: 1.5;
}
ul li:hover {
background-color: #f08080;
/* 这里是选中效果 */
}
.maxbox:hover .box:hover .minbox {
height: 100px;
/* 这里赋予ul高,让它显示出来 */
}
</style>
完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>css</title>
<style>
* {
margin: 0;
padding: 0;
}
.maxbox {
margin: 100px auto;
width: 20%;
}
.maxbox .box {
border-bottom: 1px solid #f08080;
color: #eee;
}
.maxbox p {
padding: 10px;
background-color: #ffb6c1;
}
.minbox {
height: 0;
overflow: hidden;
background-color: #ffc0cb;
transition: 0.5s all;
}
ul {
list-style: none;
}
ul li {
padding: 5px 15px;
line-height: 1.5;
}
ul li:hover {
background-color: #f08080;
}
.maxbox:hover .box:hover .minbox {
height: 100px;
}
</style>
</head>
<body>
<div class="maxbox">
<div class="box">
<p>M</p>
<ul class="minbox">
<li>QAQ</li>
<li>QAQ</li>
<li>QAQ</li>
</ul>
</div>
<div class="box">
<p>I</p>
<ul class="minbox">
<li>0v0</li>
<li>0v0</li>
<li>0v0</li>
</ul>
</div>
<div class="box">
<p>A</p>
<ul class="minbox">
<li>0w0</li>
<li>0w0</li>
<li>0w0</li>
</ul>
</div>
<div class="box">
<p>O</p>
<ul class="minbox">
<li>0.0</li>
<li>0.0</li>
<li>0.0</li>
</ul>
</div>
</div>
</body>
</html>
