Egyre több helyen találkozni az úgynevezett sticky (ragadós) menüvel, ez annyit jelent, hogy amint lefelé görgetés közben elérünk a navigációs menüig, akkor az fixen megragad a böngészőnk tetején, ezáltal folyamatosan szem előtt marad. Ez egyrészt jól néz ki és modern, másrészt pedig hasznos is, mert egy hosszabb szöveg olvasása esetén nem kell minden alkalommal visszagörgetnünk a weblap tetejére, hanem könnyedén tudunk navigálni az aktuális pozíciótól függetlenül, hiszen a menünk mindig látható marad. Élő példáért nem is kell messzire menni, elég csak megnézni a WPSzaki főoldalát. Kis görgetés után a menü fixen a böngésző tetején marad.
WordPress esetén igen sok prémium és ingyenes sablon alkalmazza beépítetten ezt a megoldást, de mi van akkor, ha a miénk éppen nem? Nos, ekkor sem kell kétségbe esni, ugyanis ebben a cikkben bemutatok egy egyszerű kis bővítményt, amivel bármelyik hétköznapi sablon menüjéből sticky menüt faraghatunk. Ez pedig nem más, mint a “Sticky Menu (or Anything!) on Scroll“.
Telepítés és aktiválás után a “Beállítások / Sticky Menu (or Anything!)” almenüben találjuk a beállításait. Szerencsére elég csak egy paramétert megadnunk és máris átalakul a menüsorunk. A piros csillaggal jelölt “Sticky Element” mellett található mezőbe kell beírnunk a menünket tartalmazó HTML elem CSS azonosítóját vagy osztályát (class (.) vagy ID (#). Ez sokaknak ismeretlen terep, de ennek kiderítése egyáltalán nem bonyolult dolog. Erre azért van szükség, mert ez alapján fogja tudni a bővítmény, hogy mit is kell majd a böngésző tetejére “ragasztania” görgetéskor. Természetesen ebből fakad, hogy nem csak menüt, hanem bármit “stickysíthetünk” a segítségével.
Minden nagyobb böngészőben megtalálható a beépített fejlesztői eszköztár, ami alapértelmezetten az F12 gomb megnyomásával hozható elő (Firefox alatt ajánlott a FireBug kiegészítő használata). Itt strukturáltan és élőben követhetjük végig a weboldal HTML és CSS szerkezetét. A megfelelő helyre navigálva pedig könnyedén kideríthető, hogy mi is a menüt tartalmazó HTML elem kódja (például: #main-navigation, .main-menu, header, nav, stb). Ha a megfelelő azonosítót adtuk meg, akkor a beállítások mentése és a főoldal újratöltése után már működnie is kell a ragadós menüknek. Ha ez nem így lenne, akkor valószínűleg nem a jó azonosítót adtuk meg, tehát tovább kell kutakodni és próbálkozni.
A “Space between top of page and sticky element” mellett megadhatjuk, hogy mennyi helyet szeretnénk hagyni a weboldal teteje és a sticky menünk között. Alapértelmezetten nem szükséges bántani. A “Check For Admin Toolbar”-t érdemes bepipálva hagyni, így belépett felhasználók esetén is jól jelenik majd meg a sticky menü és nem rondít bele az alapértelmezetten felülre rögzített WordPress admin menü. A legalsó két beállításnál pedig megadhatunk egy minimum és maximum felbontást ami alatt/felett nem aktiválódik a sticky funkció. Az “Advanced Settings” fül alatt a haladó beállításokat találjuk, itt a z-index megadására is van lehetőség, ezt csak akkor piszkáljuk, ha tudjuk mit csinálunk és ha a menüpontok például nem kattinthatók vagy a menünk nem látható, esetleg egymásra lógnak az elemek.
