Navigációs menü: ragadós fejléc, zsugorodó fejléc és elrejtés görgetéskor

A ragadós menü görgetés közben is a képernyő tetején marad, így a főbb linkek, a keresés és a gombok mindig elérhetők. A Navigációs menü widgetben egyetlen kapcsolóval bekapcsolod, kód nélkül. A funkció Pro: az ingyenes Navigation Menu Lite widgetben nincsenek rögzítési beállítások.

Mi kell hozzá

• A Navigation Menu widget bekapcsolva a The Plus Addons → Widgets oldalon.
• Egy fejlécsablon, amelybe a widgetet teszed, hogy a menü minden oldalon megjelenjen.
• Egy WordPress-menü a Megjelenés → Menük alatt, ha az Alapértelmezett menütípust használod.

Ragadós menü bekapcsolása

1. Tedd a Navigációs menü widgetet a fejlécsablonba, ugyanabba a tárolóba, ahol a logó és a gombok vannak. Válaszd ki a Menütípust, a Menü irányát és a menüt.
2. A Tartalom → Extra opciók szakaszban kapcsold be a Rögzített menü beállítást.

https://minta-bolt.hu/wp-admin/post.php?post=38&action=elementor

A képen a Rögzített menü be van kapcsolva, alatta a Rögzített menü felfelé görgetéskor kapcsoló látszik.

3. Tedd közzé az oldalt, és görgess. A fejléc a tetején marad.

https://minta-bolt.hu/tp-kn5-ragados/

A képen az oldal már legörgetve áll, a menüsor mégis a tetején látszik.

Mit rögzít a kapcsoló és mikor:

• A Rögzített menü a widgetet tartalmazó tárolót (vagy régi szakaszt) rögzíti, nem csak magát a widgetet. A tároló minden eleme vele ragad, ezért a logót és a gombokat is ugyanabba a tárolóba tedd.
• Régi szakaszoknál a külső szakasz ragad, akkor is, ha a widget belső szakaszban van. Tárolóknál a legközelebbi tároló ragad: ha a widget egy másik tárolóban lévő tárolóban áll, csak a belső ragad.
• A fejléc akkor kezd ragadni, amint az oldal túlgörög a tároló tetején. Az oldal tetején álló fejlécnél ez az első görgetés.
• Az eredeti helyén ugyanolyan magas helyfoglaló marad, így az alatta lévő tartalom nem ugrik.

Megjelenítés csak felfelé görgetéskor

1. Kapcsold be a Rögzített menü felfelé görgetéskor beállítást közvetlenül a Rögzített menü alatt. A beállítás csak bekapcsolt Rögzített menü esetén látszik.
2. Adj a fejlécnek hátteret: a Stílus → Rögzített főmenü → Szakasz háttérbeállításai alatt, vagy a tárolón. Háttér nélkül az oldal átlátszik, miközben a fejléc csúszik.
3. Tedd közzé az oldalt, és görgess.

https://minta-bolt.hu/tp-kn5-elrejt/

A képen az oldal legörgetve áll, és a fejléc nincs a képernyőn: lefelé görgetéskor elbújik, felfelé görgetéskor visszacsúszik.

• Pár képpontnyi görgetést figyelmen kívül hagy, így apró mozdulatoknál nem villog a fejléc.
• A Rögzített menü ennél is a tárolót rögzíti, tehát a logó és a gombok is vele mozognak.

A fejléc ugrál vagy félúton megáll. Egyedi CSS vagy másik bővítmény is mozgatja a fejlécet (pozíció, transzformáció vagy saját ragadós beállítás). Távolítsd el, és kapcsold ki az Elementor saját Ragadós/Mozgáshatások beállítását ugyanezen a tárolón.

Más elemek a fejléc fölött görögnek. Emeld meg a fejléctároló Z-indexét a Haladó fülön.

A rögzített fejléc stílusa

A Rögzített menü bekapcsolása két szakaszt ad a Stílus fülhöz. Beállításaik csak akkor érvényesek, amikor a fejléc rögzített.

https://minta-bolt.hu/wp-admin/post.php?post=38&action=elementor

A képen a Rögzített főmenü szakasz látszik: a Külső padding, a Belső padding, a Tipográfia, a színek, a Szakasz háttérbeállításai és a Rögzített padding.

Szakasz	Beállítások
Rögzített főmenü	Külső padding és Belső padding, jelző és Normál / Rámutatás / Aktív színek; Szakasz háttérbeállításai Normál és Tapadó fülön, mindkettőn Háttérszűrő; Rögzített padding; Rögzített szélesség, Felül, Konténer igazítása, Keretsugár és Dobozárnyék
Rögzített mobilmenü	A mobilmenü színei és a Túlcsordulás görgetése

A Túlcsordulás görgetése hosszú mobilmenünél segít: a rögzített fejléc is görgethető lesz a Mobilmenü megnyitása szélességén és keskenyebben.

A rögzített szín sosem jelenik meg. Ha a fejléctárolónak saját háttere van (tároló → Stílus → háttér), az felülírja a widget Tapadó fülét. Töröld, és a normál színt a Stílus → Rögzített főmenü → Szakasz háttérbeállításai → Normál alatt add meg.

Egy hosszú mobilmenü nem görgethető. Kapcsold be a Stílus → Rögzített mobilmenü → Túlcsordulás görgetése beállítást.

Fejléc háttere: színváltás, átlátszóság és üveghatás

A rögzített fejléc háttere a Stílus → Rögzített főmenü → Szakasz háttérbeállításai szakaszban állítható. Két fül van: a Normál a fejlécet mutatja, amíg az oldal tetején áll, a Tapadó pedig azt, amikor már ragad. Mindhárom hatás ugyanebből a két fülből jön létre, kód nélkül.

https://minta-bolt.hu/wp-admin/post.php?post=62&action=elementor

A képen a Normál és Tapadó fül, alattuk a Háttér típusa, a Szín, a Kép és a Háttérszűrő látszik.

Közös előfeltételek mindhárom hatáshoz:

• A Tartalom → Extra opciók szakaszban be van kapcsolva a Rögzített menü.
• A fejléctárolónak nincs saját háttere. Ha a tároló Stílus fülén van háttér, az mindig felülírja a widget Tapadó fülét, és a rögzített szín soha nem jelenik meg. Töröld a tároló hátterét, és a fejléc normál színét a widgetben, a Normál fülön add meg.
• A szerkesztő nem úgy görgeti az oldalt, mint egy látogató, ezért a hatásokat a közzétett oldalon nézd meg.
• A hatások csak a Pro Navigációs menü widgetben vannak meg, az ingyenes Lite widgetben nincsenek rögzítési beállítások.

Szín váltása görgetéskor

A fejléc az oldal tetején egy színű, ragadás után másik színű lesz. Így olvasható marad minden szakasz fölött.

1. Kapcsold be a Rögzített menü beállítást, és vedd le a tároló saját hátterét.
2. A Szakasz háttérbeállításai alatt a Normál fülön állítsd a Háttér típusa értékét Klasszikusra, és válaszd ki a fejléc színét.
3. Nyisd meg a Tapadó fület, állítsd a Háttér típusa értékét Klasszikusra (vagy Színátmenetre), és válassz egy másik színt.
4. Ha a szöveg az új háttéren nehezen olvasható, a Rögzített főmenü szakasz felső részén a Normál, Rámutatás és Aktív fül színeit módosítsd. Ezek akkor érvényesek, amikor a fejléc rögzített, a Főmenü szakasz színei pedig addig, amíg még nem ragad.
5. Tedd közzé az oldalt, és görgess.

https://minta-bolt.hu/tp-kn6-szin/

A képen az oldal legörgetve áll: a fejléc sötétkék lett, a menüpontok pedig fehérek.

Korlátok: a logó nem cserélődik magától, a cseréjét a Webhely logója fejezet írja le. Ha a háttér változik, de a szöveg nem, a színeket a Rögzített főmenü szakasz Normál / Rámutatás / Aktív fülén állítsd, ne a Főmenü szakaszban.

Átlátszó ragadós fejléc

Az átlátszó fejléc a tetején marad, a tartalom pedig halványan átlátszik rajta. Képes oldalakhoz illik.

1. Kapcsold be a Rögzített menü beállítást, és vedd le a tároló saját hátterét.
2. A Normál fülön add meg a fejléc normál színét.
3. A Tapadó fülön állítsd a Háttér típusa értékét Klasszikusra, és válassz színt.
4. A színválasztóban csökkentsd az átlátszatlanságot, például 50 és 70 százalék közé. Minél alacsonyabb, annál több látszik át az oldalból.
5. Állítsd be olvasható szövegszínt a Rögzített főmenü szakasz Normál, Rámutatás és Aktív fülén.
6. Tedd közzé az oldalt, és görgess.

https://minta-bolt.hu/tp-kn6-atlatszo/

A képen a fejléc félig átlátszó, a mögötte elhaladó szöveg átüt rajta.

• Ha a színt a Normál fülön állítod át, a fejléc már ragadás előtt átlátszó lesz. Az átlátszó színt a Tapadó fülre tedd.
• Zsúfolt tartalom fölött a menüszöveg nehezen olvasható. Ilyenkor adj hozzá elmosást, lásd a következő részt.

Üveghatású ragadós fejléc

Az üveghatású fejléc a mögötte görgő tartalmat elmossa, mint a matt üveg. Két beállítás kell hozzá: átlátszó szín és elmosás.

1. Állítsd be az átlátszó színt a Tapadó fülön, ahogy az előző részben: Klasszikus háttér, a szín átlátszatlansága kb. 50 és 60 százalék között.
2. Ugyanezen a fülön kattints a Háttérszűrő melletti ceruzára.
3. Az Elmosás értékét állítsd 8 és 12 képpont közé: ez adja a jól látható üveghatást. Az alatta lévő Szürkeárnyalatos a fejléc alatt átlátszó színeket színtelenné teszi.
4. Tedd közzé az oldalt, és görgess.

https://minta-bolt.hu/tp-kn6-uveg/

A képen a fejléc fölső sávjában a mögötte elhaladó szöveg már elmosódott, nem olvasható.

• Az elmosás csak átlátszó színnel látszik. Teljesen átlátszatlan színnel nem látod a hatást.
• Az elmosás csak mozgalmas tartalom fölött látványos, sima háttéren olyan, mint egy átlátszó fejléc.
• Az elmosást és az átlátszó színt a Tapadó fülön állítsd, mert a Normál fülön a fejléc már ragadás előtt üveges lenne.

Nincs elmosás. Nézd meg, hogy az Elmosás értéke nagyobb-e nullánál, a szín átlátszatlansága kisebb-e 100 százaléknál, és hogy mindkettő a Tapadó fülön van-e.

A fejléc tömör marad. A tároló saját háttere (tároló → Stílus → háttér) felülírja a widget Tapadó fülét. Töröld, és a normál színt a Normál fülön add meg.

Zsugorodó fejléc

A zsugorodó fejléc görgetéskor alacsonyabb lesz, így olvasás közben kevesebb helyet foglal, a menü mégis kéznél marad. A hatást úgy éred el, hogy a rögzített fejlécnek kisebb a paddingje, mint a normálnak.

Rögzített állapotban a widget a Stílus → Rögzített főmenü beállításait használja a normálak helyett. Kettő szabályozza a magasságot:

Beállítás	Mit paddingol
Belső padding	Minden főmenü-linket
Rögzített padding	A teljes fejléctárolót

1. Építsd meg a fejlécet a Navigációs menü widgettel, a logóval és a gombokkal azonos tárolóban.
2. A Tartalom → Extra opciók szakaszban kapcsold be a Rögzített menü beállítást.
3. A Stílus → Rögzített főmenü szakaszban a Belső padding felső és alsó értéke legyen kisebb, mint a Stílus → Főmenü → Belső padding értéke.
4. Nagyobb változáshoz állítsd a Rögzített padding értékét (lejjebb, a Szakasz háttérbeállításai alatt) a tároló saját paddingjénél kisebbre.
5. Adj a fejlécnek hátteret, hogy az oldal ne látsszon át, miközben zsugorodik.
6. Tedd közzé az oldalt, és görgess: a fejléc rövidebb lesz, ahogy rögzül.

Korlátok:

• Egy nagy logó magasan tartja a fejlécet. A padding csak az elemek körüli helyet csökkenti. Kisebb logóhoz rögzített állapotban lásd a Webhely logója fejezet ragadós logóját.
• A szerkesztő nem görgeti az oldalt úgy, mint egy látogató. A ragadós hatásokat a közzétett oldalon nézd meg.

A fejléc nem zsugorodik. Nézd meg, hogy a Rögzített menü be van-e kapcsolva az éles fejlécsablonban lévő widgeten, és hogy a rögzített Belső padding tényleg kisebb-e a Főmenü értékénél.

A fejléc ugrál vagy villog, amikor visszagörgetek a tetejére. Kapcsold ki az ugyanazon a tárolón lévő más görgetési hatásokat (Elementor Mozgáshatások, másik ragadós beállítás), és próbáld újra.