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


MENU ACCORDION CONTOH 3
September 15, 2010
Posted by: Fauzie


Ini ialah contoh ketiga dalam siri tutorial bina accordion dengan CSS3 Transition. Seperti dalam dua contoh sebelum ini, menu ini juga menggunakan kaedah "hover" untuk "buka" dan "tutup" panel accordion.

Isi atau content di"sorok" dengan menggunakan "CSS property" overflow: hidden dengan menetapkan tinggi menu bersamaan dengan tinggi tajuk atau title.

Dalam contoh ini, empat bucu telah dibulatkan untuk memberi penampilan yang lebih menarik. Dan effect ini dapat dibuat dengan "CSS property" border-radius. Isi menu atau content dibuka (slide) dengan memperkenalkan CSS Transition "ease-in-out" yang mana berfungsi sebagai "transition timing". Kelambatan atau "delay effect" dalam contoh ini ialah 500ms.

Saya telah membuat sedikit penambahan dengan memberi effect warna cara "gradient" iaitu web-kit gradient dengan property warna rgba ke atas panel accordion.

Nota: Accordion ini paling sesuai untuk browser Safari dan Firefox.

"Live Demo"
Products

Lorem ipsum nec ex prompta tractatos. Ea elit sale admodum vim, at velit nemore rationibus per. Ullum qualisque dissentias ei qui, in putent doctus cotidieque mei. Mel legere mucius ne, adhuc impetus signiferumque cu eos. Has an zzril soluta impetus. An nisl graece inciderint nec, ea per rebum animal, prodesset accommodare ex eam.

Highlight

Lorem ipsum nec ex prompta tractatos. Ea elit sale admodum vim, at velit nemore rationibus per. Ullum qualisque dissentias ei qui, in putent doctus cotidieque mei. Mel legere mucius ne, adhuc impetus signiferumque cu eos. Has an zzril soluta impetus. An nisl graece inciderint nec, ea per rebum animal, prodesset accommodare ex eam.

News

Lorem ipsum nec ex prompta tractatos. Ea elit sale admodum vim, at velit nemore rationibus per. Ullum qualisque dissentias ei qui, in putent doctus cotidieque mei. Mel legere mucius ne, adhuc impetus signiferumque cu eos. Has an zzril soluta impetus. An nisl graece inciderint nec, ea per rebum animal, prodesset accommodare ex eam.

Contact

Lorem ipsum nec ex prompta tractatos. Ea elit sale admodum vim, at velit nemore rationibus per. Ullum qualisque dissentias ei qui, in putent doctus cotidieque mei. Mel legere mucius ne, adhuc impetus signiferumque cu eos. Has an zzril soluta impetus. An nisl graece inciderint nec, ea per rebum animal, prodesset accommodare ex eam.

Kod Mark-up dan CSS bagi contoh ini adalah seperti berikut:

<html>
<head>
<style>

#container2 {
width: 600px;
margin: 20px auto;
}
#accordionmenu {
margin-top: 20px;
}
#accordionmenu .item {
width: 400px;
height: 30px; /* height = total height of A child element */
overflow: hidden;

transition: height ease-in-out 500ms; /* css3 transition */
-o-transition: height ease-in-out 500ms;
-moz-transition: height ease-in-out 500ms;
-webkit-transition: height ease-in-out 500ms;

border: 1px solid #ccc;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;

margin-bottom: 2px;
}
#accordionmenu a {
display: block;
height: 20px;
line-height: 20px;

background: #e6e6e6;
padding: 5px;
color: #1e1e1e;
text-decoration: none;
}
#accordionmenu p {
height: 150px;
padding: 5px;
}
#accordionmenu div:hover {
height: 180px; /* height = total height of A and P elements */
}
#accordionmenu div:hover a {
border-bottom: 1px solid #ccc;
font-weight: bold;
}
</style>
</head>
<body>
<div id="container2">

<div id="accordionmenu">
<div class="item">
<a href="#">Products</a>
<p>Lorem ipsum nec ex prompta tractatos. Ea elit sale admodum vim, at velit nemore rationibus per. Ullum qualisque dissentias ei qui, in putent doctus cotidieque mei. Mel legere mucius ne, adhuc impetus signiferumque cu eos. Has an zzril soluta impetus. An nisl graece inciderint nec, ea per rebum animal, prodesset accommodare ex eam.</p>
</div>
<div class="item">
<a href="#">Highlight</a>
<p>Lorem ipsum nec ex prompta tractatos. Ea elit sale admodum vim, at velit nemore rationibus per. Ullum qualisque dissentias ei qui, in putent doctus cotidieque mei. Mel legere mucius ne, adhuc impetus signiferumque cu eos. Has an zzril soluta impetus. An nisl graece inciderint nec, ea per rebum animal, prodesset accommodare ex eam.</p>
</div>
<div class="item">
<a href="#">News</a>
<p>Lorem ipsum nec ex prompta tractatos. Ea elit sale admodum vim, at velit nemore rationibus per. Ullum qualisque dissentias ei qui, in putent doctus cotidieque mei. Mel legere mucius ne, adhuc impetus signiferumque cu eos. Has an zzril soluta impetus. An nisl graece inciderint nec, ea per rebum animal, prodesset accommodare ex eam.</p>
</div>
<div class="item">
<a href="#">Contact</a>
<p>Lorem ipsum nec ex prompta tractatos. Ea elit sale admodum vim, at velit nemore rationibus per. Ullum qualisque dissentias ei qui, in putent doctus cotidieque mei. Mel legere mucius ne, adhuc impetus signiferumque cu eos. Has an zzril soluta impetus. An nisl graece inciderint nec, ea per rebum animal, prodesset accommodare ex eam.</p>
</div>
</div>
</div>
</body>
</html>


Kembali kepada | Archives →

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