Cross Browser Pure CSS3 Vertical Accordion
หน้าแรก CSS Cross Browser Pure CSS3 Vertical Accordion
หลังจากที่แจก CSS3 Code ในแบบ Pure CSS3 Horizontal Accordion ไปแล้วในบทความก่อนหน้านี้ คราวนี้ก็มาแจกโค๊ด Accordion ในแบบแนวนอนบ้างหรือ Pure CSS3 Vertical Accordion ซึ่งก็มีลักษณะค้ลายๆ กันแต่ Horizontal Accordion นั้นจะเลื่อนแท็บไปด้านข้าง แต่ Vertical Accordion นัั้นจะเลื่อนแท็บลงด้านล้างนั้นเอง และก็เหมือนเดิมครับ เราสามารถนำโค๊ดนี้ไปใช้งานได้เลย โดยไม่ต้องเสียเวลามานั่งเขียน CSS3 เอง
Accordion Markup
Heading 1
Content For Panel 1.
Heading 2
Content For Panel 2
Heading 3
Content For Panel 3.
Heading 4
Content For Panel 4
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;
}
ขึ้นไปด้านบน