Fathonan: Cara Mudah Membuat Menu Pilihan Dropdown dengan Javascript

    Membuat Menu Pilihan atau Dropdown pada sebuah website dapat menudahkan kita ataupun Pengunjung, berikut simak cara membuatnya.

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 :

3. Silahkan anda memulai tampilan menu yang akan ditampilkan
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 :

5. Buatlah isi dari menu yang akan disorot sesuai keinginan kalian, contoh yang akan disorot #menu_teknlogi 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>

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

7. untuk contoh hasilnya bisa kalian lihat di http://www.dynamicdrive.com/dynamicindex1/ddlevelsmenu/
sumber : http://www.proweb.co.id/articles/web_design/drop_down_horizontal_javascript.html

Fathonan

Cara Mudah Membuat Menu Pilihan Dropdown dengan Javascript

0 Comment to "Cara Mudah Membuat Menu Pilihan Dropdown dengan Javascript"

Posting Komentar

,

Weekly

Desain

BBM Mod