Vrlo često, na sajtovima sa puno sadržaja, posetilac se izgubi na stranici i mora da skroluje do samog vrha stranice da bi pronašao meni za navigaciju. Tehnologije ne miruju, ekrani monitora i njihove rezolucije postaju sve veći, pa sada na web stranici više nije šteta dodijeliti 40 piksela na vrhu za fiksni meni prilikom skrolovanja stranice. Posetilac će uvek moći da vidi u kojoj se sekciji nalazi, kao i da ima brz pristup meniju za navigaciju. Na kraju krajeva, ovo povećava dubinu pregledavanja stranice :)
Koja je suština fiksnog navigacijskog menija na web stranici? U početku se naš meni nalazi na svom uobičajenom mjestu, negdje u zaglavlju, u mom slučaju na udaljenosti od 140px od gornje ivice. Čim posjetitelj skroluje stranicu za tih istih 140px na dnu, meni se fiksira na samom vrhu prozora i ostaje tamo do kraja vremena dok se skrol ne vrati na gornju poziciju.
Fiksni meni prilikom pomeranja stranice je u suštini kontrolni panel koji je uvek sa vama. Naš meni će biti jednostavan.
Od teorije do prakse. Sve je prilično jednostavno i minimalistički, od čega je većina data stilovima koje možete prilagoditi sebi. Napravio sam fiksni meni kao na slici; kada se skroluje, boja menija postaje blago providna tako da ne izgleda težak i da se vidi sadržaj ispod.
Naši stilovi. Imam meni širine 1180px, koji se nalazi u sredini. Zaglavlje je visoko 180px, meni za pomicanje je uključen u njega i zauzima 40px. To znači udaljenost od vrha 140px. Zapamtimo ovaj broj)
#header (visina: 180px; ) #navigation(pozadina: #EF0505; visina: 40px; box-shadow: 0 2px 2px rgba(0, 0, 0, 0.4); font-size: 16px; line-height: 40px; pozicija: relativna; vrh: 140px; ) #navigation.fixed( pozicija: fiksna; vrh: 0; širina: 100%; pozadina: rgba(239, 5, 5, 0.95); ) #navigacija ul( širina: 1180px; padding -levo: 0; margina: 0 auto; prikaz: blok; ) #meni li( float: lijevo; stil liste: nema; padding: 0 25px; rub desno: 1px čvrst #D60000; ) #meni a ( boja: #fff; dekoracija teksta: nema; porodica fontova: Verdana; ) #menu>li a:hover( boja: #656565; prijelaz: boja 0,5 s lakoća; )
A evo nekoliko redova koda koji rade magiju) Postavili smo uslove za pomeranje stranice, iznad 140px ili ispod. U zavisnosti od toga, fiksna klasa se dodeljuje našem navigacionom meniju. I sa ovom klasom, kao što je gore navedeno, mi pravimo meni fiksiran i zakačen na vrh.
JQuery(function($) ( $(window).scroll(function())( if($(this).scrollTop()>140)( $("#navigation").addClass("fixed"); ) ostalo if ($(ovo).scrollTop()
Imajte na umu da ako postoje jednostruki navodniki u kodu zatvorenom u echo "" , oni će se morati izbjeći, tj. stavite obrnutu kosu crtu (\") ispred svakog od njih, naravno bez zagrada.
Općenito, ispalo je kako se ispostavilo. Morat ćete sami odlučiti kako to konkretno priložiti svojoj temi - kada imate vremena, čak je zabavno i "razbijati mozak". Hvala ti.
Sretno ti! Vidimo se uskoro na stranicama blog stranice
Možda ste zainteresovani
WebPoint PRO je responzivna WordPress tema sa širokom funkcionalnošću i kompetentnom tehničkom optimizacijom za pretraživače 
Share42 - skripta za dodavanje dugmadi i oznaka za društvene mreže na stranicu (postoji opcija plutajućeg panela)
Koji se sve češće nalaze na stranicama blogova i drugih resursa. Upotreba ovakvih navigacijskih traka je sasvim opravdana. Jedan od glavnih razloga za aktivno korištenje ovih jQuery dodataka je taj što je meni uvijek na dohvat ruke posjetitelja, čak i ako se nalazi na dnu stranice. Osim toga, fiksni meni zauzima malo prostora i ne odvlači pažnju sa glavnog sadržaja. Uopšteno govoreći, fiksni meni poboljšava upotrebljivost sajta.
Sastavio sam kolekciju najboljih, po mom mišljenju, besplatnih jQuery dodataka za implementaciju fiksnog menija. Pokušao sam osigurati da svaki od dodataka bude jedinstven na neki način, tako da se bilo koji dodatak iz odabira može koristiti posebno u vašem projektu. U kolekciji možete pronaći i jednostavne i složenije dodatke sa animacijom itd.
Ako vam je potreban vrlo jednostavan fiksni meni, nešto poput toga kako smo implementirali ljepljivi panel sa društvenim gumbima, možete bez jQuery dodataka, jer učitavanje stranice sa skriptama nije baš dobro, ali o tome ćemo govoriti u sljedećim člancima. Pretplatite se na naš kanal ili stranice kako ne biste propustili zanimljive materijale.
Dakle. Evo 6 jQuery dodataka za kreiranje fiksnog menija.
