Membuat Menu Dropdown

Oke,.. Kali ini kita akan ber-pusing2 ria dengan melototin kode HTML yang sedikit ruwet-njelimet,..... Sebenernya kalo diliatin terus menerus kode HTML cukup simple dan ga sesusah yang dibayangkan saat pertama kali ketemu,.... Ciiiieeee,... seperti pepatah "Tak kenal maka tak sayang".
Nah cukup dah cuap2-nya,... CekiDot...

Pertama-tama kita akan buat Struktur Dropdown nya
Copy semua kode yang ada dibawah ini :
Akan saya jelaskan setelahnya



-------------------------------------------------------------------------------------------
<div id="menu-nav">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">Web Design</a>
         <ul>
            <li><a href="#">Blogger</a></li>
            <li><a href="#">Wordpress</a></li>
            <li><a href="#">Joomla</a></li>
      </ul>
    </li>
    <li><a href="#">Interior &amp; Exterior</a>
        <ul>
            <li><a href="#">Minimalis</a></li>
            <li><a href="#">Modern</a></li>
            <li><a href="#">Classic</a></li>
        </ul>
    </li>
    <li><a href="#">Team Design</a>
        <ul>
            <li><a href="#">Ady Kenthu</a></li>
            <li><a href="#">Henry</a></li>
            <li><a href="#">Eko Arianto</a></li>
        </ul>
    </li>
    <li><a href="#">Profile</a></li>
  </ul>
</div>
---------------------------------------------------------------------------------------------

Sekarang penjelasannya :

#menu-nav : div tag ini adalah Struktur dari Dropdown nya, agar tidak melenceng kemana-mana saat semua CSS dimasukkan.
<ul></ul> : Perhatikan bahwa keseluruhan struktur dibungkus oleh tag <ul></ul>, artinya bahwa terdapat sebuah bagan list dimana item-item yang menjadi isi dari bagan tersebut.
<ul> <li> <ul> :  Kalian liat tag yang satu ini, didalam tag <ul> ada tag <ul> lagi, nah loo.... mudeng ga..??? itu adalah Struktur yang apabila disorot akan keluar Sub Menu lagi (yang menjadi list) adalah "Web Design", "Interior & Exterior", dan "Team Design" yang masing-masing dibungkus oleh tag <li></li>.

Prinsip list tersebut sama dengan penjelasan pada langkah 1, Pada browser, struktur tersebut akan terlihat seperti gambar berikut:


Sekarang tinggal mempercantik tampilan dengan CSS Style.
Siapkan Rokok, Kopi, dan Roti,...... heheheee...
Copy semua CSS Style yg ada dibawah ini :
Akan saya jelaskan selanjutnya


----------------------------------------------------------------------------------------

#menu-nav {
    height: 30px;
    width: 550px;
    background-repeat: no-repeat;
    color: #000000;
}
#menu-nav ul {
    margin: 0px;
    padding: 0px;
    text-align: center;
}
#menu-nav ul li {
    display: inline;
    height: 30px;
    float: left;
    list-style-type: none;
    margin-left: 15px;
    position: relative;
    padding-top: 5px;
}
#menu-nav li a {
    color: #000000;
    text-decoration: none;
    font-size: 17px;
    font-weight: bold;
    font-style: italic;
}
#menu-nav li a:hover {
    color: #0000FF;
}
#menu-nav li ul {
    display: none;
    margin: 0px;
    padding: 0px;
    position: absolute;
    left: 0px;
    top: 25px;
    background-repeat: repeat-y;
}
#menu-nav li:hover ul {
    display: block;
    width: 120px;
}
#menu-nav li li {
    list-style-type: none;
    display: list-item;
}
#menu-nav li li a {
    color: #666666;
    text-decoration: none;
}
#menu-nav li li a:hover {
    color: #0000CC;
}

-------------------------------------------------------------------------------------------------

Saya ga akan bahas Detail dari CSS Style ini, karena tidak ada yang Istimewa dari Style tersebut, dan saya yakin Kalian sudah mengerti Style Standart ini, hanya saja ada satu Style yang agak ganjil.
Kalian lihat Style #menu-nav li:hover ul : kenapa koq <li> nya yang di hover ??
Karena sub tag <ul> (list Web Design, Interior & Exterior, Team Design) berada didalam tag <li>. Untuk memunculkannya saat disorot, perlu di hover

Uhffss,..... capek juga ngetik Artikel ini, jika ada yang perlu ditanyakan silahkan tinggalkan pesan, secepatnya akan saya follow up.
Terima kasih telah membuka blog saya yang sederhana ini, dan membaca Tutorial yang saya tulis dengan bahasa yang kacau dan belepotan ini.

2 Comments

  • 11 Oktober 2011 09.57 | Permalink

    ojo nesu . . . !!!

  • 11 Oktober 2011 10.29 | Permalink

    Siap,... wong elek hadir,thank's sob....

  • Leave a Reply