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

Cara Membuat Tombol Navigasi Menggunakan jQuery

by
Difficulty:BeginnerLength:MediumLanguages:

Indonesian (Bahasa Indonesia) translation by Husain Ali Yahya (you can also view the original English article)

Kunci dari sebuah situs yang sukses adalah kenyamanan dimana pengguna dapat menemukan apa yang mereka cari. Oleh karenanya, penting menghabiskan banyak waktu dan tenaga untuk membuat baik sistem navigasi yang berguna dan menarik secara visual. Akhirnya, saya telah berusaha bereksperimen dengan cara-cara baru bernavigasi di sebuah situs. Di tutorial ini saya akan menunjukkan cara membiarkan pengguna menggunakan keyboard mereka untuk mengelilingi situsmu.

Langkah 1

Hal pertama yang kita butuh adlah membuat halaman percobaan kita. Dalam kasus ini saya akan menggunakan demo.html dan akan mengandung:

  1. Sebuah link ke framework jQuery
  2. Sebuah link yang akan dikerjakan nanti. Sebut saja keypress_nav.js
  3. Sebuah link ke file css disebut style.css ( kita juga akan bekerja di sini nanti )
  4. Kepala div yang akan mengandung menu navigasi di antara hal lain dan
  5. lima elemen div unik yang akan menampilkan halaman untuk situs

Jadi, seperti ini demo.html akan terlihat sekarang.

Langkah 2

Sekarang kita telah punya DIV, kita bisa melangkah membuat navigasi untuk situs. Seperti yang kamu bayang kita akan menggunakan unordered list <ul> untuk menahan link-link dan DIV ID sebagai target dari link tersebut. Kita juga akan menambahkan class container ke semua "page" DIV. Kelas ini akan menolong kita untuk memudahkan acuan kepada DIV ketika kita membuat skrip. Jadi, ini yang harus kita miliki sekarang:

Catatan: Huruf (key) di dalam tanda kurung adalah key yang akan kita gunakan untuk navigasi di halaman.

Langkah 3

Struktur dari halaman percobaan kita sekarang selesai tetapi kekurangan elemen visual. Jadi maritambahkan beberapa CSS. Satu hal yang harus diingat adalah sebelum memulai memberi gaya laman kita. Bahwa laman kita harus tetpa bagus meskipun JavaScript dimatikan. Skrip, dalam opiniku, selalu harus digunakan sebagai bonus pada pengguna yang punya JavaScript menyala tapi tidak harus menjauhkan yang tidak punya. Kita ada desainer situs, dan kita peduli pada usabilitas kan?

Kamu bisa lihat yang kita kerjakan di screenshot diatas. Itu adalah sederhana, menggunakan beberaoa warna untuk menerangi seksi yang berbeda. Jadi ini CSS kita:

Catatan: Saya telah menambahkan beberapa aturan pembersih otomatis di navigasi agar bekerja di tinggi yang kurang akibat elemen inner floated. Dengan kata lain, aturan margin dari bagian paling atas mengandung efek yang tepat di navigasi <ul>.

Langkah 5

Di bagian tutorial ini kamu harus memiliki halaman yang terliaht seperti ini:

Test Page Preview

Halaman yang berfungsi dengan tanpa JavaScript yang dinyalakan. Namun, seperti yang saya bilang sebelumnya, mari berikan sedikit bonus bagi yang memiliki JavaScript di browser mereka. Kita akan melakukannya dalam dua langkah. Pertaman, kita akan membuat dua fungsi yang akan menyembunyikan dan menampilkan laman secara tepat. Lalu, kita akan menambahkan beberapa kode yang akan menentukan kunci yang akan ditekan pengguna nanti. Mari buat sebuah berkas keypress_nav.js dan bekerja dengan fungsi.

Langkah 6

Kita akan menentukan dua fungsi agar skrip bekerja sesuai keinginan. Salah satunya akan dipanggil ketika pengguna menekan kunci yang telah ditentukan (huruf dalam kurung dilangkah 2) dan akan menyembunyikan kontainer yang lain, menampilkan yang terasosiasi dengan kunci di DIV. Dan ini penampakan pertama fungsi kita:

Sekarang, fungsi kedua kita akan mengambil array dari link dan memberikan mereka fungsi click target. Dengan kata lain fngsinya akan mendapatkan link navigasi, mengembalikan atribut "href" dan menampilkan DIV yang tepat saat mengkliknya. Jadi, fungsi keduanya akan seperti ini:

Langkah 7

Sekarang kode fungsi kita selesai, kita perlu memanggil mereka secara tepat ketika laman dimuat. Hal pertama yang perlu dilakukan adalah menyembunyikan semua elemen yang memiliki class container dengan pengecualian DIV yang memiliki ID home. Lalu, kita memanggil fungsi showViaLink() dengan link di dalam navigasi <ul> kami sebagai parameternya. Lalu, kita harus mendengarkan ke key yang ditekan pengguna dengan menggunakan fungsi showViaPress() dengan ID yang tepat sebagai parameternya. Ini bisa diselesaikan dengan menggunakan switch di key yang ditekan.

Switch akan punya 5 kasus ( untuk setiap link ) dan angkanya mengikuti ASCII untuk setiap key. Contohnya, jika "a" ditekan, maka switch akan menggunakan kasus 97. Jadi, kodenya akan terlihat begini.

Langkah 8

Sekarang kita telah memiliki semua pecahan puzzle, kita bisa meletakkannya bersama. Skrip terakhir kita harusnya seperti:

Demo

Lihat cara kerja skrip di halaman demo.
Pola yang digunakan di demo ini dibuat oleh Taylor Satula.

ENDE

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