Advertisement
  1. Code
  2. Web Development

Cara Membangun Menu Mega Drop-Down CSS3 Keren

by
Read Time:21 minsLanguages:
This post is part of a series called CSS3 Mastery.
Build Awesome Practical CSS3 Buttons

Indonesian (Bahasa Indonesia) translation by ⚡ Rova Rindrata (you can also view the original English article)

Sering digunakan pada e-commerce atau situs web berskala besar, menu mega menjadi lebih dan lebih populer, karena mereka menawarkan solusi efektif untuk menampilkan banyak konten sekaligus menjaga tata letak yang bersih. Dalam tutorial ini, kita akan belajar bagaimana membangun menu mega hanya-CSS yang lintas-browser yang mengagumkan, menggunakan fitur CSS3 yang bagus.

Langkah 1: Membangun Bar Navigasi

Mari kita mulai dengan menu dasar, dibangun dengan unordered list dan beberapa gaya CSS dasar.

Membuat Kontainer Menu

Kita sekarang akan menerapkan beberapa gaya CSS dasar. Untuk kontainer menu, kita mendefinisikan lebar tetap yang kita tengahkan dengan mengatur margin kiri dan kanan menjadi "auto".

Sekarang, mari kita lihat bagaimana kita bisa memperbaikinya dengan beberapa fitur CSS3. Kita perlu menggunakan sintaks yang berbeda untuk browser berbasis Webkit (seperti Safari) dan untuk browser berbasis Mozilla (seperti Firefox).

Untuk sudut membulat, sintaksnya adalah :

Untuk latar belakang, kita akan menggunakan gradien dan warna mundur untuk browser lawas. Untuk menjaga konsistensi saat memilih warna, ada alat mengagumkan yang disebut Facade yang membantu Anda menemukan warna yang lebih terang dan lebih gelap dari warna dasar.

Baris pertama menerapkan warna latar belakang sederhana (untuk browser lawas); baris kedua dan ketiga membuat gradien dari atas ke bawah menggunakan dua warna: #0272a7 dan #013953.

Kita sekarang dapat menambahkan border yang lebih gelap dan memoles desain dengan border inset "tiruan" yang dibuat dengan fitur "box-shadow". Sintaksnya sama untuk semua browser yang kompatibel: nilai pertama adalah offset horizontal, yang kedua adalah offset vertikal, yang ketiga adalah radius blur (nilai kecil membuatnya lebih tajam; akan menjadi 1 pixel dalam contoh kita). Kita mengatur semua offset menjadi 0 sehingga nilai blur akan menciptakan border terang yang seragam:

Berikut kode CSS akhir untuk kontainer #menu :

Penataan Item Menu

Kita akan mulai dengan semua item menu sejajar ke kiri dan memberi jarak dengan margin-right (padding akan diperlukan untuk status hover):

Untuk status hover dan drop down, saya telah memilih skema warna abu-abu untuk latar belakang.

Warna fallback akan menjadi abu-abu terang (#F4F4F4) dan gradien akan diterapkan dari atas (#F4F4F4) ke bawah (#EEEEEE). Sudut membulat akan diterapkan hanya di sudut atas karena kita akan memiliki drop down menempel tepat di bawah item menu.

Padding kiri dan kanan sedikit lebih kecil di sini karena kita memiliki border 1 piksel yang muncul pada hover. Jika kita terus dengan padding yang sama, item menu akan didorong dua piksel di sebelah kanan karena border kiri dan kanan ditambahkan pada hover mouse. Untuk menghindarinya, kita akan menghapus 1 piksel dari padding di kedua sisi, jadi kita memiliki 9 piksel dan bukan 10.

Kemudian, kita menambahkan sudut membulat ke atas sehingga drop down akan tetap sempurna di bawah item menu induk:

Berikut adalah CSS terakhir untuk item menu pada hover:

Untuk tautan, kita akan menerapkan bayangan teks yang bagus dengan menggunakan sintaks sederhana: nilai pertama dan kedua adalah offset horisontal dan vertikal untuk bayangan (1 pixel pada contoh kita), yang ketiga adalah blur (1 pixel juga) dan maka kita memiliki warna (hitam):

Berikut adalah CSS terakhir untuk tautannya:

Pada hover mouse, karena latar belakangnya berwarna abu-abu, kita akan menggunakan warna yang lebih gelap (#161616) untuk tautan dan warna putih untuk bayangan teks :

Akhirnya, kita membutuhkan sebuah cara untuk menunjukkan apakah ada drop down atau tidak dengan menggunakan gambar panah sederhana sebagai latar belakang, ia akan diposisikan di sebelah kanan dengan menggunakan padding dan margin atas akan sesuai dengannya. Pada hover, margin atas ini akan ditetapkan menjadi 7 piksel, bukan 8 karena kita memiliki border tambahan yang muncul pada hover mouse (jika tidak, panahnya akan didorong 1 piksel ke bawah pada hover) :

Berikut adalah kode terakhir kita untuk kontainer menu dan tautan; hanya item "home" yang tidak memiliki konten drop down untuk saat ini :

Dan hasilnya adalah :

Building a CSS3 Mega Drop Down MenuBuilding a CSS3 Mega Drop Down MenuBuilding a CSS3 Mega Drop Down Menu

Langkah 2: Mengkodekan Drop Down

Menu drop down "klasik" biasanya berisi daftar yang terdapat dalam daftar item induk dan terlihat seperti:

Struktur Umum

Untuk Menu Mega kita, bukannya daftar bersarang, kita hanya menggunakan DIV standar, yang akan bekerja seperti daftar bersarang :

Ini akan menjadi struktur dasar untuk drop down. Gagasan di baliknya adalah untuk dapat memasukkan jenis konten apa pun, seperti paragraf, gambar, daftar kustom atau form kontak, disusun dalam kolom-kolom.

Kontainer Drop Down

Kontainer dengan berbagai ukuran akan menampung seluruh konten drop down. Saya telah memilih nama tag yang sesuai dengan jumlah kolom yang akan mereka kandung.

Untuk menyembunyikan drop down, kita akan menggunakan posisi absolut dengan margin kiri negatif :

Latar belakang warna fallback sama dengan yang digunakan untuk item menu. Browser modern akan menampilkan gradien yang dimulai dengan #EEEEEE di bagian atas (untuk mencocokkan gradien item menu induk) dan diakhiri dengan #BBBBBB di bagian bawah:

Kita akan kembali menggunakan sudut membulat, kecuali yang kiri atas :

Untuk menggambarkan hal ini, mari kita lihat bagaimana tampilannya jika kita tidak memperhatikan detailnya:

Building a CSS3 Mega Drop Down MenuBuilding a CSS3 Mega Drop Down MenuBuilding a CSS3 Mega Drop Down Menu

Sekarang inilah contoh kita:

Building a CSS3 Mega Drop Down MenuBuilding a CSS3 Mega Drop Down MenuBuilding a CSS3 Mega Drop Down Menu

Seperti yang bisa Anda lihat, drop down menempel dengan baik ke item menu induknya.

Agar memiliki kontainer drop down yang sempurna, kita perlu menentukan lebar masing-masing :

Dan untuk menunjukkan drop down pada hover mouse, kita hanya akan menggunakan :

Menggunakan Kontainer Drop Down

Kelas kita siap untuk disertakan dalam menu kita. Kita akan menggunakan masing-masing dari mereka mulai dari 5 kolom, tata letak ke drop down kolom tunggal :

Berikut adalah pratinjau dari kode diatas :

Building a CSS3 Mega Drop Down MenuBuilding a CSS3 Mega Drop Down MenuBuilding a CSS3 Mega Drop Down Menu

Langkah 3: Membuat Kolom-kolom Kontainer Drop Down

Setelah kita menyiapkan kontainer, kita akan membuat kolom dengan ukuran yang semakin meningkat, mengikuti prinsip-prinsip sistem grid 960.

Menggunakan Kolom

Berikut adalah contoh drop down yang berisi beberapa kolom. Dalam contoh ini, kita memiliki kombinasi yang berbeda dengan menggunakan semua jenis kolom :

Pratinjau kode :

Building a CSS3 Mega Drop Down MenuBuilding a CSS3 Mega Drop Down MenuBuilding a CSS3 Mega Drop Down Menu

Langkah 4: Menjajarkan ke Kanan

Sekarang, mari kita lihat bagaimana kita bisa menjajarkan menu kita dan konten drop down ke tepi kanan panel navigasi; tidak hanya item menu, tapi kontainer drop down juga harus diganti.

Untuk mencapai hal ini, kita akan menambahkan kelas baru yang disebut .menu_right ke item daftar induk, sehingga kita mengatur ulang margin kanan dan memberikan float ke kanan :

Selanjutnya, mari kita lihat drop down-nya. Dalam kode CSS sebelumnya, sudut membulat diterapkan ke semua sudut kecuali yang left-top, agar sesuai dengan latar belakang item menu induk. Sekarang kita ingin drop down ini untuk tetap berada di tepi kanan item menu induk. Jadi, kita akan menimpa nilai border-radius dengan kelas baru yang disebut .align_right, dan mengatur pojok top-right ke 0.

Yang terakhir namun tidak kalah pentingnya, kita ingin membuat drop down tampil di sebelah kanan; jadi kita akan menggunakan kelas baru kita dan mengatur ulang nilai kiri, lalu membuatnya menempel di sebelah kanan :

Sekarang siap digunakan di menu :

Dan pratinjau kecil dari kode diatas :

Building a CSS3 Mega Drop Down Menu

Langkah 5: Menambahkan dan Menata Konten

Setelah seluruh struktur kita siap, kita bisa menambahkan konten sebanyak yang kita inginkan: teks, daftar, gambar, dll.

Penataan Umum

Mari kita mulai dengan beberapa gaya dasar untuk paragraf dan judul :

Kita bisa menerapkan warna biru yang bagus ke tautan di dalam drop down:

Penataan Daftar

Mari kita ubah daftar kita; kita harus mengatur ulang beberapa penataan seperti warna latar belakang atau border yang digunakan pada bar navigasi :

Penataan Gambar

Dan untuk membuat paragraf dengan gambar di sebelah kiri :

Kotak Teks

Untuk menyoroti beberapa konten, berikut adalah contoh kotak gelap dengan sudut membulat dan bayangan inset yang halus :

Penataan Ulang Daftar

Dan untuk menyelesaikannya, inilah cara lain untuk menata daftar menggunakan, lagi, beberapa CSS3:

Langkah 6: Menangani Kompatibilitas Browser dan IE6

Semua browser menangani hover pada tag non-anchor . . .  kecuali Internet Explorer 6; jadi Menu Mega kita masih belum bekerja dengan browser lawas ini. Kita bisa memperbaiki masalah ini berkat file perilaku yang akan menambahkan fungsionalitas ini. Anda bisa menemukannya di sini, dan gunakan komentar kondisional untuk menargetkan IE6 saja; penjelasan lebih bisa ditemukan melalui artikel ini dari CSS-Tricks.

Untuk menargetkan IE6, kita akan menggunakan kode berikut :

Saya telah menggunakan beberapa file PNG dalam tutorial ini, dan, seperti yang diketahui semuanya, IE6 tidak mendukung transparansi sehingga kita memiliki solusi yang berbeda :

Saya akan membiarkan Anda memilih yang sesuai dengan kebutuhan Anda. Sekarang, mari meninjau contoh yang bekerja penuh.

Contoh Akhir

Bagian HTML

Bagian CSS

Tautan-tautan Menarik dan Relevan

Kesimpulan

Saya harap Anda menikmati tutorial ini pada pembuatan menu mega. Terima kasih telah mengikuti!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.