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 BAHAGIAN 1
September 5, 2010
Posted by: Fauzie


Cara yang paling terbaik untuk membuat "accordion menu" ialah dengan CSS3. Malangnya, menu yang dibina dengan CSS3 tidak boleh diterima oleh IE. Kebanyakan menu yang berasaskan CSS3 ini pula menggunakan "target" pseudo-class di mana anda perlu klik untuk membuka menu tersebut. Masaalah dengan cara mengklik ini pula ialah ia akan "melompat" ke atas setiap kali diklik.

Untuk mengatasi masaalah ini, accordion menu haruslah "berfungsi" dengan hanya meng"hover" mouse ke panel menu tersebut dan menu ini pula hendaklah boleh diterima oleh semua browser moden. Di samping itu ia juga mempunyai "feature" tambahan seperti "transition effect" (gradient) dan warna panel boleh bertukar apabila ianya dihover.

Untuk tutorial ini, jom kita bina accordion menu dengan menggunakan CSS3 dan panel boleh dibuka dengan hanya meng"hover" mouse.

Di bawah ini ialah "Live Demo" bagi contoh pertama accordion menu menggunakan CSS3. Ini ialah contoh bagi "horizontal accordion".

Paparan terbaik untuk menu accordion ini ialah browser Safari di mana panel dibuka dan ditutup dengan begitu lancar dan licin (smooth)berbanding bila dilihat dalam browser Firefox.

"Live Demo: Horizontal Accordion"

  • Auto innovators

    Diversified automotive company JM Family Enterprises encompasses a number of different businesses: Southeast Toyota Distributors, the world’s largest independent Toyota and Scion distributor, JM&A Group, a group of industry-leading finance and insurance products companies, JM Lexus, the world’s largest volume Lexus dealership, and World Omni Financial Corp, a diversified financial services provider. It’s an $8 billion business—and iPhone is helping navigate the road ahead.

  • Architecture in motion

    iPhone enables RTKL’s architects, designers, engineers, and other staff to share detailed visuals and build on each other’s ideas, even when team members are literally oceans apart.

    With iPhone, says McKay, “we’re not just faxing or sending PDFs. We’re actually collaborating across the devices — across cultures, across geographies, across time zones — with great ease and facility. For contacts, calendars, and e-mail, it’s all there. By combining these things into a single handheld device, iPhone has made many people happy.”

  • Heading 3

    Isi Untuk Panel 3.

  • Heading 4

    Isi Untuk Panel 4

  • Heading 5

    Isi Untuk Panel 5


Kod-kod Mark-Up dan CSS adalah seperti di bawah ini:

<html>
<head>
<style type="text/css">

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

/* CSS3 Transitions */
transition: width 0.3s ease-in-out;
-moz-transition: width 0.3s ease-in-out;
-webkit-transition: width 0.3s ease-in-out;
-o-transition: width 0.3s ease-in-out;
}

.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)
progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff999999, endColorstr=#ffcccccc); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1.0)"
"progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff999999, endColorstr=#ffcccccc)"; /* IE8 */

/* CSS3 Gradient Effect */
background: -moz-linear-gradient( top, #999999, #cccccc);
background: -webkit-gradient(linear, left top, left bottom, from(#999999), to(#cccccc));
}

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

.horizontalaccordion>ul>li:hover {
overflow: hidden;
width: 380px;
}

.horizontalaccordion:hover>ul>li:hover>div {
display:block;
}

.horizontalaccordion: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.BasicImage(rotation=1.0)
progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff454545, endColorstr=#ff000000); /* IE 5.5 - IE 7 */
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1.0)"
"progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff454545, endColorstr=#ff000000)"; /* IE 8 */
}

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

</style>
</head>
<body>

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

</body>
</html>


Kembali kepada | Archives →

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