Imenu-Dropdown Menu(Just CSS) By Indam

Imenu ini adalah dropdown menu yang di buat hanya menggunakan CSS dan HTML, berikut rincian dan source-nya

Tough and funny and a little bit kind: that is as near to perfection as a human being can be. Mignon McLaughlin

Imenu ini adalah dropdown menu yang di buat hanya menggunakan CSS dan HTML, berikut rincian dan source-nya

Last Modif at July 8th, 2011

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

Indam

A geek, frontend developer. Like you, coding & experiment.
#web #design #ui #ux #standard #dreamer
#welding #interisti #beer #coffee

2 thoughts on “Imenu-Dropdown Menu(Just CSS) By Indam”

  1. anak betawi says:

    Jadi ada anak dan ibunya di menu itu..

  2. anak bandung says:

    ijin sedot gan
    sekalian edit dikid dikid

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Disclaimer, FAQ & License

Hello Gaes, untuk tujuan apapun semua content text di blog ini dapat di copas, tanpa harus menulis sumbernya. Namun content yang berupa gambar--harus Anda periksa kembali lisensinya.

Adapun(mungkin) sebagian content blog ini sudah kadaluarsa atau sudah tidak relevan, contoh :'Theme default WordPress 3+ adalah Twentyten 'apakah selamanya Twentyten?' ngga kan? Indam selaku pengelolah berharap melaporkan jika menemukan content basi yang mungkin dapat menimbulkan salah persepsi tentang content dan konsep itu sendiri. Oia, karena blog ini bersifat pribadi dan bukan untuk komersil, mungkin anda juga akan menemukan tulisan tentang aku dan hal-hal rancu yang sama sekali ngga ada hubungan dengan web dan blog-blogan. Perlu dicatat: Indam selaku pengelolah tidak bertanggung jawab atas kerugian materi, waktu, tenaga, pikiran yang mungkin ditimbulkan dari sini. So, pandai-pandai yah dalam memilah informasi. Thanks for reading.

Quote

Ketika Anda melihat orang lain mengangkat dirinya dengan cara merendahkan orang lain, sebenarnya orang itu lebih rendah dari mereka yang direndahkan. Phidias--greece filsuf

+
-