Bagaimana Cara Membuat Menu Dropdown Sederhana

Hallo kawan, dropdown menu memang sering digunakan oleh blogger untuk diletakkan di navigasi blog. Dropdown ini berguna agar menu pada pilihan dinavigasi mempunyai “Anak” sehingga menu dinavigasi bisa lebih banyak dan juga hemat tempat. Lalu bagaimana cara membuat menu dropdown di template blogger.

Berikut ini kami menyediakn referensi membuat menu dropdown yang bisa ditempatkan di template kawan, berikut point-point yang ada pada artikel ini.

Cara Membuat Menu Dropdown Navigasi

Adapun beberapa point-point cara membuat menu dropdown navigasi ini sebagai berikut.

  • Membuat file HTML
  • Konsep CSS dropdown menu
  • Penerapan kode CSS ke HTML
  • Melembutkan dropdown menu

Mari kita bahas masing-masing point-point di atas satu persatu agar lebih di mengerti.

Membuat file HTML

Hal yang pertama kita harus membuat sebuah file dengan nama file index.html atau anda bisa memakai website yang akan buatkan navigasi dropdown-nya. Silahkan copy kode berikut dan paste ke file index.html.

Coba simpan dan jalankan script tersebut.

Konsep CSS dropdown menu

Setelah anda jalankan dari script di atas maka akan ada bullets di sisi kiri dari tulisan, selanjutnya langkah yang harus kita lakukan adalah menghilangkan bullets dan menjadikannya berjejer horizontal.
Buatlah sebuah file css dengan nama styles.css dan kita buat konsep mengubah code <ul> dan <li> berikut beberapa penjelasan dari script css.

Mengubah link pada navigasi

Kita ubah link pada navigasi agar tidak ada underline atau garis bawah pada link di navigasi.

hilangkan underline
nav a:hover {
text-decoration: none;
}

 

Hapus Bullets

hapus bullets
nav ul {
list-style: none;
}

 

Buat navigasi horizontal

Buat navigasi horizontal
nav ul li {
float: left;
padding: 5px 20px;
}

 

Background saat cursor menyentuh menu

Background saat cursor menyentuh menu
nav ul li:hover {
background-color: #2980b9;
}

 

Hilangkan menu anak bullets

Hilangkan menu anak bullets
nav ul li ul {
display: none;
list-style: none;
margin-left: -20px;
}

 

Buat menu anak bullets vertikal

Buat menu anak bullets vertikal
nav ul li ul li {
float: none;
padding: 5px 20px;
margin-left: -40px;
}

 

Ubah background anak bullets saat cursor menyentuh

Ubah background anak bullets saat cursor menyentuh
nav ul li ul li:hover {
background-color: #2980b9;
}

 

Tampilkan anak bullets saat cursor menyentuh menu utama

Tampilkan anak bullets saat cursor menyentuh menu utama
nav ul li:hover > ul {
display: block;
position: absolute;
background: #ddd;
}

 

Ubah warna link saat cursor menyentuh

Ubah warna link saat cursor menyentuh
nav ul li:hover > a {
color: #fff;
}

 

Kode lengkap

Berikut kode lengkap dari penjelasan css diatas.

Penerapan kode CSS ke HTML

Untuk penerapan kode css ke html maksudnya disini adalah kita memanggil file styles.css untuk bisa mengisi tampilan di index.html. Berikut kodenya dan letakkan di atas kode </head> jika sudah ada anda tidak perlu meletakkannya lagi.

<link rel=”stylesheet” type=”text/css” href=”styles.css”/>

 

Melembutkan dropdown menu

Jika anda sudah berhasil membuat dropdown menu navigasi maka anda tentu akan melihat hovernya (saat cursor menyentuh) agak sedikit kaku tidak ada kelembutan dari css tersebut. Sekarang kita coba untuk mengubah css hovernya menjadi lebih lembut. berikut scriptnya dan letakan di styles.css pada nav ul li:hover dan nav ul li ul li:hover.

  -webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
-ms-transition: all 0.8s ease-out;
-o-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;

Jika anda kesulitan dalam penempatannya anda bisa menggantinya dengan script berikut.

nav ul li:hover {
background-color: #2980b9;
-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
-ms-transition: all 0.8s ease-out;
-o-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
}

nav ul li ul li:hover {
background-color: #2980b9;
-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
-ms-transition: all 0.8s ease-out;
-o-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
}

Dan lihatlah ada sedikit ke-lembutan pada menu navigasi dropdown-nya. Untuk script lengkapnya anda bisa lihat di bawah ini.

Kode lengkap index.html

Kode lengkap styles.css

Semoga artikel toturial CSS tentang Tutorial CSS – Membuat Dropdown Menu Navigasi dapat bermanfaat bagi anda yang sedang belajar tutorial web dan dapat mengembangkan lagi website / blog anda. Jika terdapat kekurangan saya minta maaf dan jika anda ada sedikit pertanyaan anda bisa menanyakannya di kolom komentar, anda juga dapat membagikan artikel ini keteman-teman anda dengan cara meng-klik button pada menu bagikan dibawah. Salam dan Terima kasih 🙂

Recent Tags:

Bagaimana Cara Membuat Menu Dropdown Sederhana | Andi Mariadi | 4.5

Leave a Reply