Heyyy... I'm back, kali ini author akan membahas tentang bagaimana cara membuat link navigasi menu dropdown, melanjutkan postingan Membuat link navigasi HTML sederhana. Tentunya jika sebuah website menerapkan menu dropdown akan membuat tampilan pada navigasi bar akan terlihat sederhana. Lalu seperti apa sih cara kerja menu dropdown?? biasanya menu dropdown akan muncul ketika kita klik atau menyorot menu utama pada link navbar. Oke tidak perlu panjang lebar ya langsung saja here we go...
1. Design
Design adalah hal utama yang harus dilakukan agar nanti kita tidak bingung saat membuatnya dan tentunya akan memudahkan kita untuk menentukan alur dalam membuat code script nya. Disini author akan menggunakan design dari post sebelumnya dengan tambahan dropdown.
2. Membuat Kode Script HTML
Berikut ya code nya, kalau bisa jangan pernah untuk copy paste ya, rasakan gimana ngetik code nya agar terbiasa untuk mrnghindari typo dan tau gimana alur dalam sebuah code. Jadi saat kita ketik code tersebut otak kita akan membayangkan dan memvisualisasikan code tersebut dalam pikiran kita.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<nav class="navbar">
<div class="navbar-left">
<div class="logo"></div>
</div>
<div class="navbar-right">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Post</a></li>
<li><a>Menu ∇</a>
<ul class="dropdown-list">
<li><a class="dropdown" href="#">Cara Memasak</a></li>
<li><a class="dropdown" href="#">Cara Memanggang</a></li>
<li><a class="dropdown" href="#">Cara Mencuci</a></li>
<li><a class="dropdown" href="#">Cara Mencintai</a></li>
</ul>
<li><a>Contact Us ∇</a>
<ul class="dropdown-list">
<li><a class="dropdown" href="#">Facebook</a></li>
<li><a class="dropdown" href="#">Instagram</a></li>
<li><a class="dropdown" href="#">Whatsapp</a></li>
<li><a class="dropdown" href="#">Twitter</a></li>
</ul>
</ul>
</body>
</html>
3. Membuat Kode Script CSS
Dalam hal ini kita hanya akan menggunakan CSS tanpa Java Script, wahh.. justru lebih baik ya karna kalau menggunakan javascript terlalu banyak akan membuat loading sebuah website menjadi berat dan cenderung lebih lambat. Berikut adalah contoh script yang sudah author siapkan...
<style type="text/css">
.logo{
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5Cef-WJE1hWkFk4MV0qDNI38QQInbxEdbzDaL6yWRXAAozLlIgeUYC0Ie-NjKKGNyNogkTcrSaC__E1MEUR1ak9csbX80xzHGJNz-HNpAzUv8_SOn38vx_7gMlNgoo9gD60YelaQzgW9QhNkf-WWRDMJcED-oTTJ1z76VlANjRSIaECwm_KC7C3BvFg/s2800/pexels-pixabay-45901.png);
width: 40px;
margin: 4 px 14px;
height: 40px;
background-size: 40px 40px;
border: solid 2px #444;
background-color: #444;
}
.navbar-left{
float:left;
padding-left: 15px;
}
.navbar-right{
float: right;
width: 500px;
padding-right: -70px;
}
.navbar{
width: auto;
height: 50px;
background: #444;
}
.navbar ul{
float: left;
margin: 0;
padding: 0;
}
.navbar li{
float: left;
list-style: none;
margin: 0;
padding: 0;
}
.navbar li a, .navbar li a:link{
float: left;
padding: 17px 12px;
color: #fff;
text-decoration: none;
position: relative;
font-family: sans-serif;
font-size: 14px;
}
.navbar li a:hover{
background: #ddd;
color: #444;
}
.navbar li li a, .navbar li li a:link{
text-decoration: none;
font-size: 16px;
background: #444;
color: #fff;
width: 108px;
padding: 0px 0px 0 12px;
font-size: 12px;
line-height: 35px;
}
.navbar li li a:hover{
background: #ddd;
color: #444;
}
.navbar li ul{
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 120px;
margin-top: 50px;
border: 1px solid #666;
}
.navbar li:hover ul,
.navbar li li:hover ul,
.navbar li li li:hover ul{left:auto;}
.navbar li:hover{position: auto;}
li a#dropdown{
width: 96%;
height: 50%;
background-color: #9bc7d3;
padding-left: 5px;
}
</Style>
Dari kode-kode diatas akan menghasilkan tampilan navigasi menu dropdown sepertigambar di bawah ini..
Nah seperti itulah tutorial dari saya, jika ada kekurangan dalam penyampaian saya mohon dimaafkan 😉 sampai jumpa lagi ya di next artikel. see you💋
Penjelasannya mudah dipahami, thanks kak👍🏼
BalasHapus