涉及到的样式:
- 背景渐变
background: -webkit-gradient(linear, left top, left bottom, from(#cecece), to(#8f8f8f));
- 文字阴影
text-shadow: 2px 2px 2px #aeaeae;
- 元素过渡效果
transition: height 0.5s ease-in;
利用:target 属性设置鼠标点击后下拉 <p>元素的显示与隐藏
完整代码:
.accordionmenu {
background: #fff;
color: #424242;
font: 12px Arial, Helvetica, sans-serif;
margin: 0 auto;
padding: 10px;
width: 500px;
}
.accordionmenu h2 {
margin: 5px 0;
padding: 0;
position: relative;
}
.accordionmenu h2:before {
/*制作向下三角形效果*/
border: 5px solid #fff;
border-color: #fff transparent transparent;
content: "";
height: 0;
position: absolute;
right: 10px;
top: 15px;
width: 0;
}
.accordionmenu h2 a {
/*制作手风琴标题栏效果*/
background: #8f8f8f;
background: -webkit-gradient(linear, left top, left bottom, from(#cecece), to(#8f8f8f));
border-radius: 5px;
color: #424242;
display: block;
font-size: 13px;
margin: 0;
padding: 10px;
text-shadow: 2px 2px 2px #aeaeae;
text-decoration: none;
}
.accordionmenu :target h2 a,
/*目标标题栏的效果*/
.accordionmenu h2 a:focus,
.accordionmenu h2 a:hover,
.accordionmenu h2 a:active {
color: #fff;
background: -webkit-gradient(linear, left top, left bottom, from(#6bb2ff), to(#2288dd));
}
.accordionmenu p {
/*标题栏对应的内容*/
margin: 0;
height: 0;
/* 默认栏目内容高度为0,达到隐藏效果*/
overflow: hidden;
padding: 0 10px;
-webkit-transition: height 0.5s ease-in;
}
/*这部分是显示内容的关键代码*/
.accordionmenu :target p {
/*展开对应目标内容*/
height: 100px;
/*显示对应目标内容*/
overflow: auto;
}
.accordionmenu :target h2:before {
/*展开时标题三角效果*/
border-color: transparent transparent #fff;
}
<div class="accordionmenu">
<div class="menusection" id="brand">
<h2><a href="#brand">Brand</a></h2>
<p>Lorem ipsum dolor. . .</p>
</div>
<div class="menusection" id="promotion">
<h2><a href="#promotion">promotion</a></h2>
<p>Lorem ipsum dolor sit amet. . .</p>
</div>
<div class="menusection" id="event">
<h2><a href="#event">event</a></h2>
<p>Lorem ipsum dolor. . .</p>
</div>
</div>