Sederhana.co.id Semua Serba Sederhana
Halo Sobat Sederhana, kali ini kita akan membahas cara membuat sub menu sederhana untuk website atau blog kamu agar lebih terorganisir dan mudah diakses.
Pengertian Sub Menu
Sebelum memulai pembuatan sub menu, ada baiknya kita memahami terlebih dahulu apa itu sub menu. Sub menu adalah bagian kecil dari menu utama yang terletak di bawah menu utama dan berisi kategori atau halaman yang lebih spesifik.
Misalnya, jika website kamu memiliki menu utama “Produk”, maka sub menu yang ada di bawahnya mungkin berisi kategori-kategori seperti “Elektronik”, “Pakaian”, atau “Aksesoris”.
Langkah-Langkah Membuat Sub Menu Sederhana
1. Siapkan HTML dan CSS
Sebelum memulai pembuatan sub menu, kamu harus menyiapkan HTML dan CSS terlebih dahulu. Pastikan kamu sudah memiliki menu utama yang telah dibuat dengan HTML dan diatur tampilannya dengan CSS.
Untuk membuat sub menu, kita akan menggunakan beberapa elemen HTML seperti <ul>, <li>, dan <a>. Kemudian, kita akan mengatur tampilannya dengan CSS agar terlihat lebih menarik dan mudah dibaca.
2. Buat Sub Menu dengan <ul> dan <li>
Sekarang, kita akan mulai membuat sub menu dengan menambahkan elemen <ul> dan <li>. Pertama-tama, tambahkan kode HTML di bawah ini setelah menu utama:
HTML |
CSS |
|---|---|
.sub-menu {display: none;}.menu-item:hover .sub-menu {display: block;}
|
Perhatikan bahwa kita memberi kelas “sub-menu” pada <ul> dan mengatur tampilannya dengan CSS untuk sementara tidak ditampilkan. Kemudian, kita menggunakan pseudo-class “:hover” pada menu utama agar sub menu muncul ketika mouse diarahkan ke menu utama.
3. Tambahkan <a> pada Sub Menu
Selanjutnya, tambahkan elemen <a> pada setiap <li> di dalam <ul> sub menu. Ganti teks “Kategori 1”, “Kategori 2”, dan “Kategori 3” dengan kategori-kategori yang sesuai dengan website kamu.
4. Atur Tampilan Sub Menu dengan CSS
Terakhir, atur tampilan sub menu dengan CSS agar terlihat lebih menarik dan mudah dibaca. Berikut adalah contoh CSS yang dapat kamu gunakan:
HTML |
CSS |
|---|---|
.sub-menu {display: none;position: absolute;top: 100%;left: 0;width: 200px;padding: 0;margin: 0;background-color: #fff;box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);}.sub-menu li {display: block;border-bottom: 1px solid #ccc;}.sub-menu li:last-child {border-bottom: none;}.sub-menu li a {display: block;padding: 10px;color: #333;text-decoration: none;transition: background-color 0.3s ease;}.sub-menu li a:hover {background-color: #f5f5f5;}
|
.sub-menu {display: none;position: absolute;top: 100%;left: 0;width: 200px;padding: 0;margin: 0;background-color: #fff;box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);}.sub-menu li {display: block;border-bottom: 1px solid #ccc;}.sub-menu li:last-child {border-bottom: none;}.sub-menu li a {display: block;padding: 10px;color: #333;text-decoration: none;transition: background-color 0.3s ease;}.sub-menu li a:hover {background-color: #f5f5f5;}
|
Perhatikan bahwa kita memberikan beberapa properti CSS seperti “position”, “left”, dan “top” agar sub menu muncul di bawah menu utama. Kemudian, kita memberikan warna dan efek transisi pada elemen-elemen sub menu agar terlihat lebih menarik.
FAQ
1. Apa gunanya sub menu?
Sub menu digunakan untuk mengorganisir halaman-halaman atau kategori-kategori di website agar lebih mudah diakses dan ditemukan oleh pengunjung.
2. Bagaimana cara mengatur tampilan sub menu?
Kamu dapat mengatur tampilan sub menu dengan menggunakan CSS. Pastikan kamu telah menyiapkan elemen HTML seperti <ul>, <li>, dan <a> untuk sub menu.
3. Apa saja properti CSS yang dapat digunakan untuk mengatur tampilan sub menu?
Beberapa properti CSS yang dapat kamu gunakan untuk mengatur tampilan sub menu antara lain “position”, “display”, “background-color”, “padding”, dan “border”.
Penutup
Sekarang kamu dapat membuat sub menu sederhana untuk website atau blog kamu dengan mudah. Jangan lupa untuk mengatur tampilannya agar terlihat lebih menarik dan mudah dibaca. Semoga bermanfaat dan sampai jumpa di artikel menarik lainnya!