Memperbaiki menu atas dan sidebar mengambang di WordPress. Memperbaiki Menu di JQuery Memperbaiki Menu Sisi pada Gulir Halaman

Saat membuat situs web, sering kali ada kebutuhan untuk selalu memperhatikan menu horizontal, yang berisi navigasi utama situs. Metode “memperbaiki” menu horizontal nyaman dari sudut pandang pengunjung, yang “selalu memiliki navigasi”, tidak peduli seberapa banyak Anda memutar roda ke bawah atau ke atas.

Memperbaiki menu horizontal dengan CSS: position:fixed

Di satu sisi, semuanya sederhana dan mudah diselesaikan menggunakan CSS dalam waktu singkat. Contoh tata letak HTML dari menu horizontal tetap:

rumah
Berita
Kontak
Mencari

[konten halaman] [footer situs]

Tata letak CSS dari menu horizontal tetap:

# menu-atas-hampir-tetap( posisi: tetap; atas: 10px; kiri: 0; tinggi: 30px; lebar: 100%; margin: 0; )

Sekarang mari kita atur indentasi konten halaman sama dengan tinggi menu:

#konten ( margin-atas: 30 piksel; )

Dan sekarang kami “hampir” berhasil. Menunya “selalu terlihat” bagi pengunjung. Namun apa yang harus kita lakukan jika desain kita memiliki header situs, diikuti dengan menu itu sendiri, dan di header tersebut kita memiliki logo, moto situs, dan spanduk.

Nah, header situs bisa kita perbaiki dengan membuat lekukan konten sama tingginya dengan header dan menu, beserta lekukan di antara keduanya. Namun muncul masalah. Kami secara signifikan membatasi ruang tampilan bagi pengunjung kami untuk melihat konten halaman. Pilihan untuk mengabaikan batasan sama sekali tidak cocok untuk kita.

Memperbaiki menu horizontal menggunakan javascript

Jadi, mari kita pertimbangkan opsi ketika menu “berada” di belakang header situs, tetapi jika pengunjung aktif menggulir ke bawah, menu tersebut “tetap” di bagian atas dan tetap di tempatnya. Header situs tidak terlihat. Jika pengunjung kembali ke header halaman, menu “menjadi” di tempatnya “di belakang header situs”. Untuk memulainya, berikut adalah tata letak HTML lengkap dari contoh tata letak halaman:

Logo situs web Slogan situs web Spanduk

rumah
Berita
Kontak
Mencari

[konten halaman] [footer situs]

Templat situs web kami terdiri dari beberapa area umum:

tajuk situs – #tajuk, tinggi 150 piksel
menu horisontal – #menu-atas-hampir-diperbaiki– tinggi 30 piksel,
area informasi utama halaman – #isi,
catatan kaki situs - #footer.

Berikut tata letak CSSnya:

#menu-atas-hampir-tetap( posisi: tetap; margin: 0; kiri: 0; atas: 150px; tinggi: 30px; ) #header( tampilan: blok; tinggi: 150px; luapan: tersembunyi; posisi: relatif; margin -bawah: 55px; ) #menu-atas-hampir-diperbaiki ul, #menu-atas-hampir-diperbaiki li( gaya daftar: tidak ada; margin: 0; padding: 0; ) #menu-atas-hampir-diperbaiki ul ( tampilan: blok; perataan teks: tengah; lebar: 100%; float: kiri; ) #menu-top-hampir-diperbaiki ul li( tampilan: sebaris; tinggi garis: 30 piksel; lebar: 120 piksel; padding: 0 5 piksel ; perataan teks: tengah;

Pertama, mari kita atur indentasi dari header ke konten sama dengan tinggi menu kita + indentasi kecil dengan margin tertentu untuk keindahan estetika. #header ( margin-bawah: 55px; ) . Mari kita perbaiki menu kita tepat di belakang header: #menu-top-almost-fixed( position: fixed; margin: 0; left: 0; top: 150px; height: 30px; ) .

Sekarang mari kita pastikan bahwa saat menggulir, menu “memperbaiki” tepat di bagian atas halaman. Mari kita letakkan javascript berikut di antara dan :

skrip java:

Anda dapat melihat contoh penerapannya dengan mengikuti tautan ini dan menggunakan roda gulir. Jadi semuanya sederhana di sini. Dalam pengaturan kami meneruskan parameter berikut ke skrip:

var m1 = 150; - tinggi header dalam piksel,
var m2 = 2; - lekukan ketika header tidak lagi terlihat saat di-scroll,
var menuID = “menu-atas-hampir-diperbaiki”; - id menu horizontal untuk disematkan,
var menuOpacityOnChange = “0,7”; - transparansi menu saat menggulir:
- 1 - buram
- 0,5 – tembus cahaya
- 0,0 - sepenuhnya transparan

Dalam versi ini, kami telah "menyetel" sedikit menu kami, dan saat menggulir kami menambahkan transparansi ke dalamnya. Opsi yang lebih klasik segera muncul, ketika kita tidak mengubah transparansi menu, tetapi cukup membuat latar belakang menu dalam bentuk latar belakang dengan warna menu dan batas transparan yang lebih rendah (di mana gradien “bertransisi dengan mulus ” dari warna buram menjadi transparan):

Mari kita ubah sedikit tata letak CSS untuk menu tetap horizontal kita:

#menu-atas-hampir-tetap( posisi: tetap; margin: 0; kiri: 0; atas: 150px; tinggi: 30px; latar belakang: url(./images/white-gradient-l.png) kiri bawah ulangi-x ;

Sekarang mari kita berikan kode javascript yang telah dimodifikasi, yang akan kita tempatkan di antara dan :

skrip java:

Jadi semuanya sederhana di sini. Dalam pengaturan kami meneruskan parameter berikut ke skrip:

var m1 = 150; - tinggi header dalam piksel,
var m2 = 0; - lekukan ketika header tidak lagi terlihat saat di-scroll.

Menu berfungsi dengan baik, tetapi jika Anda memuat ulang halaman, menu muncul dengan indentasi pertama

Jika ada masalah seperti itu, Anda perlu memanggil menu setelah memuat halaman satu kali. Untuk melakukan ini, ubah kode panggilan fungsi dari:

Fungsi setMenuPosition())( if(typeof window.addEventListener != "tidak terdefinisi")( window.addEventListener("scroll", marginMenuTop, false); ) else if(typeof window.attachEvent != "undefinisi")( window.attachEvent ( "gulir", marginMenuTop);

Ke kode berikut:

Setelah halaman dimuat, kami segera memanggil fungsi marginMenuTop kami, yang akan memeriksa posisi menu pada halaman dan menerapkan gaya yang diinginkan

Menerapkan menu yang diperbaiki sebagian menggunakan plugin Afixx jQuery dari Twitter Bootstrap

Sebagai kelanjutan dari topik ini, sebuah artikel ditulis untuk Anda tentang penerapan menu yang hampir tetap menggunakan plugin jQuery Affix dari kerangka Twitter Bootstrap.

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.

Plugin navigasi tetap Auto-Hide Sticky HeaderjQuery, yang bekerja dengan prinsip yang sama seperti skrip di atas, tetapi kurang mulus, meskipun, pada pandangan pertama, sedikit lebih mudah. Sayangnya, saya tidak bisa mengatakan bahwa navigasinya sepenuhnya adaptif, karena pada layar kecil item menu hanya berupa angka, dan ini sangat aneh.

Pada Efek Scroll Header Plugin jQuery yang kuat untuk bilah navigasi tetap. Anda dapat mengatur segmen tertentu pada halaman saat menggulir, setelah mencapai panel tersebut akan berubah dan dapat sepenuhnya mengubah tampilannya. Segmen seperti itu bisa berjumlah berapa pun dalam satu halaman.

Header Animasi On-Scroll Sebuah plugin yang bagus untuk mengimplementasikan bilah navigasi yang melekat. Cara kerjanya seperti ini: di awal halaman, kita melihat header tinggi yang berisi logo dan menu. Saat menggulir, area header dengan semua elemen, termasuk logo dan navigasi, mengecil secara bertahap menggunakan properti dan menjadi strip sempit yang menempel di bagian atas layar.

Baru-baru ini, sebuah tren telah menjadi mode: menu tetap saat menggulir halaman. Biasanya ini adalah menu horizontal pada situs Landing Page.

Cara kerjanya adalah ketika halaman dimuat, menu terletak di tempat tertentu pada halaman (misalnya, di bawah "header"), dan ketika Anda menggulir halaman, menu tersebut dipasang di bagian atas jendela browser dan tidak bergulir seperti konten lainnya.

Jika pengunjung menggulir halaman ke atas dan mencapai awal halaman, menu kembali ke tempatnya. Dengan demikian, pengunjung, yang berada di mana saja pada halaman tersebut, dapat menggunakannya dan membuka halaman lain di situs tersebut. Ini sangat nyaman dan sesuai dengan prinsip kegunaan.

Sekarang saya akan memberi tahu Anda cara menerapkan menu seperti itu dengan menghabiskan waktu minimum dan tanpa menggunakan bantuan profesional.

Pertama, kita perlu menghubungkan perpustakaan jQuery untuk situs tersebut

< script src= "//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" >

Anda dapat terhubung secara lokal atau melalui Google.

Untuk terhubung secara lokal, Anda perlu mengunduh file jQuery dari situs resmi http://jquery.com/

CSS

JavaScript

Dalam skrip, kita membuat 2 variabel yang di dalamnya kita menyimpan nilai tinggi header dan lekukan blok dengan menu di atas. Mungkin tidak ada lekukan (seperti dalam kasus ini). Kemudian kita menulis handler untuk event onScroll pada objek window. Di dalamnya, dengan menggunakan metode scrollTop(), kami menghitung jarak dari bagian atas halaman ke posisi penggulung gulir saat ini. Berdasarkan perhitungan, kami memposisikan blok dengan menu.

Itu saja, berkat solusi sederhana Anda dapat mencapai menu tetap yang indah yang tidak akan bergulir saat menggulir bagian utama situs

Hal pertama yang akan kami lakukan adalah menempelkan kode HTML kami di tempat di situs Anda di mana Anda ingin melihat menunya.

rumah
WordPress
HTML5&CSS3
PHP

Menu ini diberi kelas default, berkat itu jquery kami kemudian dapat menentukan bahwa blok khusus ini perlu disematkan ke atas.

2. kode jQuery

Di header, sebelum kepala penutup, masukkan kode. Seperti yang saya tulis di atas, ini mendefinisikan blok dengan kelas default dan setelah bergulir menetapkannya kelas fixed . Anda dapat mengubah nama kelas jika Anda membutuhkannya. Namun berhati-hatilah dan jangan lewatkan apa pun, jika tidak semuanya akan berhenti berfungsi. Anda perlu mengubah jQuery, HTML dan CSS.

$(dokumen).siap(fungsi())( var $menu = $("#menu"); $(jendela).scroll(fungsi())( if ($(ini).scrollTop() > 100 && $ menu.hasClass("default"))( $menu.fadeOut("fast",function())( $(this).removeClass("default") .addClass("transbg tetap") .fadeIn("fast") ; )) ; ) lain jika($(ini).scrollTop() $(jendela).tinggi())( $("nav").css(("tinggi": $("nav").tinggi() ,"lebar ": $("nav").width())).addClass("fixed"); )else( $("nav").removeClass("fixed"); ) ));

Artinya, saat menggulir halaman, kami memeriksa "apakah jumlah halaman yang digulir lebih besar dari tinggi jendela", dan jika lebih besar, kami menambahkan kelas tetap ke menu kami (dan menentukan tinggi dan lebar, karena saat menggunakan position: fixed dimensi blok hilang), jika tidak, hapus kelas ini.

Tetap (posisi: tetap; atas:0; kiri: 0; )

Artinya, jika kelas seperti itu ada, objeknya akan menjadi tetap.

Siap. Menu tersebut hanya akan menempel ketika pengguna menggulir halaman lebih dari ukuran layar. Tentu saja, Anda dapat memperbaiki menu setelah pengguna menggulir halaman berdasarkan jumlah menu itu sendiri, atau berdasarkan nilai yang telah ditentukan.

Kami selalu memperbaiki menu (opsi perbaikan kedua)

Untuk metode ini kita hanya membutuhkan CSS. Kami akan memperbaiki menu secara permanen, dan jika diinginkan, kami akan membuat indentasi atas pada badan sehingga ketika menggulir ke nol, menu tidak tumpang tindih dengan konten lainnya.

Cara memblokir halaman VK

PHP AJAX CRUD: membuat, menghapus, mengedit record di database MySQL

Ponsel Terbang IQ451 Quattro

Windows mogok - apa yang harus dilakukan?