Halaman 1 dari 3

Drop down menu horizontal multi level dengan
javascript
Toturial kali ini membuat drop down menu multi level dengan javascript. Javascript yang
digunakan adalah DDlevelsmenu. Berikut akan dijelaskan langkah-langkahnya yaitu:
1. Download scriptnya
di http://www.dynamicdrive.com/dynamicindex1/ddlevelsmenu/ddlevelsmenu.zip kemudian
ekstrak di website anda.
2. 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>
3. 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
4. Buat coding untuk mengaktifkan menu di atas:
<script type="text/javascript">
ddlevelsmenu.setup("menuku", "topbar"); //ddlevelsmenu.setup("mainmenuid",
"topbar|sidebar")
</script>
5. 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>

Halaman 2 dari 3

    <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>
6. 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>

Halaman 3 dari 3

<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>
7. Demo dapat dilihat di http://aris.proweb.asia/ddlevelsmenu.html dengan tampilan sebagai
berikut :
8. Informasi lanjut silahkan
mengunjungi http://www.dynamicdrive.com/dynamicindex1/ddlevelsmenu/ .
Kunjungi www.proweb.co.id untuk menambah wawasan anda.