CSS3 Horizontal Accordion

วันนี้ผมมี CSS3 Code มาแจกซึ่งเป็นการสร้าง Pure CSS Horizontal Accordion หรือการสร้างแท็บแนวตั้งด้วย CSS3 ลักษณะแท็บจะเป็นเหมือนสันของหนีงสือที่่วางเรียงกัน ไว้หลายๆ เล่ม เราสามารถนำโค๊ดนี้ไปใช้งานได้เลย โดยไม่ต้องเสียเวลามานั่งเขียน CSS3 เอง

View Domo Now | Download File

Accordion Markup

<div class="horizontalaccordion">
<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

browsers ที่รองรับคือ Firefox 3.5+, Opera 10.5+, Safari 3+ และ Chrome.

.horizontalaccordion>ul {
margin: 0;
padding: 0;
list-style:none;
height: 300px;
}
.horizontalaccordion>ul>li {
display:block;
overflow: hidden;
float:left;
margin: 0;
padding: 0;
list-style:none;
width:40px;
height: 300px;
/* Decorative CSS */
background:#f0f0f0;
}
.horizontalaccordion>ul>li>h3 {
display:block;
float:left;
margin: 0;
padding:10px;
height:19px;
width:280px;
/* Decorative CSS */
border-left:#f0f0f0 1px solid;
font-family: Arial, Helvetica, sans-serif;
text-decoration:none;
text-transform:uppercase;
color: #000;
background:#cccccc;
/* CSS3 Transform Rotate & Translate */
white-space:nowrap;
-moz-transform: rotate(90.0deg) translate(-40px,0px);  /* FF3.5+ */
-moz-transform-origin: 0 100%;
-o-transform: rotate(90.0deg) translate(-40px,0px);  /* Opera 10.5 */
-o-transform-origin: 0 100%;
-webkit-transform: rotate(90.0deg) translate(-40px,0px);  /* Saf3.1+, Chrome */
-webkit-transform-origin: 0 100%;
transform: rotate(90.0deg) translate(-40px,0px);  /* Saf3.1+, Chrome */
transform-origin: 0 100%;
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1.0);  /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1.0)";
/* IE8 *
}
.horizontalaccordion>ul>li>div {
display:none;
float:left;
overflow: auto;
position:relative;
top:-40px;
left:40px;
*top:0px;       /* IE7 Hack */
*left:0px;      /* IE7 Hack */
margin:0;
width:320px;
height:280px;
padding:10px;
}

ที่มา : w3avenue.com

Related Posts

• Pure CSS3 Vertical Accordion
• สร้างถ้วยกาแฟด้วย CSS3
• เขียน CSS3 ด้วย CSS3 Generator