selamat sore sobat blogger semuanya, semoga agan agan semua tetap dalam keadaan sehat. oke kali ini saya tampil lagi di blog ini dengan membagikan sebuah tutorial sederhana, bagaimana caranya membuat dropdown menu dengan menggunakan php.
gak usah panjang lebar, langsung saja gan :
buka php editor agan, kalau saya menggunakan sublime untuk php editornya dan ketikkan kode berikut :
kemudian setelah itu agan buat javascript kode untuk dropdownnya seperti berikut (javascriptnya ada 2 file : jquery.min.js dan drop.js ) :
silahkan agan download file jquery.min.js atau bisa download disini.
setelah itu agan buat css nya, kodenya seperti berikut ini :
oke selesai dech gan, sekarang coba agan jalankan...
sekian dulu tutorial dari saya gan mudah-mudahan tutorial simple ini bisa membantu agan untuk membuat dropdown. jika ada yang kurang jelas bisa langsung koment ya gan...
seee uuuuu ....
gak usah panjang lebar, langsung saja gan :
buka php editor agan, kalau saya menggunakan sublime untuk php editornya dan ketikkan kode 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 kode untuk dropdownnya seperti 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 bisa download disini.
setelah itu agan buat css nya, kodenya seperti 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;
}
oke selesai dech gan, sekarang coba agan jalankan...
sekian dulu tutorial dari saya gan mudah-mudahan tutorial simple ini bisa membantu agan untuk membuat dropdown. jika ada yang kurang jelas bisa langsung koment ya gan...
seee uuuuu ....