Software/Aplikasi
Ilmu Islam
Info
B.pemograman
Games
Film
Musik
Apk
karena dengan adanya menu pilihan ini kita tidak susah paya membuah banyak pilihan sampai berjajar vertikal, menggunakan, selain memudahkan dengan Dropdown, akan membuat Blog/Website milik kita tampak lebih menarik
Berikut cara membuat Menu pilihan / Dropdown :
1. Bisa Kalian download Scriptnya di http://www.dynamicdrive.com/dynamicindex1/ddlevelsmenu/ddlevelsmenu.zip kemudian bisa kalian Ekstrak di website anda
2. Silahkan membuat html File dan include file-file nya
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 anda memulai tampilan menu yang akan ditampilkan<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>
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.Biatlah Coding untuk mengaktifkan menu diatas :<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
<script type="text/javascript">
ddlevelsmenu.setup("menuku", "topbar"); //ddlevelsmenu.setup("mainmenuid", "topbar|sidebar")
</script>
5. Buatlah isi dari menu yang akan disorot sesuai keinginan kalian, contoh yang akan disorot #menu_teknlogi dan #menu_kuliner :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>
6. Berikut untuk coding Lengkapnya :<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>
<!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>
7. untuk contoh hasilnya bisa kalian lihat di http://www.dynamicdrive.com/dynamicindex1/ddlevelsmenu/<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>
sumber : http://www.proweb.co.id/articles/web_design/drop_down_horizontal_javascript.html
0 Comment to "Cara Mudah Membuat Menu Pilihan Dropdown dengan Javascript"
Posting Komentar