Kali ini kita akan membahas pembuatan drop down menu vertical menggunakan DDlevelsmenu. Berikut akan dijelaskan langkah-langkahnya.
Langkah-langkah pembuatan menu vertical dengan DDlevelsmenu adalah
- Silahkan download http://www.dynamicdrive.com/dynamicindex1/ddlevelsmenu/ddlevelsmenu.zip dan install di website anda
- Buat html filenya dan insert dengan pola seperti pada contoh berikut ini:
<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>
- Buat coding untuk menu yang pertama-tama muncul misalnya:
<div id=”menuku” class=”markermenu”>
<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>
Perhatikan attribut rel, pada Teknologi berisi ‘menu_teknologi’ yang berarti jika menu Teknologi disorot maka akan menampilkan isi dari id #menu_teknologi. Begiku juga menu Kuliner saat disorot akan menampilkan id #kuliner - Aktifkan menu vertical dengan coding seperti di bawah ini:
<script type=”text/javascript”>
ddlevelsmenu.setup(“menuku”, “sidebar”); //ddlevelsmenu.setup(“mainmenuid”, “topbar|sidebar”)
</script> - Buat id yang ditunjukkan oleh atribut rel pada langkah 3 misalnya :
<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 vertical</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=”markermenu”>
<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”, “sidebar”); //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_vertical.html dengan tampilan seperti gambar di bawah ini:
- Informasi lebih lanjut silahkan mengunjungi http://www.dynamicdrive.com/dynamicindex1/ddlevelsmenu/ .
Kunjungi www.proweb.co.id untuk menambah wawasan anda.