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>



Kembali kepada | Archives →

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