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 1Flowers
Content For Panel 2my shoes
Content For Panel 3.snowing in country side
Content For Panel 4HEADING 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>
<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: