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

Navigasi Atas yang Berbeda

by
Read Time:9 minsLanguages:

Indonesian (Bahasa Indonesia) translation by Andy Nur (you can also view the original English article)

Saat mendesain suatu situs baru, web desainer biasanya menghadapi pertanyaan kuno: navigasi vertikal atau horisontal? Ada yang pro dan kontra untuk kedua solusinya. Salah satu contoh adalah navigasi horizontal membatasi jumlah tautan yang dapat kamu miliki karena lebar halaman terbatas. Ini biasanya diselesaikan dengan memasukkan sistem drop down. Namun, jika kamu mencoba membuat situs khususmu menonjol, kamu dapat mempertimbangkan untuk berpikir di luar "norma".

Pada tutorial ini, kita akan melakukan hal itu. Kita akan menggunakan jQuery untuk membuat sistem navigasi horizontal beraneka lapis yang berbeda yang itu masih cukup intuitif bagi siapa saja untuk digunakan saat pertama kalinya.


Untuk Mempelajari:

Di akhir tutorial ini, kita ingin mempelajari hal-hal berikut:

  • Cara membuat lintas-browser CSS Sudut lengkung murni
  • Mnggunakan jQuery untuk menganimasikan slider atas
  • Menggunakan jQuery untuk mengontrol tampilan daftar turunan yang tidak berurutan ketika item daftar induk melayang di atas.
  • Menggunakan jQuery untuk membuat kemampuan dekat yang dinamis

Tujuan:

Pada akhir tutorial ini, kita ingin menciptakan sebuah sistem navigasi horisontal yang tidak menggunakan sistem drop down yang khas.

Efek yang diinginkan

PagePagePage

Normal State - klik untuk melihat ukuran penuh

PagePagePage

Diperluas State - klik untuk melihat ukuran penuh

Fungsi

Mari kita mulai dengan memetakan apa yang perlu kita lakukan agar fufill keluar tujuan:

Ekspansi

  1. Menunggu user untuk hover di atas salah satu dari link utama
  2. Tampilkan tutup X
  3. Pastikan tidak ada link utama memiliki aktif kelas (kelas yang akan membuat latar belakang mereka cocok tautan sub latar belakang)
  4. Menambahkan kelas aktif untuk link utama yang melayang di atas
  5. Menghidupkan tinggi bar bagian atas untuk 40px
  6. Pastikan tidak ada sub link menunjukkan dengan menyembunyikan semua sub link
  7. Tampilkan link sub link utama yang yang sedang melayang di atas

Kontraksi

  1. Menunggu untuk tutup X diklik
  2. Menyembunyikan semua sub link
  3. Menghapus kelas aktif dari semua link utama
  4. Menghidupkan tinggi sub link bar kembali ke 10px
  5. Menyembunyikan tutup X

HTML

Sudah ada banyak tutorial yang besar di situs ini untuk mempelajari dasar-dasar HTML & CSS, sehingga untuk tutorial ini saya akan menganggap Anda sudah tahu dasar-dasar. Aku akan melompat pergi ke detail untuk bagian ini:

Untuk konten halaman yang sebenarnya, kita hanya akan menggunakan gambar konten untuk mem-bypass hilangnya kualitas yang menyertainya web teks. Hal ini membuat HTML sangat sederhana:

CSS

CSS cukup sederhana juga. Karena tutorial ini tidak berfokus pada HTML atau CSS, jika Anda memiliki pertanyaan spesifik tentang hal itu, Anda dapat Kabari saya di komentar di bawah ini.

Sudut lengkung

Untuk contoh ini, kami juga ingin membuat sudut bawah bulat. Ada berbagai solusi untuk dilema ini, termasuk menggunakan gambar, javascript, CSS atau ususally kombinasi tersebut. Untuk contoh ini, saya ingin mencapai sudut-sudut yang menggunakan hanya CSS. Meskipun CSS3 menawarkan kita sebuah solusi mudah, hal ini masih tidak cross browser yang kompatibel. Jadi untuk contoh ini, kita akan menggunakan sebuah layanan online yang disebut sudut keren. Keren sudut menghasilkan semua kode bagi kita. It's pretty cool. Kami memasukkan jari-jari sudut, nama kelas yang diinginkan dan latar belakang dan latar depan warna-it melakukan sisanya.

PagePagePage

Berikut adalah kode itu spitted keluar bagi kita:

Script waktu

Mari kita pergi ke fungsi lagi:

  • Ekspansi

    1. Menunggu user untuk hover di atas salah satu dari link utama
    2. Tampilkan tutup X
    3. Pastikan tidak ada link utama memiliki aktif kelas (kelas yang akan membuat latar belakang mereka cocok tautan sub latar belakang)
    4. Menambahkan kelas aktif untuk link utama yang melayang di atas
    5. Menghidupkan tinggi bar bagian atas untuk 40px
    6. Pastikan tidak ada sub link menunjukkan dengan menyembunyikan semua sub link
    7. Tampilkan link sub link utama yang yang sedang melayang di atas

    Kontraksi

    1. Menunggu untuk tutup X diklik
    2. Menyembunyikan semua sub link
    3. Menghapus kelas aktif dari semua link utama
    4. Menghidupkan tinggi sub link bar kembali ke 10px
    5. Menyembunyikan tutup X

Bagaimana kita akan mencapai hal-hal ini

Menambahkan pendengar:

Kami menempatkan pegangan di hover pendengar di dalam DOM di membaca fungsi:

Tampilkan tutup X

Untuk menunjukkan X, kita akan menggunakan fadeIn() fungsi:

Pastikan tidak ada link utama memiliki kelas aktif

Untuk melakukan ini, kami akan menghapus kelas .active dari semua link utama

Menambahkan kelas aktif pada elemen yang sedang melayang pada

Menggunakan pemilih "ini" kita dapat memilih elemen saat ini kita berbicara tentang. Karena kita di dalam pendengar melayang, itu akan menambah kelas elemen tertentu yang sedang melayang pada.

Menghidupkan tinggi bar bagian atas untuk 40px

Kami akan menggunakan menghidupkan () function untuk ini.

Pastikan tidak ada sub link menunjukkan

Untuk melakukan ini, kita akan menggunakan teknik yang sama yang kita digunakan untuk menghapus kelas aktif dari semua elemen. Hanya kali ini, kita akan menyembunyikan semua daftar sub link.

Menunjukkan yang benar set sub link

Untuk melakukan ini, kami akan memilih elemen saudara kandung dari elemen hovered dan menunjukkan daftar saudara kandung.

Kontraksi

Sekarang mari tambahkan kemampuan untuk menutup bilah lagi. Untuk contoh ini, saya telah memutuskan untuk menyertakan X yang akan menciutkan bilah. Untuk contoh Anda, Anda dapat memilih metode apa pun yang menurut Anda paling intuitif dan fungsional.

Tunggu hingga X diklik

Untuk melakukan ini, kami akan mengatur pendengar acara yang menunggu X diklik dan kemudian melakukan sesuatu.

Hapus kelas aktif dari semua tautan utama

Hal pertama yang ingin kita lakukan setelah X diklik adalah menghapus kelas aktif dari semua tautan utama, karena ketika menu tersebut runtuh, tidak ada yang harus dipilih.

Sembunyikan semua sub-tautan

Sekarang bar akan runtuh, kita perlu menyembunyikan semua sub-tautan.

Animasikan bar Top kembali ke 10px

Sekarang kita perlu meminimalkan bar kembali ke 10px

Sembunyikan X lagi

Kini setelah panel diciutkan, pengguna tidak akan melihat opsi untuk menutup bilah lagi. Jadi kita perlu menyembunyikannya lagi.

Keseluruhan Script

Sekarang setelah membahas skrip secara detail, mari kita lihat semuanya:

Kita Telah Selesai


Selamat! Anda telah membuat sistem navigasi horizontal yang akan menonjol di situs Anda sebagai berbeda! Saya harap Anda menikmati tutorial ini dan merasa berguna dalam mempelajari lebih lanjut tentang cara menggunakan jQuery untuk aplikasi praktis. Jika Anda memiliki pertanyaan atau komentar, pastikan untuk meninggalkannya di komentar di bawah! Saya ingin sekali mendengar dari Anda!

  • Ikuti kami di Twitter, atau berlangganan RSS Feed NETTUTS untuk lebih banyak tuts pengembangan web harian dan artikel.


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.