Pernah lihatkan menu-menu pada sebuah website, ada yang mendatar atau horizontal ada juga yang tegak lurus atau vertikal. Biasanya menu juga terdiri dari sub-sub menu yang fungsinya untuk membagi bagian-bagian dari menu utamanya. Untuk membuat menu yang menarik ternyata cukup simple, dengan menggunakan CSS menu dropdown kita sudah dapat mempercantik halaman website kita.
Misalkan kita ingin membuat menu Software yang mempunyai sub menu Programing, Antivirus dan Converter.
Menu download sub menunya Software, Ebook dan MP3.
Maka pertama yang harus dibuat adalah style.css :
#navigasi{
margin:auto;
padding:0;
height:40px;
width:950px;
background:#0099FF;
}
ul.nav-main,
ul.nav-main li{
margin:0;
padding:0;
list-style:none;
}
ul.nav-main{
position:relative;display:block;
}
ul.nav-main li:hover > ul {
visibility: visible;
}
setelah itu buat halaman menu.php.
<html>
<head>
<title>Dropdown menu</title>
</head>
<body>
<div id="navigasi">
<ul id="navigasi" class="nav-main">
<li class="list"><a href="#">SOFTWARE</a>
<ul class="nav-sub">
<li><a href="#">PROGRAMING</a></li>
<li><a href="#">ANTIVIRUS</a></li>
<li><a href="#">CONVERTER</a></li>
</ul>
<li class="list"><a href="#">DOWNLOAD</a>
<ul class="nav-sub">
<li><a href="#">SOFTWARE</a></li>
<li><a href="#">EBOOK</a></li>
<li><a href="#">MP3</a></li>
</ul>
</ul>
</div>
</body>
</html>
Jika sudah jalankan pada web browser. Silahkan modifikasi sesuai selera teman-teman.
Script ini hanya sebagian Silahkan Download Full sourcecode disini.
