Membuat Pop Up menu menggunakan CSS tanpa Javascript
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>
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>
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>
Pop Up Menu
tidak dapat berjalan di IE 6, karena itu cobalah menggunakan Firefox atau IE 7.
Tapi tenang saja nanti ada caranya agar dapat bekerja di IE 6
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;
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>
Share story
0 comments: