หลังจากที่แจก CSS3 Code ในแบบ Pure CSS3 Horizontal Accordion ไปแล้วในบทความก่อนหน้านี้ คราวนี้ก็มาแจกโค๊ด Accordion ในแบบแนวนอนบ้างหรือ Pure CSS3 Vertical Accordion ซึ่งก็มีลักษณะค้ลายๆ กันแต่ Horizontal Accordion นั้นจะเลื่อนแท็บไปด้านข้าง แต่ Vertical Accordion นัั้นจะเลื่อนแท็บลงด้านล้างนั้นเอง และก็เหมือนเดิมครับ เราสามารถนำโค๊ดนี้ไปใช้งานได้เลย โดยไม่ต้องเสียเวลามานั่งเขียน CSS3 เอง
Pure CSS3 Vertical Accordion
View Domo Now | Download File
Accordion Markup
<div class="verticalaccordion"> <ul> <li> <h3>Heading 1</h3> <div>Content For Panel 1.</div></li> <li> <h3>Heading 2</h3> <div>Content For Panel 2</div></li> <li> <h3>Heading 3</h3> <div>Content For Panel 3.</div></li> <li> <h3>Heading 4</h3> <div>Content For Panel 4</div></li> </ul> </div>
Styling Accordion Structure
.verticalaccordion>ul {
margin: 0;
padding: 0;
list-style:none;
width: 500px;
}
.verticalaccordion>ul>li {
display:block;
overflow: hidden;
margin: 0;
padding: 0;
list-style:none;
height:40px;
width: 500px;
/* Decorative CSS */
background-color:#f0f0f0;
}
.verticalaccordion>ul>li>h3 {
display:block;
margin: 0;
padding:10px;
height:19px;
/* Decorative CSS */
border-top:#f0f0f0 1px solid;
font-family: Arial, Helvetica, sans-serif;
text-decoration:none;
text-transform:uppercase;
color: #000;
background: #cccccc;
}
.verticalaccordion>ul>li>div {
margin:0;
overflow: auto;
padding:10px;
height:220px;
}
ที่มา : w3avenue.com
Posted in 
Tags: 
