Cara Membuat Dropdown Menu Sederhana Dengan Event Click

Bagi yang udah lihat tutorialnya Cara Membuat Dropdown Menu Sederhana anda bisa langsung menambahkan syntax dibawah ini

<script type="text/javascript" src="js/jquery-3.1.0.min.js"></script><script type="text/javascript" src="js/jquery-3.1.0.js"></script><link rel="stylesheet" type="text/css" href="css/index.css"><script type="text/javascript"> //Ketika Halaman Selesai DiLoad Maka Script Akan Berjalan $('document').ready(function() { //Ketika li class=nav-li di klik makan akan mengeksekusi fungsi $('.nav-li').click(function () { //class nav-li tersebut diberi fungsi toggle dengan class tap //class tap ini nantinya digunakan pada dropdown.css $(this).toggleClass('tap'); }); }); </script>
dan ubah dropdown.css dengan syntax dibawah

/* List Di Div Class Menu Disetting secara horizontal dan berdisplay block dengan jarak margin 10px */ .menu li{ display: inline-block; margin: 10px; } /* syntax ul dan juga link (a href) di dalam ul disetting tanpa urutan angka / titik dan juga link tanpa dekorasi (garis bawah) */ .nav-ul{ text-transform: uppercase; list-style: none; } .nav-ul a{ text-decoration: none; } /*Link di design sehingga lebih menarik menu dan submenu*/ .nav-li a{ display: block; padding: 20px; color: white; cursor: pointer; border:1px solid transparent; background: #0e83cd; } /*Membuat efek ketika link / menu dihampiri(mouse berada dalam menu)*/ .nav-li a:hover{ border:1px solid #0e83cd; background: white; color: #0e83cd; } /*Menyembunyikan sub menu(ul yang berada didalam li class = nav-li)*/ .nav-li ul{ display: none; } /*saat nav-li diklik maka li akan mendapatkan class tap*/ /*jadi li.tap adalah li yang mendapatkan class dari fungsi nav-li klik*/ li.tap ul{ /*Menampilkan submenu*/ display: block; /*Membuat posisi submenu berada dibawah menu*/ position: absolute; z-index: 2; left: 0; /*design dari submenu*/ background: #0e83cd; border-top: 1px solid white; border-bottom: 1px solid white; /*Mengatur Submenu*/ width: 100%; padding: 10px 0; } /*Membuat border / garis pembatas pada submenu*/ .nav-li ul li a{ border: 1px solid white; } /*Yang ini gk terlalu penting soalnya ini cuma ikon dimenu utama*/ /*Membuat Icon Arah Panah Sebelum Dihampiri / Dihover*/ .nav-li .arrow:after{ content: '\203A'; margin-left: 20px; float: right; transform: rotate(90deg); } /*Membuat Icon Arah Panah Setelah Diklik*/ li.tap .arrow:after{ content: '\2039'; }

Kira-kira nanti hasil akhirnya jadi kayak gambar dibawah ini

Oke langsung aja kita masuk kecaranya

1.buat dulu foldernya,setelah buat folder kira2 nanti didalam folder tersebut terdapat file berikut

Yang ini isi dari folder css

Yang ini isi dari folder js

2.Setelah itu buat index.html nya,syntax silakan dicopas

<!DOCTYPE html><html><head> <title>Belajar Dropdown Menu</title> <link rel="stylesheet" type="text/css" href="css/index.css"><link rel="stylesheet" type="text/css" href="css/dropdown.css"><script type="text/javascript" src="js/jquery-3.1.0.min.js"></script><script type="text/javascript" src="js/jquery-3.1.0.js"></script><link rel="stylesheet" type="text/css" href="css/index.css"><script type="text/javascript"> //Ketika Halaman Selesai DiLoad Maka Script Akan Berjalan  $('document').ready(function() {   //Ketika li class=nav-li di klik makan akan mengeksekusi fungsi   $('.nav-li').click(function () {    //class nav-li tersebut diberi fungsi toggle dengan class tap    //class tap ini nantinya digunakan pada dropdown.css    $(this).toggleClass('tap');   });  }); </script></head><body><div id="header">
  <h1>
Belajar Dropdown Menu</h1>
<br>    <div class="menu">
      <ul class="nav-ul">    
<li class="nav-li"><a href="">home</a></li>
<li class="nav-li"><a>Menu 1<span class="arrow"></span></a>        <ul>
<li><a href="">Submenu</a></li>
<li><a href="">Submenu</a></li>
<li><a href="">Submenu</a></li>
<li><a href="">Submenu</a></li>
<li><a href="">Submenu</a></li>
<li><a href="">Submenu</a></li>
</ul>
</li>
<li class="nav-li"><a>Menu 2<span class="arrow"></span></a>    <ul>    
<li><a href="">Submenu</a></li>
<li><a href="">Submenu</a></li>
<li><a href="">Submenu</a></li>
<li><a href="">Submenu</a></li>
<li><a href="">Submenu</a></li>
<li><a href="">Submenu</a></li>
<li><a href="">Submenu</a></li>
</ul>
</li>
<li class="nav-li"><a>Menu 3<span class="arrow"></span></a>    <ul>    
<li><a href="">Submenu</a></li>
<li><a href="">Submenu</a></li>
<li><a href="">Submenu</a></li>
<li><a href="">Submenu</a></li>
<li><a href="">Submenu</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div id="body">
 <h3>
Selamat Datang Di Latihan Membuat Dropdown Menu</h3>
</div>
<div id="footer">
 <h3>
infogakjelas.net @ 2016. All rights reserved. Designed by Muhammad Wazirul Azzan.</h3>
</div>
</body></html>

Klo Cssnya Belum dibuat ntar jadinya kayak gini

Jelek Bukan ? Oke kita langsung ke step 3 untuk menghiasinya

3.Oke Sekarang Buat Cssnya,File Css ini nantinya akan ditaruh di folder css.

Yang pertama dibawah ini adalah syntax dari index.css / css-nya halaman index (Bagian selain Dropdown)

Yang Kedua ini adalah script paling penting dimana script css ini adalah scriptnya dropdown menu, oke langsung copas aja

/*      List Di Div Class Menu Disetting secara horizontal dan berdisplay block dengan jarak margin 10px    */ .menu li{ display: inline-block; margin: 10px; }  /* syntax ul dan juga link (a href) di dalam ul disetting tanpa urutan angka / titik dan juga link tanpa dekorasi (garis bawah) */ .nav-ul{  text-transform: uppercase;  list-style: none; } .nav-ul a{  text-decoration: none; }  /*Link di design sehingga lebih menarik menu dan submenu*/ .nav-li a{  display: block;  padding: 20px;  color: white;  cursor: pointer;  border:1px solid transparent;  background: #0e83cd; }  /*Membuat efek ketika link / menu dihampiri(mouse berada dalam menu)*/ .nav-li a:hover{  border:1px solid #0e83cd;  background: white;  color: #0e83cd; }  /*Menyembunyikan sub menu(ul yang berada didalam li class = nav-li)*/ .nav-li ul{  display: none; }  /*saat nav-li diklik maka li akan mendapatkan class tap*/ /*jadi li.tap adalah li yang mendapatkan class dari fungsi nav-li klik*/ li.tap ul{  /*Menampilkan submenu*/  display: block;  /*Membuat posisi submenu berada dibawah menu*/  position: absolute;  z-index: 2;  left: 0;  /*design dari submenu*/  background: #0e83cd;  border-top: 1px solid white;  border-bottom: 1px solid white;  /*Mengatur Submenu*/  width: 100%;  padding: 10px 0; }  /*Membuat border / garis pembatas pada submenu*/ .nav-li ul li a{  border: 1px solid white; }   /*Yang ini gk terlalu penting soalnya ini cuma ikon dimenu utama*/  /*Membuat Icon Arah Panah Sebelum Dihampiri / Dihover*/ .nav-li .arrow:after{  content: '\203A';  margin-left: 20px;  float: right;  transform: rotate(90deg); }  /*Membuat Icon Arah Panah Setelah Diklik*/ li.tap .arrow:after{  content: '\2039'; }

4.Sekarang lihat hasilnya,kira-kira nanti jadinya seperti ini

Sebelum Menu Dklik

Setelah DiKlik

Keterangan- bagian header adalah Belajar Dropdown Menu beserta menu utama dan juga sub menu- bagian body adalah Selamat Datang blablabla- bagian footer adalah bagian paling bawah / designed by itu loh- klo waktu diterapkan gk bisa coba download scriptnya dulu aja

Oke Sekian itu aja klo ada kurangnya saya minta maaf dan juga bagi yang masih belum ngerti jalan syntax nya silakan bertanya / bagi yang ingin mendownload syntaxnya silahkan didownload dibawah

DOWNLOAD