Cara Buat Drop Down Menu CSS Mudah

9:42 PM Post a Comment

User Experience (Pengalaman pengguna) dan kecepatan loading situs adalah hal yang amat berarti. Itulah mengapa Kamu sebaiknya bukan membebani web site Kamu bersama elemen-elemen tambahan layaknya Javascript, atau gambar berukuran besar. Tetapi, bagaimana kecuali Kamu dambakan mencoba cara membawa dampak drop down menu CSS simple supaya web site jadi lebih cantik?

Untungnya, Kamu bukan kudu mengimbuhkan Javascript apa pun untuk membuatnya, memadai bersama dengan CSS saja. Didalam tutorial ini, Kamu akan mempelajari cara mengakibatkan menu dropdown CSS simple bersama dengan ringan. Mari mulai!

Yang Kamu butuhkan

Sebelum memulai pedoman ini, yang Kamu butuhkan adalah:

Akses ke control panel hosting Kamu

Cara MembuatDrop Down Menu CSS Simple

Untuk memicu menu drop down bersama dengan Css, Kamu semata-mata harus mengenakan Arsip Manager di control panel hosting Kamu. Berikut langkah-langkah cara memicu menu dropdown Css:

1. Buat arsip HTML kosong

Pertama, Kamu wajib mengakibatkan arsip HTML baru (Kosong) terlebih dahulu. Di sini kita akan mengakibatkan suatu arsip baru bernama menu.html.

Di cpanel, buka Arsip Manager berasal dari bagian Arsip.
Klik Go to Arsip Manager -≫ public_html.
Pilih New Arsip lalu buat arsip bernama menu.html.

Setelah membuat file menu.html, silahkan buat syntax menu..

2. Tambahkan kode menu HTML

Menu yang akan kita buat terdiri berasal dari 1 elemen orang tua (Menu primer) dan 5 submenu. Kamu mampu menghubugkan tiap-tiap submenu ke halaman lain di web site Kamu.

Buka arsip menu.html lalu tambahkan sintaksis berikut:

<div class="dropdown">
<button class="mainmenubtn">Main Menu</button>
<div class="dropdown-child">
<a href="http://wwww.yourdomain.com/page1.html">Sub Menu 1</a>
<a href="http://wwww.yourdomain.com/page2.html">Sub Menu 2</a>
<a href="http://wwww.yourdomain.com/page3.html">Sub Menu 3</a>
<a href="http://wwww.yourdomain.com/page4.html">Sub Menu 4</a>
<a href="http://wwww.yourdomain.com/page5.html">Sub Menu 5</a>
</div>
</div>

Kamu bisa saja mengetahui bahwa tiap-tiap elemen punya class yang berbeda: dropdown, mainmenubtn, dan dropdown-child. Class ini diperlukan untuk menerapkan rule CSS terhadap langkah pada akhirnya.
Menu HTML akan terlihat layaknya ini tanpa rule Css:

Jangan lupa mengganti URL menu di dalam atribut href bersama dengan URL halaman web Kamu, lalu ganti julukan menu-menu itu.

3. Terapkan CSS dan Tambahkan Dampak Dropdown

Layaknya yang Kamu saksikan, menu HTML bersama dengan tampilan yang terlalu biasa tentunya bukan terlihat menarik. Menjadi, sekarang kita akan memberi rona tombol menu dan memberi tambahan dampak dropdown. Ubah kode HTML bersama memberikan rule CSS berikut di atas kode sebelumnya:

.mainmenubtn {
background-color: skyblue;
color: white;
border: none;
cursor: pointer;
padding:20px;
margin-top:20px;
}
.mainmenubtn:hover {
background-color: blue;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-child {
display: none;
background-color: skyblue;
min-width: 200px;
}
.dropdown-child a {
color: blue;
padding: 20px;
text-decoration: none;
display: block;
}
.dropdown:hover .dropdown-child {
display: block;
}

Tampilan akhir file menu.html akan terlihat seperti berikut:

<html>
<head>
<style>
.mainmenubtn {
background-color: skyblue;
color: white;
border: none;
cursor: pointer;
padding:20px;
margin-top:20px;
}
.mainmenubtn:hover {
background-color: blue;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-child {
display: none;
background-color: skyblue;
min-width: 200px;
}
.dropdown-child a {
color: blue;
padding: 20px;
text-decoration: none;
display: block;
}
.dropdown:hover .dropdown-child {
display: block;
}
</style>
</head>
<body>
<div class="dropdown">
<button class="mainmenubtn">Main Menu</button>
<div class="dropdown-child">
<a href="http://wwww.yourdomain.com/page1.html">Sub Menu 1</a>
<a href="http://wwww.yourdomain.com/page2.html">Sub Menu 2</a>
<a href="http://wwww.yourdomain.com/page3.html">Sub Menu 3</a>
<a href="http://wwww.yourdomain.com/page4.html">Sub Menu 4</a>
<a href="http://wwww.yourdomain.com/page5.html">Sub Menu 5</a>
</div>
</div>
</body>
</html>

Pada contoh ini, style CSS disimpan dalam file HTML yang sama (stylesheet internal). Anda boleh membuat file CSS sendiri dan mengaitkannya ke dokumen HTML apa pun

Author “Yes I'm seeking for someone, to help me. So that some day I will be the someone to help some other one.”

Rebelsec