Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. HTML & CSS

Cara Membuat Menu Nav Drop-Down dengan HTML5, CSS3 dan JQuery

by
Difficulty:IntermediateLength:LongLanguages:

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

Dalam tutorial ini, kita akan melihat apa yang bisa kita capai dengan HTML5 dan CSS3 ketika datang ke pokok situs web saat ini: menu navigasi drop-down yang rendah hati. Kita juga akan menggunakan jQuery untuk menangani efeknya dan menambahkan sentuhan akhir untuk kita.

HTML5 membawa kepada spesifikasi elemen <nav> khusus yang harus digunakan sebagai kontainer untuk setiap struktur navigasi utama, seperti menu navigasi situs vertikal atau horizontal utama, atau daftar isi dalam halaman misalnya. Sayangnya, IE belum mendukung elemen baru ini, tetapi ada perbaikan sederhana yang dapat kita gunakan, yang saya yakin Anda semua sadari.

Menggunakan CSS3 kita dapat menyingkirkan apa yang akan membutuhkan penggunaan beberapa gambar latar belakang dan mungkin satu atau dua kontainer pembungkus tambahan dan bergantung (hampir) murni pada beberapa properti gaya baru, seperti sudut membulat dan drop-shadow misalnya, yang tersedia untuk browser yang mendukung. Sekali lagi, tidak semua browser (ehem, IE!) mendukung aturan baru ini, tetapi kita dapat dengan mudah memberikan solusi mundur untuk browser yang tidak dapat menangani gaya kita.

Omong-omong, Envato Market memiliki banyak pilihan menu-menu CSS yang trendi untuk Anda pilih, seperti PickArt, solusi sederhana, bersih, elegan yang siap digunakan dan diinstal hanya dengan $4.

PickArt on Envato MarketPickArt on Envato MarketPickArt on Envato Market
PickArt di Envato Market

PickArt di Envato MarketAnda juga dapat mencoba salah satu penyedia layanan ahli di Envato Studio. Misalnya, Lukasz Czerwinski akan membuat plugin jQuery baru untuk spesifikasi Anda seharga $115 dalam waktu tujuh hari, dengan rating kepuasan 100%. Penawarannya termasuk menu drop-down, galeri media terintegrasi dengan layanan sosial Anda, slider, dan banyak lagi.

Jika Anda tidak dapat menemukan apa yang Anda butuhkan, atau jika Anda lebih suka melakukannya sendiri, baca terus untuk mengetahui caranya.


Langkah 1. Persiapan

Kita akan membutuhkan salinan rilis jQuery terbaru, versi 1.4.2 pada saat penulisan, serta salinan dari versi saat ini (1.1) dari perpustakaan Modernizr yang sangat bagus, yang akan kita gunakan untuk menargetkan browser yang mendukung dengan CSS3 yang kita gunakan.

Buat folder proyek untuk file yang akan kita buat di suatu tempat di komputer Anda dan beri nama nav, di dalam folder ini buat tiga folder baru; yang disebut js, yang disebut css dan yang disebut fallback. Pastikan salinan jQuery dan Modernizr disimpan dalam folder js.


Langkah 2. Halaman Dasar

Mulai pengkodean dengan membuat halaman berikut di editor kode favorit Anda:

Simpan ini sebagai nav.html di folder nav. Kita memulai dengan doctype HTML5 minimal, yang memungkinkan kita untuk menentukan jenis dokumen dalam seperempat kode yang biasa kita gunakan. Kita juga menentukan bahasa default dan pengkodean karakter; meskipun dokumen masih akan memvalidasi tanpa kedua hal ini, praktik yang baik untuk memasukkannya dan halaman akan memicu peringatan validator jika bahasa default tidak ditentukan. Kita kemudian menautkan ke lembar gaya (kita akan membuat ini selanjutnya) dan menggunakan komentar bersyarat yang menargetkan IE untuk memuat skrip html5.js yang sangat bagus dari Remy Sharp jika diperlukan.

Di body halaman, kita memiliki elemen <nav> sebagai kontainer untuk daftar tautan tradisional, dan kita telah menyertakan sub-menu untuk ukuran yang baik juga. Elemen ini tidak secara ajaib membuat menu navigasi untuk kita, dan itu tidak termasuk elemen menu baru apa pun atau semacamnya sehingga unordered list masih merupakan pilihan yang tepat. Elemen <nav> hanyalah wadah semantik untuk menu kita, yang menjelaskan fungsinya di dalam dokumen, untuk menggantikan elemen generik <div> yang menyatakan tidak ada yang secara inheren tentang tujuannya pada halaman.

Di bagian akhir body kita menghubungkan ke file skrip jQuery dan Modernizr kita. Kita akan menggunakan jQuery sedikit kemudian ketika kita datang untuk menambahkan perilaku untuk menu, tetapi Modernizr akan langsung melakukan hal itu, mendeteksi kemampuan browser yang digunakan dan menambahkan serangkaian nama kelas ke elemen HTML, yang kita dapat menggunakannya untuk menambahkan CSS3 kita sehingga hanya diterapkan pada browser yang dapat memanfaatkannya. Kita juga menambahkan nama kelas no-js ke <body> halaman; kita akan menghapusnya nanti jika JavaScript diaktifkan sehingga kita juga dapat menggunakannya untuk menambahkan gaya yang seharusnya hanya diterapkan ketika JavaScript dinonaktifkan.


Langkah 3. Beberapa Penataan Dasar

Sekarang mari tambahkan gaya dasar; buat style-sheet berikut:


Langkah 4. CSS3

Selanjutnya kita dapat menambahkan CSS3 kita:

Menggunakan kelas yang ditambahkan ke elemen <html> oleh Modernizr kita dapat dengan mudah dan aman menambahkan gaya CSS3 yang kita inginkan. Kita menggunakan gaya border-radius untuk memberikan <nav> sudut-sudut membulat; kita perlu memberikan deklarasi awalan gaya Mozilla dan Webkit serta gaya border-radius standar untuk browser yang mendukungnya, seperti Opera. Kita perlu melakukan ini dengan sebagian besar gaya CSS3 kita.

Selain pembulatan-sudut dari <nav> kita juga memberikannya gradien dan drop shadow. Gaya gradien cukup kompleks dan berbeda untuk Mozilla dan browser berbasis WebKit, yang merupakan satu-satunya browser yang saat ini mengimplementasikannya. Kedua browser menggunakan properti background-image. Di Firefox kita menggunakan -moz-linear-gradient untuk menambahkan gradien linier. Ini membutuhkan nilai yang sesuai dengan titik awal gradien (0%), titik di mana warna pertama memadukan ke warna kedua (22px), sudut sumbu gradien (90deg), warna pertama (#999) dan warna kedua (#222).

Kita bisa mendapatkan gradien yang sama di Safari atau Chrome menggunakan -webkit-gradient dan sintaksnya sangat berbeda; kita menetapkan bahwa itu harus berupa gradien linier dan kemudian memberikan dua poin yang memberi tahu browser di mana gradien harus mulai dan berakhir. Nilai-nilai dalam contoh sesuai dengan nilai left, top dan right 0% dan 70% untuk bottom, yang memberi kita gaya yang sama seperti yang digunakan di Firefox. Terakhir kita menentukan warna gradien.

Ketika kita menerapkan drop-shadow kita menggabungkannya dengan kelas Modernizr untuk RGBA serta boxshadow sehingga bayangan kita bisa transparan. Properti untuk Mozilla dan webkit adalah sama, dan kita juga menyediakan properti box-shadow yang sebenarnya untuk browser yang mendukung. Nilai yang kita tetapkan untuk aturan ini adalah offset kiri (2px), offset atas (2px), jumlah blur (2px) dan terakhir warna bayangan (0,0,0). Warnanya adalah tempat kita menggunakan RGBA, yang memungkinkan kita untuk mengatur opacity menjadi 75% (.75).

Gaya menarik lainnya yang kita gunakan adalah transform untuk memutar beberapa teks 180 derajat; saat kita menulis skrip sebentar, Anda akan melihat bahwa kita menambahkan indikator sub menu dalam bentuk tanda panah ke item daftar apa pun yang berisi submenu - gaya ini akan memutar karakter ke karakter yang mengarah ke bawah, yang artinya dalam browser yang mendukung kita bahkan tidak perlu menggunakan gambar untuk fitur ini.

Aturan yang tersisa mengatur gradien yang berbeda, tepi membulat, opacity dengan RGBA dan bayangan pada elemen lain di menu <nav>, seperti sudut bulat bulat yang bagus dan drop shadow pada submenu, serta pembalik gradien untuk status hover yang menarik. Sekarang menu navigasi kita akan terlihat seperti ini di browser yang mendukung:

Dalam browser yang mendukung kita dapat membuat elemen kita terlihat cukup bagus tanpa menggunakan satu gambarpun, yang berarti halaman kita akan memuat lebih cepat dengan permintaan HTTP yang jauh lebih sedikit. Namun, tidak semua browser akan mendukung gaya CSS3, khususnya versi IE, jadi kita masih perlu mendefinisikan gaya fallback kita. Tambahkan kode berikut ke style sheet:

Modernizr juga akan menambahkan nama kelas yang menunjukkan fitur CSS3 mana yang tidak tersedia untuk browser, sehingga kita dapat dengan mudah memberikan aturan alternatif, yang memanfaatkan fallback berbasis gambar di mana fitur tidak didukung serta gaya apa pun yang mungkin kita perlukan sebagai hasil dari menggunakan gambar.

Anda akan melihat bahwa kita juga menggunakan penyeleksi yang menargetkan kelas no-js kita di sini juga; hal ini karena ketika JavaScript dinonaktifkan, Modernizr tidak akan berjalan dan tidak akan menambahkan nama kelas yang kita perlukan ke dokumen, sehingga fallback non-CSS3 juga menjadi fallback non-js juga.


Langkah 5. Menambahkan Skrip

Sekarang mari menambahkan beberapa skrip. Hal pertama yang perlu kita lakukan adalah menghapus kelas no-js dari body halaman ketika JavaScript tidak dinonaktifkan. Kita ingin melakukan ini segera mungkin dalam proses render halaman untuk menghindari kilasan ketika gaya diubah. Tepat setelah tag body pembuka tambahkan kode berikut:

Yang kita lakukan adalah mendapatkan elemen <body> dengan nama tag dan mengatur properti className ke string kosong. Biasanya kita akan menggunakan jQuery untuk melakukan itu untuk kita, tetapi karena jQuery tidak akan dimuat ketika skrip ini dijalankan, kita tidak dapat menggunakannya. Kita dapat memuat jQuery sebelum ini tentu saja, tetapi kita kemudian mendapat penurunan kinerja yang besar. Skrip kita hanya berisi 2 baris kode sehingga tidak akan menyebabkan keterlambatan yang signifikan, dan karena itu akan dijalankan bahkan sebelum browser memproses mark-up untuk elemen <nav>, tidak akan ada kilasan konten yang tidak bergaya.

Setelah kelas dihapus dari body, submenu CSS kita tidak akan berfungsi lagi sehingga kita dapat menambahkan kembali perilaku ini dengan jQuery dan menyempurnakannya sedikit pada saat yang bersamaan. Di akhir dokumen, langsung setelah referensi skrip untuk Modernizr tambahkan kode berikut:

Skrip relatif sederhana; kita membungkus kode kita dalam suatu closure dan meneruskan objek jQuery dengan aman dengan nama yang disesuaikan dengan tanda dolar, kalau-kalau perpustakaan lain sedang digunakan ketika kode dimasukkan ke dalam produksi. Kita kemudian menyimpan referensi ke elemen <nav> sehingga kita dapat merujuknya tanpa memilihnya dari dokumen berulang kali. Kita kemudian memproses setiap item daftar dalam menu.

Untuk setiap elemen yang cocok, kita memeriksanya untuk melihat apakah itu mengandung elemen <ul> bersarang dan jika iya, itu kita menambahkan elemen <span> baru ke item daftar. Ini akan menjadi indikator submenu kita. Ketika sebuah submenu ditemukan, kita juga melampirkan event helper mouseenter() dan mouseleave() ke daftar item yang berisi menu. Yang dilakukan semua helper ini adalah menampilkan dan menyembunyikan submenu dengan menggesernya ke bawah atau ke atas masing-masing. Perhatikan penggunaan metode stop() yang membantu mencegah animasi pembukaan dan penutupan mengantri jika penunjuk mouse berulang kali pindah ke dalam dan ke luar item daftar target.

Pada titik ini kita harus berada di tempat yang cukup bagus untuk sebagian besar situasi; di browser apa pun yang mendukung HTML5, menu kita akan terlihat relatif sama terlepas dari apakah CSS3 didukung atau tidak, dan apakah scripting diaktifkan atau tidak. Namun, IE menghadirkan kita masalah; ketika JS diaktifkan, skrip htmlshiv.js membuat IE memahami elemen <nav> dan gaya non-css3 kita akan diambil dan diimplementasikan - semua sangat baik dan bagus (kita masih memiliki beberapa masalah dengan IE7, seperti di antara hal-hal clear auto kita aturan :after tidak dipahami atau diterapkan, tetapi kita akan datang ke sana sebentar lagi).

Namun, masalah dimulai ketika IE digunakan dengan skrip dinonaktifkan - dalam situasi ini, skrip html5shiv.js tidak dijalankan dan IE tidak memahami elemen <nav>. Tidak ada penyeleksi kita yang menyertakan nav di dalamnya akan diimplementasikan! Ini bukan akhir dunia; kita dapat memberikan style sheet alternatif yang hanya digunakan ketika browser memiliki JS yang dinonaktifkan dan IE. Langsung setelah skrip yang menghapus kelas no-js dari elemen <body> tambahkan yang berikut:

Solusi sederhana memang. Kita sekarang perlu membuat style sheet baru; tambahkan aturan berikut ke dokumen baru di editor kode Anda:

Simpan ini di folder css sebagai ie.css. Seperti yang Anda lihat, kita tidak menargetkan elemen <nav> sama sekali dalam style sheet ini; beberapa gaya yang kita berikan kepada elemen <nav> sebelumnya telah ditambahkan ke elemen <ul> sebagai gantinya, dan ada beberapa gaya baru yang perlu dimasukkan secara khusus untuk skenario ini. Pada dasarnya, style sheet menciptakan efek yang sama seperti sebelumnya, sehingga IE8 dengan JS yang dinonaktifkan harus tetap muncul seperti ini:

Kita harus menggunakan beberapa gambar lagi untuk skenario ini karena kita tidak lagi memiliki elemen <nav> untuk menggantung background-repeat untuk gradien utama. Jadi itu semua browser modern, dengan JS diaktifkan dan dinonaktifkan, berfungsi seperti yang diharapkan – menggunakan CS3 jika memungkinkan dan gambar fallback jika tidak ada.

IE7 masih akan membuat masalah bagi kita, bahkan dengan scripting diaktifkan, tetapi kita dapat memperbaikinya dengan cukup mudah menggunakan komentar kondisional lain untuk menargetkan IE7 secara khusus, dan menyediakan lembar gaya baru hanya untuk IE7 yang memperbaiki masalah tata letak; sesuatu seperti ini yang kita butuhkan:

Simpan ini di folder css sebagai ie7.css dan tambahkan komentar kondisional baru ke <head> halaman:

Disana kita; menu navigasi yang dibangun dan ditata dengan elemen dan gaya terbaru dengan fallback dan perbaikan untuk browser yang lebih lama.

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