Toturial kali ini membuat drop down menu multi level dengan javascript. Javascript yang digunakan adalah DDlevelsmenu. Berikut akan dijelaskan langkah-langkahnya yaitu:
- Download scriptnya di http://www.dynamicdrive.com/dynamicindex1/ddlevelsmenu/ddlevelsmenu.zip kemudian ekstrak di website anda.
- Silahkan membuat html file dan include file-filenya sebagai contoh:
<link rel=”stylesheet” type=”text/css” href=”ddlevelsfiles/ddlevelsmenu-base.css” />
<link rel=”stylesheet” type=”text/css” href=”ddlevelsfiles/ddlevelsmenu-topbar.css” />
<link rel=”stylesheet” type=”text/css” href=”ddlevelsfiles/ddlevelsmenu-sidebar.css” /><script type=”text/javascript” src=”ddlevelsfiles/ddlevelsmenu.js”>
/***********************************************
* All Levels Navigational Menu- (c) Dynamic Drive DHTML code library (http://www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/</script>
- Silahkan membuat tampilan menu yang akan tampil mula seperti contoh:
<div id=”menuku” class=”mattblackmenu”>
<ul >
<li ><a href=”teknologi.html” rel=”menu_teknologi”>Teknologi</a></li>
<li ><a href=”kuliner.html” rel=”menu_kuliner”>Kuliner</a></li>
</ul>
</div>Pada coding di atas jika menu Teknologi disorot maka akan menampilkan isi dari id yang ditunjukkan oleh atribut rel yaitu #menu_teknologi. Begitu juga kalau kita menyorot menu Kuliner maka akan menampilkan #menu_kuliner
- Buat coding untuk mengaktifkan menu di atas:
<script type=”text/javascript”>
ddlevelsmenu.setup(“menuku”, “topbar”); //ddlevelsmenu.setup(“mainmenuid”, “topbar|sidebar”)
</script> - Buat isi dari menu yang akan disorot yaitu #menu_teknologi dan #menu_kuliner
<ul id=”menu_teknologi” class=”ddsubmenustyle”>
<li><a href=”software.html”>Software</a></li>
<li><a href=”aplikasi.html”>Aplikasi</a></li>
<li ><a href=”hardware.html”>Hardware</a>
<ul>
<li><a href=”komputer.html”>Komputer</a></li>
<li><a href=”router.html”>Route</a></li>
</ul>
</li>
</ul><ul id=”menu_kuliner” class=”ddsubmenustyle”>
<li><a href=”tradisional.html”>Tradisional</a></li>
<li><a href=”restoran.html”>Restoran</li>
</ul> - Coding lengkapnya :
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html>
<head>
<title>DD Levels menu</title>
<link rel=”stylesheet” type=”text/css” href=”ddlevelsfiles/ddlevelsmenu-base.css” />
<link rel=”stylesheet” type=”text/css” href=”ddlevelsfiles/ddlevelsmenu-topbar.css” />
<link rel=”stylesheet” type=”text/css” href=”ddlevelsfiles/ddlevelsmenu-sidebar.css” /><script type=”text/javascript” src=”ddlevelsfiles/ddlevelsmenu.js”>
/***********************************************
* All Levels Navigational Menu- (c) Dynamic Drive DHTML code library (http://www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/</script></head>
<body>
<div id=”menuku” class=”mattblackmenu”>
<ul >
<li ><a href=”teknologi.html” rel=”menu_teknologi”>Teknologi</a></li>
<li ><a href=”kuliner.html” rel=”menu_kuliner”>Kuliner</a></li>
</ul>
</div><script type=”text/javascript”>
ddlevelsmenu.setup(“menuku”, “topbar”); //ddlevelsmenu.setup(“mainmenuid”, “topbar|sidebar”)
</script><ul id=”menu_teknologi” class=”ddsubmenustyle”>
<li><a href=”software.html”>Software</a></li>
<li><a href=”aplikasi.html”>Aplikasi</a></li>
<li ><a href=”hardware.html”>Hardware</a>
<ul>
<li><a href=”komputer.html”>Komputer</a></li>
<li><a href=”router.html”>Route</a></li>
</ul>
</li>
</ul><ul id=”menu_kuliner” class=”ddsubmenustyle”>
<li><a href=”tradisional.html”>Tradisional</a></li>
<li><a href=”restoran.html”>Restoran</li>
</ul></body>
</html> - Demo dapat dilihat di http://aris.proweb.asia/ddlevelsmenu.html dengan tampilan sebagai berikut :
- Informasi lanjut silahkan mengunjungi http://www.dynamicdrive.com/dynamicindex1/ddlevelsmenu/ .
Kunjungi www.proweb.co.id untuk menambah wawasan anda.