給大家?guī)硪粋€css做出的垂直手風(fēng)琴,由于過于簡單,不過多講解.
效果圖
css手風(fēng)琴.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;
/* 這里高要設(shè)置為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>
