Cataloged Autobiography
BERKENAAN SAYA
Hello. Saya adalah self-taught web designer yang banyak menghabiskan masa meneroka penggunaan CSS dan HTML. Blogging hanyalah hobi. Teruskan membaca..
The Readable Journal
MENEROKA ARTIKEL
Teroka artikel berhubung dengan tutorial, contoh dan penggunaan CSS dan HTML dalam web design di ruang ini. Web design menyeronokan. Ke tutorial...Klik sini
Astrolab Tool
KATEGORI ARTIKEL
Suatu sistem yang berfungsi untuk membantu menjelajahi topik-topik terkait dan menyenaraikan pelbagai sub-bahagian artikel...Klik sini


BUAT MENU ACCORDION DENGAN CSS3: BAHAGIAN 2
September 8, 2010
Posted by: Fauzie


Sebelum ini saya telah pun membincangkan bagaimana membina "horizontal accordion" dengan hanya menggunakan "pure CSS3", iaitu tanpa menggunakan javaScript.

Sekarang mari kita cuba pula membina satu lagi accordion yang sama tetapi kali ini dalam bentuk "vertical" (menegak). Contoh kedua ini menggunakan kod mark-up dan CSS yang sama. Apa yang membezakan ialah nama "class" ditukar dan tanpa membuat sebarang "rotation" (dalam horizontal accordion, panel telah dipusing atau "rotate" bagi membolehkan ia berkeadaan menegak).


Di bawah ini ialah "live demo" vertical accordion yang menggunakan kaedah sama iaitu "hover". Sila hover curso di bahagian panel tajuk.

"Live Demo" Accordion Menu menggunakan CSS3
Notis:Hanya sesuai dilihat melalui browser Safari, Chrome atau Firefox sahaja

  • Chicago

    Content For Panel 1

  • Flowers

    Content For Panel 2

  • my shoes

    Content For Panel 3.

  • snowing in country side

    Content For Panel 4

  • HEADING 5

    Isi atau Content untuk Panel 5
    Sila taip isi untuk penal 5 di sini. Isi atau content boleh dalam bentuk image atau tulisan. Dalam demo ini saya telah menggunakan image dan juga tulisan bagi menunjukkan bagaimana kedua-dua kaedah ini boleh digunakan.


Kod-kod CSS dan markup untuk contoh accordion di atas adalah seperti berikut:

<html>
<head>
<style type="text/css">
.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;

/* CSS3 Transition Effect */
transition: height 0.3s ease-in-out;
-moz-transition: height 0.3s ease-in-out;
-webkit-transition: height 0.3s ease-in-out;
-o-transition: height 0.3s ease-in-out;
}

.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;

/* CSS3 Gradient Effect */
background: -moz-linear-gradient( top, #999999, #cccccc);
background: -webkit-gradient(linear, left top, left bottom, from(#999999), to(#cccccc));
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff999999, endColorstr=#ffcccccc); /* IE 7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff999999, endColorstr=#ffcccccc)"; /* IE 8 */
}

.verticalaccordion>ul>li>div {
margin:0;
overflow: auto;
padding:10px;
height:220px;
}

.verticalaccordion>ul>li:hover {
height: 280px;
}

.verticalaccordion:hover>ul>li:hover>h3 {
/* Decorative CSS */
color:#fff;
background: #000000;

/* CSS3 Gradient Effect */
background: -moz-linear-gradient( top, #454545, #000000); /* FF, Flock */
background: -webkit-gradient(linear, left top, left bottom, from(#454545), to(#000000)); /* Safari, Chrome */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff454545, endColorstr=#ff000000); /* IE 5.5 - IE 7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff454545, endColorstr=#ff000000)"; /* IE 8 */
}

.verticalaccordion>ul>li>h3:hover {
cursor:pointer;
}

.box-iconH {
width: 480px;
height: 220px;
float: left;
margin-right: 10px;
margin-bottom:0px;
}

</style>
</head>
<body>
<div class="verticalaccordion">
<ul>
<li>
<h3>Chicago</h3>
<div class="box-iconH">
<img src="http://l.yimg.com/g/images/home_photo_pmorgan.jpg" width="480" height="210"/>
</div>
<div>Taip maklumat panel 1 di sini</div>
</li>
<li>
<h3>Flowers</h3>
<div class="box-iconH">
<img src="http://l.yimg.com/g/images/home_photo_codepoet.jpg"width="480" height="210"/>
</div>
<div>Taip maklumat panel 2 di sini</div>
</li>
<li>
<h3>my shoes</h3>
<div class="box-iconH">
<img src="http://l.yimg.com/g/images/home_photo_orangeacid.jpg "width="480" height="210"/>
</div>
<div>Taip maklumat panel 3 di sini</div>
</li>
<li>
<h3>snowing in country side</h3>
<div class="box-iconH">
<img src=" http://l.yimg.com/g/images/home_photo_ccgd.jpg "width="480" height="210"/>
</div>
<div>Taip maklumat panel 4 di sini</div>
</li>
</ul>
</div>
</body>
</html>

Untuk contoh di atas, saya telah menggunakan image dengan kod ini <div class="box-iconH"> dan kod untuk url image <img src=" http://l.yimg.com/g/images/home_photo_ccgd.jpg "width="480" height="210"/>

Anda boleh membuang kod-kod untuk image ini:
<div class="box-iconH"> dan kod untuk url image ini <img src=" http://l.yimg.com/g/images/home_photo_ccgd.jpg "width="480" height="210"/>
jika anda hanya ingin memasukkan maklumat sahaja. Maklumat bolehlah ditaip dalam ruang <div>Taip maklumat panel 1 di sini</div>

About Minimal

Some description about you


Nulla ornare, nulla et egestas hendrerit, ipsum dui vulputate dolor, et ornare orci erat eleifend pede. Fusce eros libero, vestibulum non, elementum eu, suscipit eget, leo.

Our Mission

Our goal is to be the best


Cras neque purus, mollis non, adipiscing ac, pretium eget, turpis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Meet The Team

About who we are


Donec a urna a enim gravida dictum. Nunc elementum, mauris sit amet imperdiet iaculis, dolor metus consectetuer mi, et tempor elit enim at massa. Duis ac nisl. Nullam pulvinar.



Kembali kepada | Archives →

Sebarang komen dan pertanyaan, sila klik butang di bawah ini: