Hallo sahabat pada tutorial ini saya akan membahas tentang Cara Membuat Custom Menu Toggle Dropdown . Sebelum melanjutkan sahabat tentu pernah melihat tampilan menu dropdown sebuah website dari yang kita click, hover atau yang lainnya. Pada kasus ini kita akan belajar menu toggle dimana ada icon yang didalamnya terdapat beberapa menu. Jadi saat di click icon tersebut akan menampilkan menu secara dropdown.
Bagaimana Cara Membuat Custom Menu Toggle Dropdown yuk simak langkah-langkahnya, baiklah dalam pembuatan menu toggle saya akan menggunakan script dari jQuery seperti berikut ini:
Langkah Pertama buka text editor masing-amasing kemudian buat file baru HTML yang berisi code dibawah ini:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Toggle DropDown Menu</title>
<link rel="stylesheet" href="style.css">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="icon_btn">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
<div class="menudrop">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">News</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
pada code diatas saya menyisipkan library jQuery kemudian pada tag HTML.
- class=”icon_btn” digunakan sebagai icon menu toggle.
- class=”menudrop” berisi menu yang akan ditampilkan.
Langkah Kedua yaitu memberikan style CSS agar semakin menarik tampilannya atau efek dari icon toggle yang dibuat silahkan ketikkan seperti dibawah ini:
*{
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
body{
background: #2f2727;
}
.container{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.container .row{
width: 200px;
}
.container .icon_btn{
width: 50px;
height: 50px;
margin: 0 auto 16px;
border-radius: 50%;
border:3px solid #ff17a4;
position: relative;
cursor: pointer;
}
.container .icon_btn > div{
position: absolute;
top: 45%;
left: 25%;
width: 50%;
height: 3px;
background: #00fff3;
border-radius: 50px;
transition: all 0.3s ease;
}
.container .icon_btn .line1{
top: 25%;
}
.container .icon_btn .line3{
top: 65%;
}
.container .row .menudrop{
width: 180px;
height: auto;
margin: 0 auto;
background: #eddee7;
position: relative;
opacity: 0;
top: -10px;
transition: all 0.5s linear;
}
.container .row .menudrop ul li{
text-align: center;
text-transform: uppercase;
font-weight: bold;
transition: all 0.2s linear;
}
.container .row .menudrop ul li a{
padding: 10px;
font-size: 13px;
color: #720606;
display: block;
transition: all 0.2s linear;
}
.container .row .menudrop ul li:hover{
background:#fffd51;
}
.container .row .menudrop ul li:hover a{
color: #720606;
}
.container .row .menudrop:before{
content: "";
position: absolute;
top: -19px;
left: 50%;
transform: translateX(-50%);
border-top: 10px solid transparent;
border-bottom: 10px solid #eddee7;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
}
.container .icon_btn.active{
trasform: rotate(90deg);
}
.container .icon_btn.active .line1{
top: 45%;
left: 25%;
transform: rotate(45deg);
}
.container .icon_btn.active .line2{
opacity: 0;
}
.container .icon_btn.active .line3{
top: 45%;
left: 25%;
transform: rotate(-45deg);
}
.container .row .menudrop.active{
opacity: 1;
top: 0px;
}
Baiklah langkah selanjutnya yaitu tambahkan script untuk fungsi klik agar saat icon diklik menampilkan menu serta menyembunyikan menu silahkan ikuti script berikut:
<script1>
$(document).ready(function(){
$(".icon_btn").click(function(){
$(this).toggleClass("active");
$(".menudrop").toggleClass("active");
});
});
</script1>
Jika sudah selanjutnya simpan kemudian buka pada browser masing-masing , maka hasilny akan terlihat seperti dibawah ini:
Demikian pembahasan artikel ini tentang Cara Membuat Custom Menu Toggle Dropdown, Semoga bermanfaat.
terima kasih
The post Cara Membuat Custom Menu Toggle Dropdown appeared first on Kursus Website Terbaik.