Membuat Simple Dropdown Menu Dengan Php

selamat sore teman blogger semuanya, semoga agan agan semua tetap dalam keadaan sehat. setuju kali ini saya tampil lagi di blog ini dengan membagikan sebuah tutorial sederhana, bagaimana caranya membuat dropdown sajian dengan menggunakan php.
gak usah panjang lebar, langsung saja gan :


buka php editor agan, jika saya menggunakan sublime untuk php editornya dan ketikkan instruksi berikut : 


<head>  <title>Demo Dropdown</title>  <script type="text/javascript" src="js/jquery.min.js"></script>  <script type="text/javascript" src="js/drop.js"></script>  <link rel="stylesheet" type="text/css" href="css/style.css"> </head> <body>  <div style="margin-50px;"> </div> <div class="dropdown"> <a class="account">    <span>My Account</span>   </a>   <div class="submenu" style="display:none;"> <ul class="root"> <li><a href="#">Dashboard</a></li> <li><a href="#">Profile</a></li> <li><a href="#">Settings</a></li> <li><a href="#">Umpan Balik</a></li> <li><a href="#signout">Signout</a></li> </ul> </div> </div> </body> </html>

kemudian setelah itu agan buat javascript instruksi untuk dropdownnya ibarat berikut (javascriptnya ada 2 file : jquery.min.js dan drop.js ) : 


$(document).ready(function() { $(".account").click(function() { var X=$(this).attr('id');  if(X==1) { $(".submenu").hide(); $(this).attr('id', '0');  } else {  $(".submenu").show(); $(this).attr('id', '1'); }   });  //Mouseup textarea false $(".submenu").mouseup(function() { return false }); $(".account").mouseup(function() { return false });   //Textarea without editing. $(document).mouseup(function() { $(".submenu").hide(); $(".account").attr('id', ''); });   });

silahkan agan download file jquery.min.js atau sanggup download disini.
setelah itu agan buat css nya, kodenya ibarat berikut ini : 


body { background-color:#e4e8ec; font-family:arial; }  div.dropdown { color: #555; margin: 3px -22px 0 0; width: 143px; position: relative; height: 17px; text-align:left; } div.submenu { background: #fff; position: absolute; top: -12px; left: -20px; z-index: 100; width: 135px; display: none; margin-left: 10px; padding: 40px 0 5px; border-radius: 6px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45); }  .dropdown  li a {         color: #555555;     display: block;     font-family: arial;     font-weight: bold;     padding: 6px 15px;   cursor: pointer; text-decoration:none; }  .dropdown li a:hover{     background:#155FB0;     color: #FFFFFF;     text-decoration: none;      } a.account { font-size: 11px; line-height: 16px; color: #555; position: absolute; z-index: 110; display: block; padding: 11px 0 0 20px; height: 28px; width: 121px; margin: -11px 0 0 -10px; text-decoration: none; background: url(icons/arrow.png) 116px 17px no-repeat; cursor:pointer; } .root { list-style:none; margin:0px; padding:0px; font-size: 11px; padding: 11px 0 0 0px; border-top:1px solid #dedede;     }

setuju simpulan dech gan, sekarang coba agan jalankan…
sekian dulu tutorial dari saya gan mudah-mudahan tutorial simple ini sanggup membantu agan untuk membuat dropdown. jika ada yang kurang terang sanggup langsung koment ya gan…
seee uuuuu ….
Sumber http://guz-kopyok.blogspot.com/


Postingan populer dari blog ini

Cara Mengatasi Xampp Phpmyadmin Error

Gambar
cara mengatasi xampp phpmyadmin error . Bagi kalian yang belum mengetahui sama sekali apa itu Program? Bagaimana sistem membuatnya? Sesekali banyak opsi untuk mengawali bahasa pemrograman walapun tingkat kerumitan bahasa pemrograman itu yang cukup tinggi tapi kerumitan itu akan menjadi betul-betul simpel sekiranya kita teliti dan juga mengerti. Banyak orang yang belum tau dasar dari bahasa pemrogaman menyampaikan jika bahasa pemgoraman susah dipahami. Cara mengatasi error localhost xampp blank
Baca selengkapnya

Mengatasi Port Yang Bentrok Di Windows

Gambar
halo sahabat blogger semuanya, selamat siang …balik lagi bersama ane guzko di coretan coretan kecil ini yang mungkin sedikit bermanfaat bagi agan-agan semuanya. apakah sahabat blogger pernah mengalami yang namanya port bentrok ? bentrok disini bukan artinya tawuran ya gan, hehehe…, cuma ibaratnya gini : misalkan ada satu pintu dan 2 orang yang ingin masuk ke pintu itu, tapi sayangnya pintu itu hanyalah untuk satu orang saja. Seperti itu ibaratnya gan.., sama halnya dengan di windows. misalkan juga terjadi error antara port printer dan scanner. Atau mungkin misalkan anda sering berurusan dengan aplikasi server lokal sejenis xampp,wampp dll dan aplikasi itu bentrok dengan aplikasi lainnya…, misalnya seolah-olah gambar dibawah ini gan : memang sebenarnya port 80 ini yakni port yang cukup penting di windows, alasannya yaitu merupakan pintu keluar masuk data antara komputer agan dengan komputer lain. maka dari itu port 80 ini banyak menjadi incaran aplikasi yang berfungsi sebagai sharing
Baca selengkapnya

Membuat Aplikasi Barcode Dengan Java Netbeans

Gambar
membuat aplikasi barcode dengan java netbeans . Bagi kalian yang belum mengetahui sama sekali apa itu Program? Bagaimana cara membuatnya? Kadang-kadang banyak alternatif untuk memulai bahasa pemrograman walapun tingkat kerumitan bahasa pemrograman itu yang cukup tinggi tetapi kerumitan itu akan menjadi betul-betul simpel sekiranya kita teliti dan juga mengerti. Banyak orang yang belum tau dasar dari bahasa pemrogaman menyampaikan sekiranya bahasa pemgoraman susah dipahami. Barcode Scanner With Java Netbeans
Baca selengkapnya