HOMEArtikel CSS (Cascading Stylesheet)
- Home
- » CSS (Cascading Stylesheet)
- » Membuat Pop Up menu menggunakan CSS tanpa Javascript
- » CSS (Cascading Stylesheet)
Membuat Pop Up menu menggunakan CSS tanpa Javascript
Ditulis oleh Dhimas Ronggobramantyo
Kategori: CSS (Cascading Stylesheet)
Dibaca 19722 kali
Kali ini kita akan membahas bagaimana membuat Pop Up menu atau ada yang menyebutnya Drop Down atau apalah namanya. Yang jelas kita akan membuat seperti Pop Up Menu ini. Bagaimana menarik kan? Dalam contoh tersebut kita hanya menggunakan HTML dan CSS tanpa menggunakan Javascript sama sekali, jadi kita tidak perlu khawatir dengan kompatibilitasnya dengan browser-browser yang ada.
Memanfaatkan display dan hover
Didalam CSS kita mengenal display nah display ini memiliki nilai visible yang mengakibatkan tampilan menjadi tidak tampak. Oke sebelumnya kita akan membuat vertical menu terlebih dahulu, jika anda binging dalam membuat vertical menu silahkan baca Membuat Menu dengan CSS terlebih dahulu. Oke pertama-tama kita membuat vertical menu terlebih dahulu yang akan menjadi pop up menu kita. Silahkan ketikkan kode berikut dan simpan dengan nama popup.html
<style type="text/css" media="all">
ul {
margin: 5px;
width: 160px;
padding: 5px 5px 5px 15px;
list-style: none;
background:#fff1dc;
position: absolute;
z-index: 500;
top:20px;
}
li a{
display:block;
color:#ff8d1b;
text-decoration:none;
border-bottom:1px dashed #ff7f00;
padding:2px 2px 2px 5px;
font-family:Georgia, garamond, serif;
}
li a:hover{
display:block;
color:#db6d00;
text-decoration:none;
border-bottom:1px dashed #ff7f00;
background:#ffdfbf;
}
</style>
<div id="menu">
<a href="#" >Produk</a>
<ul>
<li><a href="#">Alat tulis</a></li><li><a href="#">Alat Kantor</a></li><li><a href="#">Komputer</a></li>
</ul> </div>
Hasilnya seperti ini
Jika anda lihat hasilnya maka kita membuat vertical menu dan sebuah link Produk. Nah nanti yang kita lakukan adalah kita membuat Vertical Menu nya menghilang dan ketika mouse kita melewati Produk maka vertical menu nya muncul. Oke sekarang kita akan menghilangkan Vertical Menu nya.
Kita cukup menambahkan display:none untuk menghilangkan vertical menunya. Disini kita memasang display:none; pada ul untuk menghilangkan keseluruhan vertical menu. Seperti inilah kodenya untuk menghilangkan Vertical Menu:
<style type="text/css" media="all">
ul {
margin: 5px;
width: 160px;
padding: 5px 5px 5px 15px;
list-style: none;
background:#fff1dc;
position: absolute;
z-index: 500;
top:20px;
display:none;
}
li a{
display:block;
color:#ff8d1b;
text-decoration:none;
border-bottom:1px dashed #ff7f00;
padding:2px 2px 2px 5px;
font-family:Georgia, garamond, serif;
}
li a:hover{
display:block;
color:#db6d00;
text-decoration:none;
border-bottom:1px dashed #ff7f00;
background:#ffdfbf;
}
</style>
<div id="menu">
<a href="#" >Produk</a>
<ul>
<li><a href="#">Alat tulis</a></li><li><a href="#">Alat Kantor</a></li><li><a href="#">Komputer</a></li>
</ul> </div>
Hasilnya seperti ini
Oke, jika anda coba kode diatas maka Vertical Menu nya telah hilang. Nah untuk memunculkannya lagi kita bisa menggunakan display:block;. Silahkan coba kode berikut ini:
<style type="text/css" media="all">
ul {
margin: 5px;
width: 160px;
padding: 5px 5px 5px 15px;
list-style: none;
background:#fff1dc;
position: absolute;
z-index: 500;
top:20px;
display:none;
}
li a{
display:block;
color:#ff8d1b;
text-decoration:none;
border-bottom:1px dashed #ff7f00;
padding:2px 2px 2px 5px;
font-family:Georgia, garamond, serif;
}
li a:hover{
display:block;
color:#db6d00;
text-decoration:none;
border-bottom:1px dashed #ff7f00;
background:#ffdfbf;
}
#menu:hover, #menu:hover ul {
display:block;
}
</style>
<div id="menu">
<a href="#" >Produk</a>
<ul>
<li><a href="#">Alat tulis</a></li><li><a href="#">Alat Kantor</a></li><li><a href="#">Komputer</a></li>
</ul> </div>
Hasilnya seperti ini
Bagaimana Cara Kerjanya
Jika kita perhatikan kode diatas, kita menambahkan #menu:hover, #menu:hover ul yang isinya adalah display:block;. Nah yang dimaksud dengan #menu:hover, #menu:hover ul adalah kita mengubah #menu:hover dan #menu:hover: ul menjadi display:block;. Seperti yang kita ketahui :hover merupakan kondisi dimana ketika mouse melewati suatu class / id maka kondisinya dijalankan (dalam hal ini mouse melewati #menu dan #menu ul). Pada kode diatas posisi ul didalam menu, maka jika kita melewati #menu maka otomatis kita melewati ul. Sehingga display:block; dijalankan untuk #menu dan ul. Yang mengakibatkan Vertical Menu kita muncul. Bagaimana mudah kan?
Membuat Pop up Menu untuk Internet Explorer 6
Seperti yang saya bilang tadi, Pop Up menu tidak jalan di IE 6. Hal ini dikarenakan IE 6 hanya mengenal :hover digunakan didalam tag <a>, jadi kita tidak bisa menggunakannya di tag lainnya. Tapi untunglah orang bule pintar-pintar. Seseorang bernama Peter Nederlof telah melakukan (yang kita kenal dengan istilah CSS Hack). Ia membuat sebuah file Javascript yang dikenal dengan istilah csshover.htc.
Jadi anda cukup memasang file csshover.htc ini untuk menggunakannya. Saya tidak tau isi dari file csshover.htc ini karena menggunakan Javascript. Nah anda dapat mendownload file csshover.htc terlebih dahulu. Untuk menggunakannya anda cukup memasangnya sebgai behavior di body. Oke silahkan coba kode selengkapnya berikut ini:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<style type="text/css" media="all">
body {
behavior: url(csshover.htc);
}
ul {
margin: 5px;
width: 160px;
padding: 5px 5px 5px 15px;
list-style: none;
background:#fff1dc;
position: absolute;
z-index: 500;
top:20px;
display:none;
}
li a{
display:block;
color:#ff8d1b;
text-decoration:none;
border-bottom:1px dashed #ff7f00;
padding:2px 2px 2px 5px;
font-family:Georgia, garamond, serif;
}
li a:hover{
display:block;
color:#db6d00;
text-decoration:none;
border-bottom:1px dashed #ff7f00;
background:#ffdfbf;
}
#menu:hover, #menu:hover ul {
display:block;
}
</style>
</head>
<body>
<div id="menu">
<a href="#" >Produk</a>
<ul>
<li><a href="#">Alat tulis</a></li><li><a href="#">Alat Kantor</a></li><li><a href="#">Komputer</a></li>
</ul> </div>
</body>
</html>
Silahkan anda coba dan jalankan di IE 6 atau IE 5. Sekarang Pop Up menu kita berfungsi di semua browser. Selamat mencoba...
Komentar [29]
Dikirim oleh khollil pada 07 Desember 2007 10:55:43 WIB
mantap banget
Dikirim oleh Eko Supriyanto pada 10 Desember 2007 02:16:08 WIB
..maaf mo tanya nih ttg penggunaan CSS Dropdown menu...
apakah menu yg akan saya tampilkan di tulis dalam file CSS juga...ato di File HTML (index.htm) ?? saya agak bingung cara me-link antara template CSS dengan menu yg saya akan buat di HTML...tolong beri penjelasan..
regards,
ekos@pikhospital.com
Dikirim oleh Dhimas pada 18 Desember 2007 09:03:29 WIB
Bisa di file CSS atau di file html nya juga bisa, kalau contoh diatas didalam file html nya
Dikirim oleh Max pada 22 Januari 2008 10:09:58 WIB
Loh ktnya dropdown pke css, ko malah pke JS sih 
Harusny cari cara supaya memperkecil penggunaan JS
Dikirim oleh Dhimas pada 09 Februari 2008 10:49:15 WIB
Hehehe pinginnya gitu, tapi karena IE 6 gak bisa hover selain di tag a ya jadinya pake javascript deh buat ngehandle IE 6. atau mungkin ada yang tau caranya?
Dikirim oleh manusia biasa pada 28 Maret 2008 08:14:24 WIB
Bagusss Deckk
oh ya aq mo tanya nichh tentang popup menu mnggunkan picture
gimana yachh caranya
Dikirim oleh manusia biasa yang nga' tau apa apa pada 28 Maret 2008 08:14:55 WIB
Bagusss Deckk
oh ya aq mo tanya nichh tentang popup menu mnggunkan picture
gimana yachh caranya
Dikirim oleh manusia biasa yang nga\' tau apa apa pada 28 Maret 2008 08:15:05 WIB
Bagusss Deckk
oh ya aq mo tanya nichh tentang popup menu mnggunkan picture
gimana yachh caranya
Dikirim oleh mustafa pada 11 April 2008 02:15:02 WIB
Saya hanyalah orang yang senang dengan segala sesuatu yang berhubungan dengan website dan internet dan ingin agar semua orang se-Indonesia Raya juga menyukainya. (quote)
------------------------------------------------------
harusnya rajin online donk 
rajin upload tutor juga
===================================
teruskan pak Dhimas, kami senang dedikasi Anda.
Dikirim oleh Dhimas Ronggobramantyo pada 13 April 2008 04:46:25 WIB
hehehe maunya juga gitu, pinginya nulis tutorial terus, tapi saya juga perlu ngisi perut jadi saya prioritaskan buat web klien saya dulu, baru kalau senggang nulis artikel lagi.
Dikirim oleh aris pada 18 April 2008 12:22:13 WIB
saya sudah mencobanya. bagus. hanya gimana kalau untuk 2 atau lebih menu agar tampilannya bisa horizontal. soalnya ketika saya tambahkan menu, malah - jadi vertikal seperti list (vertikal) - bukan menyamping (horizontal). mohon pencerahan. thx b4.
Dikirim oleh tomy meilando pada 29 April 2008 09:24:45 WIB
mantaf, kren dah,.
salam kenal,. web nya sangat kren,ok&membantu sekali,
bakalan jadi favorite site yang saya kunjungi nih,.
thanks ya,.
oh iya, kalo bisa penjelasan nya bisa di cerna oleh pemula,he2
-salam kenal-
Dikirim oleh tomy meilando pada 29 April 2008 09:32:48 WIB
pak, tanya donk,.
koq over state nya luas banget ya width nya,.
pas di deketin kursor nya sepanjang kanan menu,.
eh sub menu nya udah muncul,.
itu ngakalin nya gimana ya?
mohon pencerahan,.
terima kasih banyak ya,.
di tunggu jawaban nya,coz tiap hari nih online,.
he2
Dikirim oleh doez pada 08 Juli 2008 11:03:09 WIB
thak's
Dikirim oleh tsun pada 09 Agustus 2008 09:19:54 WIB
sep deh!
Dikirim oleh Irwans pada 13 Agustus 2008 08:23:25 WIB
Nih menu popup 6 level jalan di semua browser tanpa JS, tanpa csshover.htc
Stu Nicholls | CSSplay | tab menu overlapping
A cross-browser drop-down cascading validating menu
6th March 2006
If you love this you will be over the moon about the Mk.3 version.
DEMOS
zero dollars
wrapping text
styled form
active focus
HOVER/CLICK >
styled form
active focus
hover/click
shadow boxing
image map
fun backgrounds
fade scrolling
em sized images
MENUS
spies menu
vertical menu
enlarging list
link images
non-rectangular
jigsaw links
circular links
LAYOUTS
Fixed 1
Fixed 2
Fixed 3
Fixed 4
minimum width
BOXES
spies menu
vertical menu
enlarging list
link images
non-rectangular
jigsaw links
circular links
MOZILLA
drop down menu
cascading menu
content:
mozzie box
rainbow box
snooker cue
target practise
two tone headings
shadow text
EXPLORER
example one
weft fonts
vertical align
OPACITY
opaque colours
opaque menu
partial opacity
partial opacity II
< HOVER/CLICK
styled form
active focus
hover/click
Dikirim oleh Irwans pada 13 Agustus 2008 08:25:16 WIB
waduh kode htmlnya gal muncul. Mesti diubah ke kode ascii ya?
Dikirim oleh Cah utun pada 25 Agustus 2008 08:29:14 WIB
Pak de... tutor sapeyan suaeeeee...
lebih sering diuploadtin tutor mengenai trik2 PHP,JS,HTML.OK ya...
Matur suwun...
Sugeng Dalu...
From Warok Ponorogo!!!
Dikirim oleh agus setiawan pada 08 September 2008 10:58:14 WIB
numpang lewat... =)
Dikirim oleh agus setyawan pada 01 Oktober 2008 06:29:52 WIB
numpang mandi (MANg DIpikirin)
Dikirim oleh toy_cahsolo pada 14 Desember 2008 08:44:39 WIB
matur thankyou mas dimas.. saya jadi tambah pengetahuan.
berkat sampeyan, tugas webQ jadi lebih Uasyik..
Dikirim oleh rhelix man pada 28 Maret 2009 09:32:15 WIB
mas dimas kalo bisa sama tutornya javascript donk soale lagi gandrung javascript nih......!!!
;))
Dikirim oleh Tham m2m pada 01 Mei 2009 11:55:34 WIB
Ass. Mas Kenapa Popup Menunya tidak berada dekat teks menunya
Dikirim oleh thoff4 pada 16 Mei 2009 03:26:42 WIB
mas kalo pengen banyak caranya gimana ?? ko di utak-atik tetep g bisa n malah g muncul menu-nya.
Dikirim oleh bravo1 pada 23 Juli 2009 05:20:35 WIB
yg latihan trakhir itukan popup menunya muncul di kanan.
klo menunya dimunculkan tepat di bawah bgmn yach ?
thx
Dikirim oleh Raka pada 01 Agustus 2009 10:29:42 WIB
Thnks www.gudangkui.co.cc
Dikirim oleh harry pada 22 Agustus 2009 02:41:33 WIB
hallo
Dikirim oleh kenny pada 27 September 2009 01:51:38 WIB
Saya mw nanya nihh.... Bisa kasih tau software tester buat html, dan css ndak? terus free downloadnya kira2 di web apa yah? terima kasih ^^
Dikirim oleh max plex pada 19 Desember 2009 05:03:13 WIB
mau nanya bang!
kalo property z-index itu sebenarnya fungsinya dalam css buat apa?
mohon penjelasan nya
RSS Feeds
Valid XHTML Strict