Membuat Dropdown Menu dengan JQuery
Halo teman teman webmaster Source Code Aplikasi, biasanya kita merancang dropdown fitur dengan css tanpa bantuan javascript atau jQuery, nah kali in i saya akan mencontoh kan Bgaimana Merancang Dropdown Fitur dengan JQuery, yuk kita praktekan teman teman.
siapkan index.html dan strukturnya speerti di bawah ini.
<!DOCTYPE html>
<html>
<head>
<title> Dropdown Fitur Jquery</title>
<meta charset=utf-8>
<meta http-equiv=X-UA-Compatible content=IE=edge,chrome=1>
<meta name=description content=Demo project>
<meta name=viewport content=width=device-width, initial-scale=1>
<link rel=stylesheet href=https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css integrity=sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy crossorigin=anonymous>
</head>
<body>
<div class=container mt-2>
<div class=row>
<div class=col>
<fitur>
<ul>
<li class=home>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</fitur>
<ul class=satu>
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
</ul>
</div>
</div>
</div>
</body>
</html>
setelah itu kita bikin css nya seperti berikut supaya terlahita rapi dan bagus.
*{padding: 0; margin: 0;}
fitur ul{
list-style: none;
width: 220px;
background: #d81159;
margin: auto;
}
fitur li{
/*border-right:1px solid #fff;*/
cursor: pointer;
padding: 10px;
color: #fff;
width: 70px;
text-align: center;
display: inline-block;
}
fitur li:nth-child(3){
border: none;
}
fitur li:hover{
background: #95a5a6
}
.satu{
margin-top: 10px;
width: 221px;
background: #d81159;
list-style: none;
color: #fff;
position: fixed;
left: 282px;
}
.satu li{
padding: 10px;
display: block;
}
.satu li:hover{
background: #95a5a6;
cursor: pointer;
}setelah itu kita siap kan file jquery nya, ketikan kode berikut
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js”></script>
<script type=”text/javascript”>
$(document).ready(function(){
$(‘.satu’).hide();
$(‘.home’).on(‘click’,function(){
$(‘.satu’).slideToggle(‘fast’);
})
});
</script>
berikutnya kita dapat buka hasilnya di webrowser nya.
sebelum di klik, coba kalian klik bagian home dan akan muncul dropdown fitur nya dengan effect slideToggle yang menarik.
demikian panduan Merancang Dropdown Fitur dengan JQuery, semoga bermanfaat yah teman teman.
Sumber https://kursuswebsite.org
