Imenu-Dropdown Menu(Just CSS) By Indam

Imenu ini adalah widget(bisa dikatakan) kedua yang saya buat, dulunya saya sudah pernah membuat simple tabview hancur dengan CSS dan javascript.

Imenu ini sejatinya adalah dropdown menu simple yang saya buat hanya menggunkan CSS level 1, 2, 3 dan HTML tentunya. Jadi, ngga ada javascript yang terkandung didalamnya, sebenarnya bisa saja, saya menambahakan javascript(DOM & DHTML) hanya saja, beribet kalao js-nya di disable .

lebih jauh, imenu dropdown menu ini disetting menggunakan tag UL LI, jadi buat yang ingin menggunakan harus/wajib tahu HTML LI dan UL, contoh

<ul>
<li>satu</li>
<li>dua</li>
<li>tiga</li>
<li>empat
<ul>
<li>empat satu</li>
<li>empat dua</li>
<li>empat tiga
<ul>
<li>empat tiga satu</li>
<li>empat tiga dua</li>
<li>empat tiga tiga
<ul>
<li>empat tiga satu</li>
<li>empat tiga dua</li>
<li>empat tiga tiga</li>
<li>empat tiga empat
<ul>
<li>empat tiga empat satu</li>
<li>empat tiga empat dua</li>
<li>empat tiga empat tiga</li>
<li>empat tiga empat empat
<ul>
<li>empat tiga empat empat satu</li>
<li>empat tiga empat empat dua</li>
<li>empat tiga empat empat tiga</li>
</ul>
</li>
<li>empat tiga empat lima</li>
<li>empat tiga empat enam</li>
</ul>
</li>
<li>empat tiga lima</li>
<li>empat tiga enam</li>
</ul>
</li>
<li>empat tiga empat</li>
<li>empat tiga lima</li>
<li>empat tiga enam</li>
</ul>
</li>
<li>empat empat</li>
<li>empat lima</li>
<li>empat enam</li>
</ul>
</li>
<li>lima</li>
<li>enam</li>
<li>tujuh</li>
<li>delapan
<ul>
<li>delapan satu</li>
<li>delapan dua</li>
<li>delapan tiga</li>
</ul>
</li>
<li>sembilan
<ul>
<li>sembilan satu</li>
<li>sembilan dua</li>
<li>sembilan tiga
<ul>
<li>sembilan tiga satu</li>
<li>sembilan tiga dua</li>
<li>sembilan tiga tiga
<ul>
<li>sembilan tiga tiga satu</li>
<li>sembilan tiga tiga dua
<ul>
<li>sembilan tiga tiga dua satu</li>
<li>sembilan tiga tiga dua dua</li>
<li>sembilan tiga tiga dua tiga</li>
</ul>
</li>
<li>sembilan tiga tiga tiga</li>
<li>sembilan tiga tiga empat
<ul>
<li>sembilan tiga tiga empat satu</li>
<li>sembilan tiga tiga empat dua</li>
<li>sembilan tiga tiga empat tiga</li>
<li>sembilan tiga tiga empat empat
<ul>
<li>sembilan tiga tiga empat empat satu</li>
<li>sembilan tiga tiga empat empat dua</li>
<li>sembilan tiga tiga empat empat tiga</li>
</ul>
</li>
<li>sembilan tiga tiga empat lima</li>
<li>sembilan tiga tiga empat enam</li>
</ul>
</li>
<li>sembilan tiga tiga lima</li>
<li>sembilan tiga tiga enam</li>
</ul>
</li>
<li>sembilan tiga empat</li>
<li>sembilan tiga lima</li>
<li>sembilan tiga enam</li>
</ul>
</li>
<li>sembilan empat</li>
<li>sembilan lima</li>
<li>sembilan enam</li>
</ul>
</li>
<li>sepuluh</li>
</ul>

jadinya seperti ini

• satu
• dua
• tiga
• empat
  • empat satu
  • empat dua
  • empat tiga
    • empat tiga satu
    • empat tiga dua
    • empat tiga tiga
      • empat tiga satu
      • empat tiga dua
      • empat tiga tiga
      • empat tiga empat
        • empat tiga empat satu
        • empat tiga empat dua
        • empat tiga empat tiga
        • empat tiga empat empat
          • empat tiga empat empat satu
          • empat tiga empat empat dua
          • empat tiga empat empat tiga
        • empat tiga empat lima
        • empat tiga empat enam
      • empat tiga lima
      • empat tiga enam
    • empat tiga empat
    • empat tiga lima
    • empat tiga enam
  • empat empat
  • empat lima
  • empat enam
• lima
• enam
• tujuh
• delapan
  • delapan satu
  • delapan dua
  • delapan tiga
• sembilan
  • sembilan satu
  • sembilan dua
  • sembilan tiga
    • sembilan tiga satu
    • sembilan tiga dua
    • sembilan tiga tiga
      • sembilan tiga tiga satu
      • sembilan tiga tiga dua
        • sembilan tiga tiga dua satu
        • sembilan tiga tiga dua dua
        • sembilan tiga tiga dua tiga
      • sembilan tiga tiga tiga
      • sembilan tiga tiga empat
        • sembilan tiga tiga empat satu
        • sembilan tiga tiga empat dua
        • sembilan tiga tiga empat tiga
        • sembilan tiga tiga empat empat
          • sembilan tiga tiga empat empat satu
          • sembilan tiga tiga empat empat dua
          • sembilan tiga tiga empat empat tiga
        • sembilan tiga tiga empat lima
        • sembilan tiga tiga empat enam
      • sembilan tiga tiga lima
      • sembilan tiga tiga enam
    • sembilan tiga empat
    • sembilan tiga lima
    • sembilan tiga enam
  • sembilan empat
  • sembilan lima
  • sembilan enam
• sepuluh

Prinsip rendering dan cara kerja CSS

Mungkin sobat bertanya, kok bisa jadi dropdown, kan ngga pakai javascript?
itulah asiknya CSS, banyak rahasia yang terkandung di dalamnya, imenu ini hanya menggunakan pseudo classes :hover dan CSS property display. cara kerjanya seperti ini, awalnya ul ul ber-display:none dan ketika li hover maka ul ul akan ber-display:block. jadinya, menu dibawah(ul ul) tidak tampak, dan ketika cursor melintas diatas tag li maka menu dibawah(ul ul) akan muncul(display:block), simple kan?
oia, imenu-dropdown ini saya setting hanya lima tingkat, jadi maximal tag hanya seperti ini(jika dengan CSS) li ul li ul li ul li ul li ul li{}/*contohnya diatas*/

Kenapa namanya imenu?

menu dropdown yang saya buat ini namanya imenu, kok imenu? karena nama saya indam dan yang saya buat adalah menu-dropdown dan jika di singkat jadilah imenu alias menu-dropdown by indam

Browser support?

saya sudah mengujinya di firefox 3.6, chrome(lupa versinya[install at 10/12/2010]), opera(10.6]) sayangnya imenu ini ngga support di IE8(apalagi IE7, 6, 5) , saya ngga tahu kenapa, padahal CSS yang saya tulis sesuai dengan rekomendasi w3c, inilah yang mambuat pengguna ie ngga bisa kreatif, adanya hanya buang waktu.

version

karena imenu ini baru saya buat, jadi imenu ini versi 0.1

file size

CSS: 2.57 KB (2,637 bytes)
html: tergantung jumlah link dan tag
more(html/CSS): tergantung jumlah link dan tag HTML + 2.57 KB (2,637 bytes)

kelebihan dan kekurangan

kelebihan: file size rendah, ngga pake js, mudah di edit
kekurangan: banyak, ngga menarik dan yang paling parah ngga berjalan sesuai rencana di IE

preview and download

imenu ini saya submit di google codex, silakan ikuti link ini untuk download http://imenu.googlecode.com/files/imenu.zip[format file .zip] dan untuk preview-nya silakan extract, buka lalu jalankan

proses installasi

saya pikir sobat sudah tahu, apalagi sudah sering tekan CTRL + U[view page sourse /firefox]

semoga bermanfaat