Menu “Pull Down” menggunakan CSS?

Tips untuk hari kemerdekaan ini saya ingin berkongsi tips and trick bagaimanakah cara menghasilkan pull down menu css tanpa menggunakan sebarang table

atau masalah kepada browser Mozilla, Safari mahupun kepada browser yang sangat saya benci iaitu Internet Explorer 6++.

Lihat contoh paparan pull down menu yang telah siap dihasilkan ini, klik pada gambar dibawah ini.

Langkah 1

Seperti biasa, terlebih dahulu anda perlu menghasilkan “structure” rekabentuk atau mapping yang perlu anda rancangkan. Seperti contoh di sini, saya menghasilkan mapping atau structure pada menu-menu saya.


• Laman Utama
• Tutorial Sifoo.com »
o HTML / CSS
o Ajax Technologies
o PHP & MySQL
o Photoshop Done
o Flash & Action Script
o Download Center


Sila hasilkan menu-menu anda ini kepada bahasa pengaturcaraan HTML seperti contoh saya di bawah ini.

* di=menu, class=tiada dan class=tab adalah css yang akan saya hasilkan untuk diarahkan kepada css dokumen saya. Penamaan class dan id pada html dan css perlulah sama.

Langkah 2

Seterusnya saya menghasilkan css bagi level pertama adalah pada <div id=menu>”list mapping anda disini”</div>. Sila lihat contoh css untuk id=menu di bawah ini.

Contoh html dan css code seperti berikut,


<div id=”menu”>
<ul>
<li>Laman Utama</li>
<li>Tutorial Sifoo.com</li>
</ul>
</div>

Langkah 3

Bagi langkah 3 ini, anda perlu meneliti code html anda dan dimana anda perlu letak
Tutorial Sifoo.com didalam <ul> anda. Sila lihat contoh structure atau mapping code html saya dibawah ini.

<div id=”menu”>
<ul>
<li>Laman Utama</li>
<li>Tutorial Sifoo.com
<ul>
<li>Disini letaknya menu yang anda akan hasilkan</li>
</ul>
</li>
</ul>
</div>


#menu {
font-family: Tahoma,Verdana,Arial,Helvetica,sans-serif;
font-size:11px;
}
#menu ul {
list-style-type: none;
margin: 0;
padding: 0;
clear: both;
}
#menu ul {
background-color:#999999;
background-image:url(images/tag.jpg);
width:100%;
}
#menu ul li.tiada,
#menu ul li.tab {
float:left ;
}
#menu ul li.tab ul,
#menu ul li.tiada ul,
#menu ul li.tab ul li ul,
#menu ul li.tab:hover ul ul {
position: absolute;
display: none;
border-top: 1px #fff solid;
}


#menu ul li.tiada a {
color:#333333;
}
#menu ul li.tiada a:hover{
color:#FFFFFF;
}
#menu ul li ul {
width:auto;
}
#menu ul li a {
display: block;
text-decoration:none;
color:#000000;
padding:8px 9px 8px 9px;
white-space: nowrap;
}
#menu ul li.tab:hover ul {
border:1px solid #ff720a;
display: block;
z-index: 100;
}
#menu ul li.tab:hover a {
color:#333333;
background-color:#ffffff;
}
#menu ul li.tab:hover ul a {
background-color: #fff6d4;
color: #000000;
}
#menu ul li.tab:hover ul a:hover {
background-color: #ff720a;
color: #ffffff;
font-weight:bold;
text-indent:10px;
}
#menu li.blank {
/* paparan lebar penuh UL untuk browser mozilla */
clear: both;
display: expression("inline");
float:none;
}

Di kesempatan ini, saya ingin mengucapkan selamat menyambut hari kemerdekaan yang ke 51 kepada semua warga sifoo.com. Moga kita semua sihat dan selamat hendaknya.

Muat-Turun File

Selamat Mencuba.

Happy Browsing,
Hairudy.net