Menu dropdown keren dengan jquery slidetoggle

,



Gambar 0.1 Dropdown Preview.

Kali ini saya mau post script bkinan saya. siapa tau ada yang mau gunain buat wap atau webnya. atau mungkin sekedar untuk referensi saja. silahkan di edit sesukanya.
script menggunakan jquery jadi kalo ga cdn external downlod jquerynya dulu dan save di pc sobat. oke cekibrot kodenya.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$('.vm-btn').click(function(){
$('.vm-menu').slideToggle(800);
});
$('.vm1').click(function(){
$('.vm-sub1').slideToggle(800);
});
$('.vm2').click(function(){
$('.vm-sub2').slideToggle(800);
});
$('.vm3').click(function(){
$('.vm-sub3').slideToggle(800);
});
});
</script>
<style>
*{margin:0;padding:0;}
body{
line-height:1;
color:#222;
background:#ccc
}
a{text-decoration:none;color:#3498DB}
ul{list-style:none}
header{
background:#22313F;
color:#bbb;
text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
padding:1rem 2rem;
}
h1{
font-weight:400;
font-size:18px;
letter-spacing:-1.5px
}
h2{
font-weight:400;
font-size:20px;
margin-bottom:1rem;
}
.copyright{
text-align:right;
margin-top:3em;
font-size:12px
}
.container{
padding:1rem;
margin:10px 6px;
background:#fff
}
hr{
margin:2em 0;
border-top:1px solid #ddd
}
.vm-btn{
position:absolute;
top:1rem;
right:2rem
}
.vm-menu {padding-top:1rem}
.vm-menu li {
padding:1rem 0;
}
.vm-menu > ul > li > ul {
margin-top:1rem;
}
.vm-menu, .vm-menu > ul > li > ul
{display:none}
</style>
</head>
<body>
<header>
<h1>VeriAsha</h1>
<nav>
<a class="vm-btn">[Menu]</a>
<div class="vm-menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li>
<a class='vm1' href='#'>Business</a>
<ul class="vm-sub1">
<li><a href='#'>Internet</a></li>
<li><a href='#'>Market</a></li>
<li><a href='#'>Stock</a></li>
</ul>
</li>
<li><a class='vm2' href='#'>Business</a>
<ul class="vm-sub2">
<li><a href='#'>Internet</a></li>
<li><a href='#'>Market</a></li>
<li><a href='#'>Stock</a></li>
</ul>
</li>
</ul>
</div>
</nav>
</header>
<div class="container">
<h2>Perhatian.</h2>
Untuk [Menu] bisa diganti dengan font awesome class "bars".
<hr/>
<h2>Bila jquery tidak berfungsi</h2> mungkin anda lagi offline. script di atas menggunakan cdn external.
<hr/>
<div class="copyright">
<i>
Script By: VeriAsha.<br>
http://veriasha.blogspot.com
</i></div>
</div>
</body>
</html>


Download Source

Kalo download saya sudah sediain jquery,nya. jadi tinggal preview saja. trimakasih sudah membaca.

Tidak ada komentar:

Posting Komentar

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