Membuat Menu Navigation Bars CSS Dropdown

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.

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.

HTML


  


Home
    Tutorial
    Widget
    CSS
    Mboton Dev
    About Me
  
Note: Silakan Ganti http://wwww.domainkalianbroo.com/page5 dengan punya anda sendiri broo URLs.

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:

CSS.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

• Demo Link

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.