Untuk menjelaskannya mungkin agak rumit, lebih jelasnya saya akan memraktekkan cara membuat menu dropdown pada halaman web.
Krtik script dibawah ini kemudian simpan dengan ekstensi .html. Saya akan menyimpan dengan nama index.html :
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<ul id="nav">
<li><a href="">Home</a></li>
<li><a href="">About</a>
<ul>
<li><a href="">Facebook</a></li>
<li><a href="">Twitter</a></li>
</ul>
</li>
<li><a href="">Contact</a>
<ul>
<li><a href="">Email</a></li>
<li><a href="">Mobile</a></li>
</ul>
</li>
<li><a href="">Post Feed</a>
<ul>
<li><a href="">Via Web</a></li>
<li><a href="">Via Phone</a></li>
<li><a href="">Via RSS</a></li>
</ul>
</li>
</ul>
</body>
</html>
Kemudian buat file baru dengan ektensi .css, saya akan memberi nama style.css. File css ini berguna untuk membuat tampilan lebih menarik.
ul {
margin: 0;
padding: 0;
list-style: none;
}
ul li {
position: relative;
float: left;
width: 100px;
}
li ul {
position: absolute;
top: 30px;
display: none;
}
ul li a {
display: block;
text-decoration: none;
line-height: 20px;
color: #000;
padding: 5px;
background: #CC0;
margin: 0 2px;
}
ul li a:hover { background: #66F; }
li:hover ul, li.over ul { display: block; }
Jalankan file index.html ke browser kesayangan anda. File index.html dan style.css usahakan satu folder. Untuk tampilannya adalah sebagai berikut :
Pahami contoh sederhana diatas, akan lebih paham jika anda mencobanya.
Semoga bermanfaat !!!
Wahhh, perlu di coba nih
ReplyDeleteThank's yahhh !
keren gan!!
ReplyDeletemantap gan :D
ReplyDeletejgn lupa mampir balik
nice info gan :)
ReplyDeleteMantap dah gan informasinya ..
ReplyDelete#Salam Sukses RBN
Wah, ini yang ingin aku pelajari,. . makasih banget, sungguh bermanfaat
ReplyDeletemantep bro :D
ReplyDeleteartikel yang sangat bermanfaat ..
ReplyDeleteSiiip, langsung saya praktekan sob
ReplyDeleteakhirnya nemu juga script html drop down, thanks kakak
ReplyDeleteDrop down dah jalan luancar, share trus ilmunya boss ya. Terima kasih
ReplyDelete