Membuat Drop Down Menu Dengan CSS Pure
Post date Jun 6th, 2008
Coba iseng-iseng mencari script untuk menampilkan drop down menu, kayak menu di windows itu. Dulu pernah pake menu yang seperti ini, tetapi ada unsur javascriptnya. Nah kelemahannya, jika menggunakan javascript, ketika browser tidak mengaktifkan javascriptnya, maka menu tidak bisa diakses. Nah solusinya adalah dengan CSS. Kelebihan menu drop down dengan CSS adalah program menjadi lebih ringan, karena hanya menggunakan CSS, lebih bersih (menurut saya aja lho), apalagi CSS juga lebih mudah dipelajari, tidak usah pusing-pusing dengan object dan class.
Nah, yang ingin kode tersebut, silahkan rampok kopi di bawah ini
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 | <html> <head> <style type="text/css"> body { font-family: Verdana; } div.mainmenu { position: absolute; left: 10px; top: 0px; font-weight: bold; z-index: 1; } div.menu { float: left; margin-left: 10px; } div.popup a:hover { background-color: #faa; } div.menu:hover div:first-child { border-bottom: none; } div.menu div.popup { display: none; } div.menu:hover div.popup { display: block; background-color: #99f; } div.menu div { width: 175px; background-color: #66f; padding: 5px; border: solid 1px blue; } div.popup div, div.popup a { display:block; text-decoration: none; margin: 2px 2px 2px 5px; } div.popup div + div, div.popup a + a { margin-top: 10px; } div.content { position: absolute; left: 20px; top: 30px; border: 1px dashed gray; } </style> </head> <body> <div class="mainmenu" id="mainmenu"> <div class="menu"> <div>CSS</div> <div class="popup"> <a href="index.html">The menu</a> <a href="#">Nowhere</a> <a href="#">Nowhere</a> </div> </div> <div class="menu"> <div>Fish</div> <div class="popup"> <a href="#">One fish</a> <a href="#">Two fish</a> <a href="#">Red fish</a> <a href="#">Blue fish</a> </div> </div> <div class="menu"> <div>JavaScript</div> <div class="popup"> <a href="highlight.html">Highlighting</a> <a href="#">Nowhere</a> <a href="#">Also nowhere</a> </div> </div> <div class="menu"> <div>Oxo</div> <div class="popup"> <a href="#">Nowhere</a> <a href="#">Nowhere else</a> <a href="#">And nowhere</a> <a href="#">Nowhere too</a> </div> </div> </div> <div class="content"> ... some content </div> </body> </html> |
Bukan saya sendiri kok yang membuatnya, saya hanya mengkopi dari tempat lain. Sumbernya sudah lupa, maaf ya 
Random Posts
Filled in category Belajar web, CSS, Cerita-Cerita, Teknologi
pertamaxxxx….
hehe saya juga pernah pake ini script ini mas, saya juga lupa sumbernya. untuk browser emang lebih enak optimalisasi CSS lebih enteng
Setuju sama mas tipis, CSS emang bikin web lebih aksesibel. Sekalipun kadang JavaScript terlihat keren…
Tutornnya joos mas….di tunggu trik2 lainnya
wa….keren banget mas bimo…nice to try nih…^^
thank you ya mas^^
salam kenal..
Terima kasih, ilmu yang anda sebarkan sangat berguna.
iya emang enteng deh mas bimo dan keren..!!, cuma kurang ngeblink aja he..he..
Artikel yang lumayan. makasih atas infonya. Saya masih sering memakai javascript untuk drop down menu. Artikel ini menambah pengetahuan saya
Wah, di jogja memang banyak Blogger handal. Ni dapet satu lagi
kayanya juga seorang programer ni. Salam kenal mas Bimo. Mas saya juga mau tanya, cara install plugin Brian Thread Comment itu gimana ya? Kayanya mas Bimo juga pake Plugin kaya gitu. Mohon pencerahanya mas Bimo. Terima kasih 
Cuma mau lapor aja, skrip di atas tidak bekerja di IE 7
tengkyu atas laporannya.
thank’s
saya cuba paparkan hasil script di atas menggunakan browser IE, tetapi tidak berjaya. Hanya firefox shj okey.
i.e 6 g bisa jalan ……….
makasih ya tutornya, dah lama aq cari2 tutor css ini,
thanks ya bimo
mitsikuris last blog post..ternyata ngeplurk asyik juga ya…
script nya tidak jalan di ie
makasih info nya… mugnkin perlu diperbaiki lagi
Keep it up man.,
A good site, good short contents of the good work. Congratulations !,