Membuat dropdown menu dengan css, menu adalah hal paling penting dalam sebuah website, Menu yang baik akan memudahkan pengunjung dalam menjelajahi website kita, terutama ketika website kita ternyata memiliki halaman yang terdiri dari sub dan sub sub halaman.

Pada tutorial kali ini kita akan mencoba membuat Dropdown menu dengan CSS, dan kita akan mempercantik menu yang kita buat dengan sedikit bantuan Jquery.
Pada artikel terdahulu kita juga telah beberapa kali membuat contoh menu, mungkin bisa untuk jadi referensi lain.
OK, kita mulai saja.
Struktur HTML
Disini kita perlu mempersiapkan struktur HTML terlebih dahulu, buat file dengan nama index.html, lalu tulis code berikut ini.
<div class="container">
<!-- Header -->
<header>
<h1>Dropdown Menu</h1>
<p>Tutorial-WebDesign.com</p>
</header>
<!-- /Header -->
<div class="content">
<nav>
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Tutorial</a>
<ul>
<li><a href="#">Web Development</a>
<ul>
<li><a href="#">Server Side</a></li>
<li><a href="#">Client Side</a>
<ul>
<li><a href="#">HTML</a></li>
<li><a href="#">Javascript</a>
<ul>
<li><a href="#">Jquery</a></li>
<li><a href="#">Mootool</a></li>
<li><a href="#">Prototipe</a></li>
</ul>
</li>
<li><a href="#">DOM</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Web Design</a></li>
<li><a href="#">Security</a></li>
</ul>
</li>
</ul>
</nav> <!-- /Navigation -->
</div> <!-- /Content -->
<footer>
Copyright © 2012, <a href="http://www.Tutorial-webdesign.com">Tutorial-webdesign.com</a>
</footer> <!-- /Footer -->
</div> <!-- /Container -->
Sisipkan Jquery dan CSS di bagian head
dan /head
.
<title>Demo Dropdown Menu: Tutorial-Webdesign.com</title>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="twd-menu.js"></script>
Sebenarnya menu ini tetap berjalan dengan baik tanpa Javascript/Jquery, namun untuk membuat efek muncul dengan perlahan kita menggunakan Jquery.
Efek seperti itu sebenarnya bisa dibuat juga dengan CSS3 Animation, ayo silahkan tunjukan creasi anda!!
Styling
Untuk mempercantik tampilan tulis css berikut ini, di file style.css.
body{
font-size:0.85em;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
.container{
width: 800px;
padding:20px;
margin: 50px auto;
border-top: 5px solid orange;
background: #f4f4f4;
overflow: hidden;
}
.content{
height: 200px;
}
#nav, #nav ul{
margin:0;
padding:0;
list-style-type:none;
list-style-position:outside;
position:relative;
line-height:1.5em;
}
#nav a{
display:block;
padding:5px 5px;
border:1px solid orange;
color:#fff;
text-decoration:none;
background-color:orange;
}
#nav a:hover{
background-color:#fff;
color:#333;
}
#nav li{
float:left;
position:relative;
}
#nav ul {
position:absolute;
display:none;
width:12em;
top:2.3em;
}
#nav li ul a{
width:12em;
height:auto;
float:left;
}
#nav ul ul{
top:auto;
}
#nav li ul ul {
left:12em;
margin:0px 0 0 10px;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{
display:none;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul{
display:block;
}
footer{
margin-top:50px;
clear: both;
}
Jquery
Sebenarnya sampai disini menu sudah tampil OK.
Untuk memperhalus munculnya sub menu, kita bisa membuat nya dengan Javascript/Jquery seperti dibawah ini.
Kita juga bisa menggantinya dengan CSS3 Animation jika diinginkan.
Code untuk twd-menu.js.
function mainmenu(){
$(" #nav ul ").css({display: "none"}); // Opera Fix
$(" #nav li").hover(function(){
$(this).find('ul:first').css({visibility: "visible",display: "none"}).show(400);
},function(){
$(this).find('ul:first').css({visibility: "hidden"});
});
}
$(document).ready(function(){
mainmenu();
});
Hasil
Berikut adalah hasil dari menu yang kita buat, anda bisa merubahnya sesuai kebutuhan anda, kita ada saran dan masukan anda bisa menuliskan komentar anda, atau membuat tulisan juga di blog ini, dengan cara mendaftar terlebih dahulu.
Sekian tutorial kali ini, semoga berguna
Salam Web Design Indonesia
Artikel yang sangat membantu, dah lama nyari2 akhirnya ketemu disini.
Thanks for all/
Terima kasih sudah berkunjung, semoga terbantu dengan artikel ini :)
Cool..
Sebagai alternatif, bisa seperti ini:
$(‘#nav li’).hover(function(){
$(this).children(‘ul’).eq(0).stop(true,true).slideToggle();
});
akhirnya nemu juga yang sesuai keinginan.
nyoba-yoba sendiri gagal terus.
makasih banget tutorialnya..
sungguh sangat membantu saya dalam belajar membuat website…
one more thanks…
Kami senang anda menyukainya :)
Om itu bisa ga ditambah bagroundnya…dimananya ya om?
background?
Dimana aja bisa dikasih background kok
ada pilihan lain gk jedanya?
Makasih gan tutorialnya. Kereeen :)
terima kasih kk atas informasinya..
bermanfaat buat TA, terima kasih :)
thanks gan, sesuai yang dicari. klo mouse hover kan ada animasi, kalo lepas mouse hover animasi kembali ke ul gimana gan ?
kalau di terapkan di blogger bisa ga ya mas?
saya tertarik nih sama menunya
Bisa saja
masih saya coba mas… masih saya utak atik ini semoga aja berhasil, saya modifikasi sedikit gpp ya mas :D mungkin warnanya doang yang saya modifikasi :D
susah juga kalo dipasang di blogspot ya,, padahal design clean bangets istilahnya flat ya?
makasih sharingnya om.. lanjutkan berbagi ilmu moga bermanfaat.
iy emang susa gan..kan blogspot gak bisa upload file sendiri..
btw makasih ilmunya kawan, Salam juga Web Design Indonesia !