Vrlo često, na stranicama s puno sadržaja, posjetitelj se izgubi na stranici i da bi pronašao navigacijski izbornik, mora skrolati do samog vrha stranice. Tehnologije ne miruju, zasloni monitora i njihove razlučivosti postaju sve veći, tako da sada više nije šteta dodijeliti 40 piksela na vrhu za fiksni izbornik prilikom pomicanja stranice stranice. Posjetitelj će uvijek moći vidjeti u kojem se dijelu nalazi, kao i imati brzi pristup navigacijskom izborniku. Na kraju, ovo povećava dubinu pregledavanja stranice :)
Što je suština fiksnog navigacijskog izbornika na stranici? U početku je naš izbornik na svom uobičajenom mjestu, negdje u zaglavlju, u mom slučaju na udaljenosti od 140px od gornjeg ruba. Čim posjetitelj pomakne stranicu do tih 140px ispod, izbornik se fiksira na samom vrhu prozora i tamo ostaje do kraja vremena dok se pomicanje ponovno ne vrati na gornju poziciju.
Fiksni izbornik prilikom listanja po stranici je u biti upravljačka ploča koja je uvijek s vama. Naš jelovnik bit će jednostavan.
Od teorije do prakse. Sve je prilično jednostavno i minimalističko, većinom kada se daju stilovi koje već prilagođavate sebi. Napravio sam fiksni meni kao na slici, kod skrolanja boja menija postane malo prozirna da ne izgleda teško i vidi se sadržaj ispod njega.
Naši stilovi. Imam izbornik širine 1180px, centriran. Zaglavlje je visoko 180px, izbornik koji se može pomicati je uključen i zauzima 40px. Dakle, udaljenost od vrha 140 px. zapamti ovaj broj)
#zaglavlje (visina: 180px; ) #navigacija( pozadina: #EF0505; visina: 40px; sjena okvira: 0 2px 2px rgba(0, 0, 0, 0.4); veličina fonta: 16px; visina linije: 40px; pozicija: relativna; vrh: 140px; ) #navigation.fixed( pozicija: fiksna; vrh: 0; širina: 100%; pozadina: rgba(239, 5, 5, 0.95); ) #navigation ul( širina: 1180px; padding -lijevo: 0; margina: 0 auto; prikaz: blok; ) #menu li( float: lijevo; list-style: none; padding: 0 25px; border-desno: 1px solid #D60000; ) #menu a ( boja: #fff; tekstualni ukras: ništa; obitelj-fontova: Verdana; ) #menu>li a:hover( boja: #656565; prijelaz: lakoća boje 0,5 s; )
I evo nekoliko redaka koda koji čine magiju) Postavljamo uvjete za pomicanje stranice, iznad 140px ili niže. Ovisno o tome, dodjeljuje se fiksna klasa za naš navigacijski izbornik. I s ovom klasom, kao što je gore spomenuto, činimo jelovnik fiksiranim i pričvršćenim na vrh.
jQuery(function($) ( $(window).scroll(function()( if($(this).scrollTop()>140)( $("#navigation").addClass("fixed"); ) else if ($(ovo).scrollTop()
Imajte na umu da ako postoje jednostruki navodnici u kodu priloženom u echo "" , tada će se morati izbjeći, tj. ispred svakog od njih dodajte obrnutu kosu crtu (\") bez zagrada, naravno.
Općenito, ispalo je kako se dogodilo. Kako to konkretno vezati za svoju temu, morat ćete sami odlučiti - kad ima vremena, čak je i cool "razbiti glavu". Hvala vam.
Sretno ti! Vidimo se uskoro na stranicama bloga
Možda će vas zanimati
WebPoint PRO je responzivna WordPress tema sa širokom funkcionalnošću i kompetentnom tehničkom optimizacijom za tražilice 
Share42 - skripta za dodavanje gumba društvenih mreža i oznaka na web mjesto (postoji opcija plutajuće ploče)
Koji se sve češće nalaze na stranicama blogova i drugih izvora. Korištenje takvih navigacijskih traka potpuno je opravdano. Jedan od glavnih razloga za aktivno korištenje ovih jQuery dodataka je taj što je izbornik uvijek pri ruci posjetitelju, čak i ako se nalazi na dnu stranice. Osim toga, fiksni izbornik zauzima malo prostora i ne odvlači pozornost od glavnog sadržaja. Općenito govoreći, fiksni izbornik poboljšava upotrebljivost stranice.
Sastavio sam kolekciju najboljih, po mom mišljenju, besplatnih jQuery dodataka s fiksnim izbornikom. Potrudio sam se da svaki od dodataka bude nešto jedinstveno, tako da bilo koji dodatak iz selekcije možete primijeniti upravo u svom projektu. U zbirci možete pronaći i jednostavne i složenije dodatke s animacijom itd.
Ako trebate vrlo jednostavan fiksni izbornik, nešto poput onoga kako smo implementirali ljepljivu ploču s društvenim gumbima, možete bez jQuery dodataka, jer učitavanje stranice skriptama nije baš dobro, ali o tome ćemo govoriti u sljedećim člancima. Pretplatite se na naš kanal ili na stranice u, kako ne biste propustili zanimljive materijale.
Tako. Vašoj pozornosti 6 jQuery dodataka za stvaranje fiksnog izbornika.
