Halo teman teman webmaster dumet school, biasanya kita membuat dropdown menu dengan css tanpa bantuan javascript atau jQuery, nah kali in i saya akan mencontoh kan Bgaimana Membuat Dropdown Menu dengan JQuery, yuk kita praktekan teman teman.
siapkan index.html dan strukturnya speerti di bawah ini.
<!DOCTYPE html> <html> <head> <title> Dropdown Menu 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"> <menu> <ul> <li class="home">Home</li> <li>About</li> <li>Contact</li> </ul> </menu> <ul class="satu"> <li>HTML</li> <li>CSS</li> <li>Javascript</li> </ul> </div> </div> </div> </body> </html>
setelah itu kita buat css nya seperti berikut supaya terlahita rapi dan bagus.
*{padding: 0; margin: 0;}
menu ul{
list-style: none;
width: 220px;
background: #d81159;
margin: auto;
}
menu li{
/*border-right:1px solid #fff;*/
cursor: pointer;
padding: 10px;
color: #fff;
width: 70px;
text-align: center;
display: inline-block;
}
menu li:nth-child(3){
border: none;
}
menu 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>
selanjutnya kita bisa buka hasilnya di webrowser nya.
sebelum di klik, coba kalian klik bagian home dan akan muncul dropdown menu nya dengan effect slideToggle yang menarik.
sekian tutorial Membuat Dropdown Menu dengan JQuery, semoga bermanfaat yah teman teman.
The post Membuat Dropdown Menu dengan JQuery appeared first on Kursus Website Terbaik.