Beranda
»
Artikel
»
Membuat Menu Dropdown Sederhana Dengan CSS

Membuat Menu Dropdown Sederhana Dengan CSS

Menu Dropdown merupakan menu turun naik otomatis yang berisi sub menu saat pengguna menempatkan mouse di atas menu tersebut. Pada saat menu dalam keadaan aktif, sub menu akan ditampilkan dan sebaliknya pada saat tidak aktif, sub menu akan menghilang dengan sendirinya. Menu dropdown dapat dibuat dengan mudah hanya dengan CSS tanpa peran serta dari JavaScript. Hal ini tentu saja akan membuat halaman website jauh lebih ringan saat dimuat karena tidak membebani halaman web tersebut dengan script dari JavaScript.

Menu dropdown dibuat jika di dalam menu terdapat sub menu yang merupakan perluasan dari menu utama. Menu utama tersebut memiliki beberapa kategori yang harus dipecah-pecah menjadi beberapa bagian dalam sub-sub menu. Pengelompokkan menu-menu tersebut akan mempermudah dalam mengelola konten halaman website berdasarkan kategori yang sudah ditetapkan.

Langkah-langkah Membuat Menu Dropdown

Untuk membuat menu dropdown, anda hanya perlu membuat halaman HTML baru. Pada tutorial kali ini saya hanya menggunakan CSS saja tanpa menggunakan JavaScript. Metode yang digunakan hanya memanfaatkan instrumen pseudoclass hover pada CSS. Pseudoclass hover saat aktif akan memaksa suatu elemen dalam bentuk ditampilkan (display:block;) akan ditampilkan, dan saat non-aktif akan membuat elemen tersebut disembunyikan kembali (display:none;).

Pada pembuatan menu dropdown kali ini menggunakan elemen HTML tag <ul>. Di dalam tag ini terdapat butir-butir list (<li>) yang merupakan menu utama. Fungsi dari menu utama ini adalah untuk menampilkan sub-sub menu jika memiliki sub menu. Jika menu ini berupa single menu tanpa menu anakkan, tidak akan menampilkan apa-apa. Menu yang tidak memiliki menu anakkan pada contoh adalah menu Home yang hanya berfungsi untuk menuju halaman utama, jadi tidak akan memiliki menu anakkan.

Berikut kode HTML untuk membuat menu dropdown :

HTML

<!DOCTYPE html>
<html>
<head>
   <title>Latihan Membuat Menu Dropdown Dengan CSS</title>
   <link rel="stylesheet" href="style.css">
</head>
<body>
<ul id="menu_dropdown">
   <li class="menu_utama">Home</li>
   <li class="menu_utama">Artikel
   <ul class="menu_sub">
     <li><a href="#">Politik</a></li>
     <li><a href="#">Budaya</a></li>
     <li><a href="#">Ekonomi</a></li>
     <li><a href="#">Serba-serbi</a></li>
     <li><a href="#">Hobby</a></li>
   </ul>
   </li>
   <li class="menu_utama">Artikel 2
   <ul class="menu_sub">
     <li><a href="#">Politik 2</a></li>
     <li><a href="#">Budaya 2</a></li>
     <li><a href="#">Ekonomi 2</a></li>
     <li><a href="#">Serba-serbi 2</a></li>
     <li><a href="#">Hobby 2</a></li> 
   </ul>
   </li>
   <li class="menu_utama">Artikel 3
   <ul class="menu_sub">
     <li><a href="#">Politik 3</a></li>
     <li><a href="#">Budaya 3</a></li>
     <li><a href="#">Ekonomi 3</a></li>
     <li><a href="#">Serba-serbi 3</a></li>
     <li><a href="#">Hobby 3</a></li>
   </ul>
   </li>
</ul>
<h1>Latihan Membuat Menu Dropdown Dengan CSS</h1>
</body>
</html>

Berikut kode CSS-nya:

CSS

.menu_utama {
   display: inline-block;
   vertical-align: top;
   width: 80px;
   text-align:center;
   background-color: #11698e;
   color: white;
   border: none;
   cursor: pointer;
   padding:10px 15px;
}
.menu_utama:hover{
   background-color: #19456b;
}
.menu_sub {
   display: none;
   margin-top: 10px;
   list-style-type: none;
   margin-left: -55px;
   margin-bottom: -20px;
   width: 220px;
}
.menu_sub a{
   display: block;
   width: 100%;
   color: white;
   padding: 20px;
   text-decoration: none;
   border-bottom:solid 1px #a3d2ca;
   background-color: navy;
}
.menu_sub a:hover{
   background-color: #a3d2ca;
}
#menu_dropdown .menu_utama:hover > .menu_sub {
   display:block;
}

Jika dijalankan, akan menghasilkan tampilan :

Saat pengguna melakukan hover (mouse di atas elemen menu), akan menghasilkan tampilan sebagai berikut :

Penjelasan :
Pada HTML-nya, Menu dropdown diciptakan dengan menggunakan elemen tag <ul> dengan id="menu_dropdown" (baris ke-8). Bagian dari tag <ul> berupa elemen tag <li> yang merupakan menu utama (baris ke-9). Dan di dalam tag ini masih terdapat elemen anak lain berupa daftar list (<ul>) dengan tag <li> yang di dalamnya yang berisi link anchor <a> untuk melakukan redirect ke halaman yang dituju (baris ke-9 sampai baris ke-36).

Pada CSS-nya, Menu utama menggunakan penataan tampilan inline-block display: inline-block;, agar menu disusun sejajar berderet ke kanan. Menu utama harus menggunakan vertial-align:top; agar saat elemen ini dihover, selalu terjaga posisinya tidak naik dan turun (baris ke-3). Pada menu_sub menggunakan display: none; yang artinya menu ini disembunyikan tampilannya secara default (baris ke-16). Untuk membuat efek dropdown atau muncul saat pengguna meletakkan mouse diatas elemen menu utama, diperoleh dengan menggunakan pseudoclass hover yang memaksa suatu elemen yang berada dibawahnya untuk muncul dan ditampilkan #menu_dropdown .menu_utama:hover > .menu_sub {display:block;}

03 Sept 2022 0 7.163

Kategori : html - css - support

facebook twitter whatapp linkedin pinterest

Halaman Terkait

	Cara Membuat Pagination Sederhana Dengan Database Mysql Pada PHP artikel
	Membuat Menu Navigasi Slide Dengan HTML dan Jquery artikel
	Membuat Menu Sliding Dengan CSS Murni artikel
	Membuat Menu Navigasi Horisontal dan Vertikal Pada HTML artikel

Tinggalkan Balasan

Formulir ini hanya bagi member yang sudah terdaftar. Silahkan disini.

Belum terdaftar? silahkan queue Daftar disini.

Mengirim Komentar

Setiap pengunjung situs ini dapat memposting komentar disini, namun tidak semua komentar dapat ditampilkan. Gunakan kalimat baku bahasa Indonesia yang mudah dimengerti. Dilarang memposting kalimat yang berisi ujaran kebencian, SARA, pornografi, perjudian dan spam. Komentar harus sesuai dengan topik. Untuk bahasan lainnya yang lebih mendalam dapat menggunakan sarana forum. Anda dapat mengirimkan suatu pertanyaan dan member lainnya akan menjawab pertanyaan Anda.

Peringatan!

Apakah ingin menghapus komentar ini?

	Membuat Database Dan Tabel Melalui CMD Pada Xampp Server 41.203
	Daftar Kode ASCII 40.812
	Membuat Menu Navigasi Horisontal dan Vertikal Pada HTML 37.270
	Mendownload File Dengan Menggunakan PHP 24.201
	Validasi Form Menggunakan Plugin Validation Jquery 20.940
	Menggunakan Barcode Scanner Pada Aplikasi Berbasis Web 14.060
	Membuat Barcode Generator Dengan PHP 12.496
	Cara Mudah Membuat QR Code Generator Dengan PHP 12.001
	Merubah Warna Latar Text Editor Notepad++ 11.106
	Perbedaan Antara fungsi rand() dan mt_rand() Pada PHP 10.587

Visitor Name
Email