Anda pasti pernah menjumpai menu seperti ini:
Menu ini dinamakan dengan menu drop down.
Menu drop down sudah sangat sering dijumpai di website-website yang ada di internet. Tampilannya yang elegan dan multifungsi menjadikannya menarik untuk digunakan. Untuk membuat menu drop down ini HTML saja tidaklah cukup. Diperlukan CSS dan juga Javascript, CSS digunakan untuk mengatur tampilan, sedangkan Javascript digunakan untuk mengatur action-action untuk menu tersebut. Untuk membuat menu drop down ini anda bisa saja membuatnya dari 0 (semuanya dikerjakan manual), namun dengan perkembangan zaman saat ini sudah banyak tersedia source code gratis yang bisa digunakan. Salah satunya tutorial yang akan saya berikan ini. Tutorial ini saya dapat dari dynamicdrive.com.
Langsung saja, berikut adalah tutorialnya:
- Download dulu Javascript untuk membuat menu dropdown ini disini (Klik kanan save link as)
- Download juga CSS style untuk membuat menu dropdown ini disini (Klik kanan save link as)
- Buat file HTML baru, dan pastikan file tersebut berada pada folder yang sama dengan file CSS dan Javascript yang tadi anda download.
- Di dalam tag <head> tambahkan kode ini :
<link rel="stylesheet" type="text/css" href="chromestyle.css" />
<script type="text/javascript" src="chrome.js"></script>
- kode tersebut artinya mengambil script dari external file yaitu file chromestyle.css dan chrome.js. Selanjutnya untuk membuat menu utamanya gunakan script berikut :
<div class="chromestyle" id="chromemenu">
<ul>
<li><a href="http://blajar-komputer.blogspot.com">Home</a></li>
<li><a href="#" rel="dropmenu1">Resources</a></li>
<li><a href="#" rel="dropmenu2">News</a></li>
<li><a href="#" rel="dropmenu3">Search</a></li>
</ul>
</div>
- untuk menambahkan menu dropdown tambahkan saja atribut rel="dropmenu1" dimana dropmenu1 adalah nama dari dropmenu yang nantinya dideklarasikan di bawahnya. Tambahkan script berikut ini untuk memunculkan dropdown menunya :
<!--Yang ini kalau mouse berada diatas menu Resources-->
<div id="dropmenu1" class="dropmenudiv">
<a href="http://www.dynamicdrive.com/">Dynamic Drive</a>
<a href="http://www.cssdrive.com">CSS Drive</a>
<a href="http://www.javascriptkit.com">JavaScript Kit</a>
<a href="http://www.codingforums.com">Coding Forums</a>
<a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a>
</div>
<!--Yang ini kalau mouse berada diatas menu news -->
<div id="dropmenu2" class="dropmenudiv" style="width: 150px;">
<a href="http://www.cnn.com/">CNN</a>
<a href="http://www.msnbc.com">MSNBC</a>
<a href="http://news.bbc.co.uk">BBC News</a>
</div>
<!-- Yang ini kalau mouse berada diatas menu search -->
<div id="dropmenu3" class="dropmenudiv" style="width: 150px;">
<a href="http://www.google.com/">Google</a>
<a href="http://www.yahoo.com">Yahoo</a>
<a href="http://www.msn.com">MSN</a>
</div>
- dan terakhir tambahkan script ini :
<script type="text/javascript">
cssdropdown.startchrome("chromemenu")
</script>
script tersebut digunakan untuk menjalankan menu drop down ini. Atau anda bisa juga pelajari contohnya yang dapat di download di link di bawah ini
DOWNLOAD
Leave a comment