Membuat Menu Navigation Bars CSS Dropdown
Widget
Hello ketemu lagi dengan saya Mboton Dev sebuah websitesaya akan membahas tentang membuat Navigation atau menu pada website yang sedang anda akan membuat navigation adalah hal yang sangat penting sekali broo. Itu sebabnya mengapa Anda semua ya broo.
Caranya silakan simak dengan teliti untuk membuat menu-menu navigation bagaimana jika Anda ingin memiliki menu CSS dropdown yang sangat sederhana dangan begitu mudah? Kabar baiknya, Anda tidak membutuhkan tambahan JavaScript atau apapun broo untuk membuatnya, anda semua cukup dengan mengunakan CSS saja sudah bisa broo. Dalam tutorial ini Anda akan mempelajari bagaimana cara membuat menu CSS dropdown navigation dengan mudahsilakan di simak atau di cermati dengan teliti kawan-kawanku semua bersama saya mboton dev.
Siapkan saja bahannya untuk membuat Navigation Yang Anda butuhkan
Akses ke control panel hosting yang sudah di beli anda
Pertama, Anda harus membuat file HTML baru atau halaman kosong terlebih dahulu iya broo. Dalam tutorial ini mbotondev akan membuat sebuah file baru yang bernama menu.html. Kita akan menggunakan File Manager untuk membuatnya pada menu navigation. Namun, hasil yang sama juga bisa Anda dapatkan dengan menggunakan sebuah aplikasi FTP client. Buat file menu.html di komputer maupun laptop yang anda sediakan Anda HARUS upload file ke akun hosting Anda menggunakan aplikasi FTP juga bisa broo.
Menu yang akan kita buat terdiri dari satu elemen-elemen atau induk bernama Main Menu dan 5 sub-elemen. Dengan mengganti URL di dalam atribut href, Anda bisa menghubugkan setiap sub-menu atau Child Menu ke halaman-halaman yang berbeda-beda pada website Anda semua broo. Anda mungkin akan melihat bahwa setiap elemen-elemen memiliki class yang berbeda-beda jenis broo – dropdown, main menu dropdown-child. Class dibutuhkan untuk menerapkan rule ke CSS yang berbeda silakan lihat ini broo code-code untuk membuat navigation pada web anda semua.
Seperti yang Anda lihat itu di atas ya broo, menu HTML yang masih polos dan berwarna putih belum di edit atau dioptimasi dengan tampilannya pun masih tidak menarik sekali broo. Tapi tenang aja broo tutorial langkah yang ketiga. Saya akan membuat atau tutorial cara editnya ini mebuat lebih asik dan berwarna untuk di lihat atau di pandang ya broo okee silakan simak di bawah ini.
Kita akan memberikan style warna sesuka anda semua hati anda broo untuk kode-kode HTML sebagai berikut ini dengan menggunakan rule CSS berikut ini silakan di simak dengan teliti bro:
Seperti yang bisa Anda semua bisa lihat, class .dropdown memiliki rule CSS display:none. Namun, begitu pengunjung mengarahkan kursor anda hover ke dropdown:hover ke induk menu-menu, rule CSS akan langsung berganti menjadi display:block. Broo Ini akan memberikan efek dropdown di menu kita yang kita buat silakan lihat di bawah ini broo gambarnya.
Inilah kalian klik untuk melihat Demo saya Broo Di Bawah ini
Berikut ini adalah menampilkan akhir pada web dari file menu style html sebagai demo
Jangan ragu untuk mencoba berbagai variasi sendiri ya broo. Anda bisa mengganti warna sesuka hati anda yang anda inginkan mulai di ukuran dan warna dll. Sesuaikan semuanya dengan kebutuhan Anda sendiri kawanku Mboton Dev. Terima Kasih semoga anda berhasil untuk mencoba ini broo.
 |
| Membuat Menu Navigation Bars CSS Dropdown |
Caranya silakan simak dengan teliti untuk membuat menu-menu navigation bagaimana jika Anda ingin memiliki menu CSS dropdown yang sangat sederhana dangan begitu mudah? Kabar baiknya, Anda tidak membutuhkan tambahan JavaScript atau apapun broo untuk membuatnya, anda semua cukup dengan mengunakan CSS saja sudah bisa broo. Dalam tutorial ini Anda akan mempelajari bagaimana cara membuat menu CSS dropdown navigation dengan mudahsilakan di simak atau di cermati dengan teliti kawan-kawanku semua bersama saya mboton dev.
Siapkan saja bahannya untuk membuat Navigation Yang Anda butuhkan
- Cara pertama – Membuat file HTML
- Cara kedua – Menambahkan kode-kode pada menu HTML
- Cara ketiga – Membuat CSS dan Efek Dropdown Berwarna
Kesimpulan website Anda
Sebelum memulai panduan ini semua, yang Anda butuhkan adalah untuk membuat website pada menu:Akses ke control panel hosting yang sudah di beli anda
Langkah pertama – Membuat file HTML
Pertama, Anda harus membuat file HTML baru atau halaman kosong terlebih dahulu iya broo. Dalam tutorial ini mbotondev akan membuat sebuah file baru yang bernama menu.html. Kita akan menggunakan File Manager untuk membuatnya pada menu navigation. Namun, hasil yang sama juga bisa Anda dapatkan dengan menggunakan sebuah aplikasi FTP client. Buat file menu.html di komputer maupun laptop yang anda sediakan Anda HARUS upload file ke akun hosting Anda menggunakan aplikasi FTP juga bisa broo.
Langkah kedua – Menambahkan kode-kode pada menu HTML
Menu yang akan kita buat terdiri dari satu elemen-elemen atau induk bernama Main Menu dan 5 sub-elemen. Dengan mengganti URL di dalam atribut href, Anda bisa menghubugkan setiap sub-menu atau Child Menu ke halaman-halaman yang berbeda-beda pada website Anda semua broo. Anda mungkin akan melihat bahwa setiap elemen-elemen memiliki class yang berbeda-beda jenis broo – dropdown, main menu dropdown-child. Class dibutuhkan untuk menerapkan rule ke CSS yang berbeda silakan lihat ini broo code-code untuk membuat navigation pada web anda semua.
Seperti yang Anda lihat itu di atas ya broo, menu HTML yang masih polos dan berwarna putih belum di edit atau dioptimasi dengan tampilannya pun masih tidak menarik sekali broo. Tapi tenang aja broo tutorial langkah yang ketiga. Saya akan membuat atau tutorial cara editnya ini mebuat lebih asik dan berwarna untuk di lihat atau di pandang ya broo okee silakan simak di bawah ini.
Langkah ketiga – Membuat CSS dan Efek Dropdown Berwarna
Kita akan memberikan style warna sesuka anda semua hati anda broo untuk kode-kode HTML sebagai berikut ini dengan menggunakan rule CSS berikut ini silakan di simak dengan teliti bro:
.mainmenubtn {
background-color: blue;
color: white;
border: none;
cursor: pointer;
padding:20px;
margin-top:20px;
}
.mainmenubtn:hover {
background-color: red;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-child {
display: none;
background-color: black;
min-width: 200px;
}
.dropdown-child a {
color: white;
padding: 20px;
text-decoration: none;
display: block;
}
.dropdown:hover .dropdown-child {
display: block;
}
Seperti yang bisa Anda semua bisa lihat, class .dropdown memiliki rule CSS display:none. Namun, begitu pengunjung mengarahkan kursor anda hover ke dropdown:hover ke induk menu-menu, rule CSS akan langsung berganti menjadi display:block. Broo Ini akan memberikan efek dropdown di menu kita yang kita buat silakan lihat di bawah ini broo gambarnya.
 |
| Tampilan Pada Menu |
Inilah kalian klik untuk melihat Demo saya Broo Di Bawah ini
Berikut ini adalah menampilkan akhir pada web dari file menu style html sebagai demo
Jangan ragu untuk mencoba berbagai variasi sendiri ya broo. Anda bisa mengganti warna sesuka hati anda yang anda inginkan mulai di ukuran dan warna dll. Sesuaikan semuanya dengan kebutuhan Anda sendiri kawanku Mboton Dev. Terima Kasih semoga anda berhasil untuk mencoba ini broo.
Semoga Bermanfaat Bagi Anda Semua Jangan Lupa Untuk Komentar Di Bawah. Terima Kasih Sudah Berkunjung Di Mboton Dev