Seringkali, di situs dengan banyak konten, pengunjung tersesat di halaman dan harus menggulir ke bagian paling atas halaman untuk menemukan menu navigasi. Teknologi tidak tinggal diam, layar monitor dan resolusinya semakin besar, sehingga kini di sebuah website tidak sayang lagi mengalokasikan 40 piksel di atas untuk menu tetap saat menggulir halaman website. Pengunjung akan selalu dapat melihat di bagian mana dia berada, serta memiliki akses cepat ke menu navigasi. Pada akhirnya, ini meningkatkan kedalaman penjelajahan situs :)
Apa inti dari menu navigasi tetap pada sebuah website? Awalnya, menu kita terletak di tempat biasanya, di suatu tempat di header, dalam kasus saya pada jarak 140px dari tepi atas. Segera setelah pengunjung menggulir halaman sebesar 140 piksel yang sama di bagian bawah, menu ditetapkan di bagian paling atas jendela dan tetap di sana selama sisa waktu hingga gulir dikembalikan ke posisi teratas.
Menu tetap saat menggulir halaman pada dasarnya adalah panel kontrol yang selalu bersama Anda. Menu kami akan sederhana.
Dari teori hingga praktik. Semuanya cukup sederhana dan minimalis, sebagian besar diberikan pada gaya yang bisa Anda sesuaikan sendiri. Saya membuat menu tetap seperti pada gambar, ketika di-scroll warna menu menjadi agak transparan sehingga tidak terlihat berat dan terlihat isi di bawahnya.
Gaya kami. Saya memiliki menu dengan lebar 1180px, terletak di tengah. Tinggi headernya 180px, menu gulir disertakan di dalamnya dan berukuran 40px. Artinya jarak dari atas 140 piksel. Mari kita ingat nomor ini)
#header ( tinggi: 180px; ) #navigasi( latar belakang: #EF0505; tinggi: 40px; bayangan kotak: 0 2px 2px rgba(0, 0, 0, 0.4); ukuran font: 16px; tinggi garis: 40px; posisi: relatif; atas: 140px; ) #navigasi.tetap( posisi: tetap; atas: 0; lebar: 100%; latar belakang: rgba(239, 5, 5, 0.95); ) #navigasi ul( lebar: 1180px; padding -kiri: 0; margin: 0 otomatis; tampilan: blok; ) #menu li( float: kiri; gaya daftar: tidak ada; padding: 0 25px; batas kanan: 1px solid #D60000; ) #menu a ( warna: #fff; dekorasi teks: tidak ada; font-family: Verdana; ) #menu>li a:hover( warna: #656565; transisi: warna kemudahan 0,5 detik; )
Dan berikut adalah beberapa baris kode yang berfungsi secara ajaib) Kami menetapkan kondisi untuk menggulir halaman, di atas 140px atau di bawahnya. Tergantung pada ini, kelas tetap ditetapkan ke menu navigasi kami. Dan dengan kelas ini, seperti yang disebutkan di atas, kami membuat menu diperbaiki dan disematkan ke atas.
JQuery(fungsi($) ( $(jendela).scroll(function())( if($(this).scrollTop()>140)( $("#navigation").addClass("fixed"); ) else jika ($(ini).scrollTop()
Harap dicatat bahwa jika ada tanda kutip tunggal dalam kode yang diapit echo "" , tanda kutip tersebut harus di-escape, mis. beri tanda garis miring terbalik (\") di depannya masing-masing, tanpa tanda kurung tentunya.
Secara umum, ternyata apa yang terjadi. Anda harus memutuskan sendiri bagaimana secara spesifik melampirkan ini ke topik Anda - ketika Anda punya waktu, akan menyenangkan untuk "memutar otak". Terima kasih.
Semoga beruntung untukmu! Sampai jumpa lagi di halaman situs blog
Anda mungkin tertarik
WebPoint PRO adalah tema WordPress responsif dengan fungsionalitas luas dan optimasi mesin pencari teknis yang kompeten 
Share42 - skrip untuk menambahkan tombol jejaring sosial dan bookmark ke situs (ada opsi panel mengambang)
Yang semakin sering ditemukan di halaman blog dan sumber lainnya. Penggunaan bilah navigasi semacam itu cukup beralasan. Salah satu alasan utama aktifnya penggunaan plugin jQuery ini adalah karena menu selalu ada di ujung jari pengunjung, meskipun berada di bagian bawah halaman. Selain itu, menu tetap hanya memakan sedikit ruang dan tidak mengalihkan perhatian dari konten utama. Secara umum, menu tetap meningkatkan kegunaan situs.
Saya telah mengumpulkan koleksi plugin jQuery gratis terbaik, menurut saya, untuk mengimplementasikan menu tetap. Saya mencoba memastikan bahwa setiap plugin memiliki keunikan dalam beberapa hal, sehingga plugin apa pun dari pilihan dapat digunakan secara spesifik dalam proyek Anda. Dalam koleksinya Anda dapat menemukan plugin sederhana dan lebih kompleks dengan animasi, dll.
Jika Anda memerlukan menu tetap yang sangat sederhana, seperti bagaimana kami menerapkan panel tempel dengan tombol sosial, Anda dapat melakukannya tanpa plugin jQuery, karena memuat halaman dengan skrip tidak terlalu baik, tetapi kami akan membicarakannya di artikel berikut. Berlangganan saluran atau halaman kami agar tidak ketinggalan materi menarik.
Jadi. Berikut adalah 6 plugin jQuery untuk membuat menu tetap.
