Membuat Pop Up menu menggunakan CSS tanpa Javascript

Sering kali mungkin Pop Up menu atau drop down atau apalah kebanyakan menggunakan javascript, hasilnya kalo kita gak tahu sama sekali tentang javascript pasti musti lihat tutorialnya.

Nah disini mungkin akan gw bantu dikit tentang membuat menu pop up tanpa javascript yeh. 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 gak tampak. Oke sebelumnya kita akan membuat vertical menu terlebih dahulu. Kalo gak teu apa ntuh vertikal menu cari di google aje yeh, biar kita tetap kembali ke topik. wew

Silahkan ketikkan kode berikut neh dan save dengan nama popup.html

Code:: <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="#" >FreezerLand</a>
<ul>
<li><a href="#">Home</a></li><li><a href="#">Index</a></li><li><a
href="#">log Out</a></li>
</ul>
</div>

Jika lo lihat hasilnya maka kita membuat vertical menu dan sebuah link Freezerland. Nah nanti yang kita lakukan adalah kita membuat Vertical Menu nya menghilang dan ketika mouse kita melewati Freezerland 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

Code:: <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="#" >Freezerland</a>
<ul>
<li><a href="#">Home</a></li><li><a href="#">Index</a></li><li><a
href="#">Log Out</a></li>
</ul>
</div>

Oke, jika lo coba kode diatas maka Vertical Menu nya telah hilang. Nah untuk memunculkannya lagi kita bisa menggunakan display:block;. Silahkan coba kode berikut ini:

Code:: <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="#" >Freezerland</a>
<ul>
<li><a href="#">Home</a></li><li><a href="#">Index</a></li><li><a
href="#">Log Out</a></li>
</ul>
</div>

nah segitu aje moga berguna jg ye
yang baca musti wajib replay wew

» membuat menu melayang
» Membuat Horizontal Menu CSS, Images Sprites dan Animasi
» Tips dan Trik Membuat Aplikasi Facebook dalam 5 Menit Bagaimana membuat aplikasi di Facebook
» Masa Depan JavaScript
» 100% GRATIS SMS TANPA REG VIA INTERNET