cara membuat menu dropdown sendiri

, ,

Gambar 0.1 Contoh Dropdown menu.
Membuat sendiri menu akan lebih super hasilnya
walaupun gak bagus hahaha, tapi kita puas sudah bisa membuat hasil karya, saya dsisini akan mengajarkan cara
membuat menu dropdown sendiri engan sangat mudah, pertama tama siapin pc atau hape bisa juga.
kalo di pc buka window explorer kalo dihape buka es file browser, kenapa es karena file browser bawaan hape gak
bisa buat file baru, oke lanjut. buat file dengan extensi html contoh: dropdown.htm kalo sudah kita
kasih script.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="application/vnd.wap.xhtml+xml; charset=utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Menu dropdownku</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('.btn-menu').click(function(){
$('.dropdown').slideToggle(800);
});
});
</script>
<style>
*{margin:0;padding:0;}
.dropdown{display:none;list-style:none;}
.btn-menu{padding:10px 15px;border:1px solid #ddd;}
.dropdown li{padding:10px 20px;border-bottom:1px solid #ddd;}
</style>
</head>
<body>
<div class="menu">
<span clas="btn-menu">Klik</span>
<ul class="dropdown">
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
<li>Menu 5</li>
</ul>
</div>

Sangat mudah bukan, dikasih style css yang lebih keren lagi bisa, maaf kalo style css nya agak kurang, di kasih
warna yang lebih frees akan lebih inah, disi saya hanya mengajarkan dropdown yah jadi untuk css saya kasih simple
saja, biar jquery,nya bisa masuk, dan mudah2an agan2 mudeng dengaan script itu. script menggunakan jquery jadi
harus cdn external yah. kaya gini:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
kalo gak cdn gak bisa jalan scriptnya. sampai disi dulu yah. lain kali saya ajarkan yang lebih sulit.

Tidak ada komentar:

Posting Komentar

Maaf, fitur koment hanya untuk pengguna akun goggle saja.
Dikarenakan untuk meminimalisir komentar spam.