Weboldal készítésekor gyakran kell szem előtt tartani a vízszintes menüt, amely az oldal fő navigációját tartalmazza. A vízszintes menü „rögzítésének” módja kényelmes a látogató szempontjából, akinek „mindig kéznél van a navigáció”, függetlenül attól, hogy mennyire forgatja le vagy fel a kereket.

A vízszintes menü rögzítése CSS-sel: position:fixed

Egyrészt minden egyszerű és gyorsan megoldható CSS ​​használatával. Példa egy rögzített vízszintes menü HTML-elrendezésére:

• itthon
• hírek
• Kapcsolatok
• Keresés

[oldal tartalma] [webhely lábléce]

Rögzített vízszintes menü CSS-elrendezése:

# menu-top-majdnem fix (pozíció: rögzített; felül: 10 képpont; bal: 0; magasság: 30 képpont; szélesség: 100%; margó: 0; )

Most állítsuk be az oldaltartalom behúzását a menü magasságával:

#content ( margó felső: 30 képpont; )

És most „majdnem” sikerült. Az étlap mindig látható a látogató számára. De mit tegyünk, ha a dizájnunkban van egy webhely fejléc, ezt követi maga a menü, a fejlécben pedig logó, oldal mottója és bannerek.

Nos, a webhely fejlécét javíthatjuk úgy, hogy a tartalom behúzását egyenlő magasságba tesszük a fejléc és a menü magasságával, valamint a köztük lévő behúzással. De felmerül egy probléma. Jelentősen korlátozzuk látogatóink megtekintési területét az oldal tartalmának megtekintéséhez. A kupak elhagyásának lehetősége egyáltalán nem felel meg nekünk.

Vízszintes menü javítása javascript segítségével

Nézzük tehát azt a lehetőséget, amikor a menü „elmegy” az oldal fejléce mögé, de ha a látogató aktívan lefelé görget, a menü felül „rögzül”, és a helyén marad. A webhely fejléce nem látható. Ha a látogató visszatér az oldal fejlécéhez, a menü „lekerül” a helyére „a webhely fejléce mögé”. Kezdésként itt van egy példaoldalelrendezés teljes HTML-elrendezése:

Weboldal logó Honlap szlogen Banner

• itthon
• hírek
• Kapcsolatok
• Keresés

[oldal tartalma] [webhely lábléce]

Weboldalunk sablonja több jellemző területből áll:

• webhely fejlécek – #fejléc, magassága 150 képpont
• vízszintes menü - #menu-top-majdnem javítva- magasság 30 képpont,
• az oldal fő információs területe – #tartalom,
• webhely lábléce - #lábléc.

Íme a CSS elrendezés:

#menu-top-almost-fixed( pozíció: rögzített; margó: 0; bal: 0; felső: 150 képpont; magasság: 30 képpont; ) #header( kijelző: blokk; magasság: 150 képpont; túlcsordulás: rejtett; pozíció: relatív; margó -bottom: 55px; ) #menu-top-almost-fixed ul, #menu-top-almost-fixed li( lista-stílus: nincs; margó: 0; kitöltés: 0; ) #menu-top-majdnem-fix ul ( kijelző: blokk; szövegigazítás: középre; szélesség: 100%; lebegés: balra ; szöveg igazítása: középre; )

Először is állítsunk be egy behúzást a fejlécből a tartalomba, amely megegyezik a menünk magasságával + egy kis behúzással margóval az esztétikai szépség érdekében. #fejléc ( margó-alsó: 55 képpont; ) . Javítsuk ki a menünket közvetlenül a fejléc mögött: #menu-top-almost-fixed( pozíció: fix; margó: 0; bal: 0; felső: 150px; magasság: 30px; ) .

Most győződjünk meg arról, hogy görgetéskor a menü pontosan az oldal tetején „rögzül”. Tegyük a következő javascriptet és közé:

Javascript:

var m1 = 150; /* fejléc magassága képpontban */ var m2 = 2; /* behúzás, ha a fejléc már nem látható görgetés közben */ var menuID = "menu-top-almost-fixed"; /* a vízszintes menü azonosítója a rögzítéshez */ var menuOpacityOnChange = "0,7"; /* menü átlátszósága görgetéskor: 1 - átlátszatlan, 0,5 - áttetsző 0,0 - teljesen átlátszó */ var menuOpacityOnChangeIE = menuOpacityOnChange * 100; /* függvény a dokumentum tetejétől a görgető aktuális pozíciójáig terjedő behúzás böngészők közötti meghatározásához */ függvény getScrollTop() ( var scrOfY = 0; if(typeof(window.pageYOffset) == "szám" ) ( //Netscape-kompatibilis scrOfY = window.pageYOffset ; ) else if(document.body && (document.body.scrollLeft || document.body.scrollTop)) ( //DOM-kompatibilis scrOfY = document.body.scrollTop; ) else if(document.documentElement && (document.documentElement. scrollLeft || document.documentElement.scrollTop)) ( //IE6 Strict scrOfY = document.documentElement.scrollTop; ) return scrOfY; ) /* függvény, amely beállítja a lebegő felső kitöltést rögzített vízszintes menü a görgető pozíciójától és a láthatóság fejlécétől függően */ függvény marginMenuTop() ( var top = getScrollTop(); var s = document.getElementById(menuID); if(typeof s != "undefined" && s)( if (top +m2< m1) { s.style.top = (m1-top) + "px"; s.style.filter = s.style.filter.replace("progid:DXImageTransform.Microsoft.Alpha(opacity="+menuOpacityOnChangeIE+")",""); s.style.opacity = "1"; } else { s.style.top = m2 + "px"; s.style.opacity = menuOpacityOnChange; s.style.filter = s.style.filter.replace("progid:DXImageTransform.Microsoft.Alpha(opacity="+menuOpacityOnChangeIE+")",""); s.style.filter += "progid:DXImageTransform.Microsoft.Alpha(opacity="+menuOpacityOnChangeIE+")"; } } } /** функция регистрирует вычисление позиции «плавающего» меню при прокрутке страницы **/ function setMenuPosition(){ if(typeof window.addEventListener != "undefined"){ window.addEventListener("scroll", marginMenuTop, false); } else if(typeof window.attachEvent != "undefined"){ window. attachEvent("onscroll", marginMenuTop); } marginMenuTop(); } /** регистрируем вызов необходимых функций после загрузки страницы **/ if(typeof window.addEventListener != "undefined"){ window.addEventListener("load", setMenuPosition, false); } else if(typeof window.attachEvent != "undefined"){ window. attachEvent("onload", setMenuPosition); }

A megvalósításra egy példát láthat, ha követi ezt a hivatkozást, és használja a görgőt. Szóval itt minden egyszerű. A beállításokban a következő paramétereket adjuk át a szkriptnek:

• var m1 = 150; - fejléc magassága pixelben,
• var m2 = 2; - behúzás, ha a fejléc már nem látható görgetés közben,
• var menuID = "menu-top-majdnem javítva"; - a rögzítendő vízszintes menü azonosítója,
• var menuOpacityOnChange = "0,7"; - menü átlátszósága görgetés közben:
  • 1 - átlátszatlan
  • 0,5 – áttetsző
  • 0,0 - teljesen átlátszó

Ebben a verzióban kicsit „hangoltuk” az étlapunkat, görgetéskor pedig áttetszőt adunk hozzá. Rögtön felvetődik egy klasszikusabb lehetőség, amikor nem a menü átlátszóságát változtatjuk meg, hanem egyszerűen hátteret készítünk a menühöz háttér formájában a menü színével és egy alsó áttetsző szegéllyel (amiben a színátmenet simán „átmenet ” átlátszatlan színről átlátszóra):

Változtassunk egy kis CSS-elrendezést a vízszintes rögzített menüben:

#menu-top-almost-fixed(pozíció: rögzített; margó: 0; bal: 0; felső: 150px; magasság: 30px; háttér: url(./images/white-gradient-l.png) bal alsó ismétlés-x ;)

Most adjuk meg a módosított javascript kódot, amelyet és közé fogunk helyezni:

Javascript:

var m1 = 150; /* fejléc magassága képpontban */ var m2 = 0; /* behúzás, ha a fejléc már nem látható görgetés közben */ var menuID = "menu-top-almost-fixed"; /* függvény a dokumentum tetejétől a görgető aktuális pozíciójáig terjedő behúzás böngészők közötti meghatározásához */ függvény getScrollTop() ( var scrOfY = 0; if(typeof(window.pageYOffset) == "szám" ) ( //Netscape-kompatibilis scrOfY = window.pageYOffset ; ) else if(document.body && (document.body.scrollLeft || document.body.scrollTop)) ( //DOM-kompatibilis scrOfY = document.body.scrollTop; ) else if(document.documentElement && (document.documentElement. scrollLeft || document.documentElement.scrollTop)) ( //IE6 Strict scrOfY = document.documentElement.scrollTop; ) return scrOfY; ) /* függvény, amely beállítja a lebegő felső kitöltést rögzített vízszintes menü a görgető pozíciójától és a láthatóság fejlécétől függően */ függvény marginMenuTop() ( var top = getScrollTop(); var s = document.getElementById(menuID); if(typeof s != "undefined" && s)( if (top +m2< m1) { s.style.top = (m1-top) + "px"; } else { s.style.top = m2 + "px"; } } } /** функция регистрирует вычисление позиции «плавающего» меню при прокрутке страницы **/ function setMenuPosition(){ if(typeof window.addEventListener != "undefined"){ window.addEventListener("scroll", marginMenuTop, false); } else if(typeof window.attachEvent != "undefined"){ window. attachEvent("onscroll", marginMenuTop); } } /** регистрируем вызов необходимых функций после загрузки страницы **/ if(typeof window.addEventListener != "undefined"){ window.addEventListener("load", setMenuPosition, false); } else if(typeof window.attachEvent != "undefined"){ window. attachEvent("onload", setMenuPosition); }

Szóval itt minden egyszerű. A beállításokban a következő paramétereket adjuk át a szkriptnek:

• var m1 = 150; - fejléc magassága pixelben,
• var m2 = 0; - behúzás, ha a fejléc már nem látható görgetés közben.

A menü jól működik, de ha újra betölti az oldalt, a menü az első behúzással jelenik meg

Ha ilyen probléma adódik, az oldal egyszeri betöltése után fel kell hívnia a menüt. Ehhez módosítsa a függvényhívás kódját a következőről:

Függvény setMenuPosition())( if(typeof window.addEventListener != "undefined")( window.addEventListener("scroll", marginMenuTop, false); ) else if(typeof window.attachEvent != "undefined")( window. attachEvent ( "onscroll", marginMenuTop); ) );

A következő kódra:

Függvény setMenuPosition())( if(typeof window.addEventListener != "undefined")( window.addEventListener("scroll", marginMenuTop, false); ) else if(typeof window.attachEvent != "undefined")( window. attachEvent ( "onscroll", marginMenuTop); ) marginMenuTop(); );

Az oldal betöltése után azonnal meghívjuk a marginMenuTop függvényünket, amely ellenőrzi a menü pozícióját az oldalon és alkalmazza a kívánt stílust

Részben rögzített menü megvalósítása a Twitter Bootstrap Afixx jQuery bővítményével

Ennek a témának a folytatásaként egy cikket írtunk Önnek egy szinte fix menü megvalósításáról a Twitter Bootstrap keretrendszer jQuery Affix bővítményével.

Amelyek egyre gyakrabban találhatók meg a blogok és egyéb források oldalain. Az ilyen navigációs sávok használata meglehetősen indokolt. A jQuery bővítmények aktív használatának egyik fő oka az, hogy a menü mindig a látogató keze ügyében van, még akkor is, ha az oldal alján található. Ezenkívül egy rögzített menü kevés helyet foglal el, és nem vonja el a figyelmet a fő tartalomról. Általánosságban elmondható, hogy a rögzített menü javítja az oldal használhatóságát.
Összeállítottam egy gyűjteményt a legjobb, véleményem szerint ingyenes jQuery bővítményekből a rögzített menü megvalósításához. Megpróbáltam gondoskodni arról, hogy mindegyik plugin valamilyen módon egyedi legyen, hogy a kiválasztott pluginokat kifejezetten az Ön projektjében lehessen használni. A gyűjteményben egyszerű és bonyolultabb, animációval ellátott pluginokat egyaránt találhatunk, stb.
Ha egy nagyon egyszerű fix menüre van szükségünk, például hogyan implementáltunk egy tapadós panelt közösségi gombokkal, akkor a jQuery bővítmények nélkül is megtehetjük, mert az oldal szkriptekkel való betöltése nem túl jó, de erről a következő cikkekben fogunk beszélni. Iratkozzon fel csatornánkra vagy oldalainkra, hogy ne maradjon le érdekes anyagokról.
Így. Íme 6 jQuery beépülő modul egy rögzített menü létrehozásához.

A Sticky HeaderjQuery fix navigációs bővítményének automatikus elrejtése, amely hasonló elven működik, mint a fenti szkript, de kevésbé sima, bár első pillantásra egy kicsit könnyebb. Sajnos nem mondhatom, hogy a navigáció teljesen adaptív, hiszen a kis képernyőkön a menüpontok csak számokká válnak, ami nagyon furcsa.

On Scroll Header EffectsErőteljes jQuery bővítmény a rögzített navigációs sávhoz. Görgetés közben beállíthatunk bizonyos szegmenseket az oldalon, melyek elérésekor a panel átalakul és teljesen megváltoztathatja a megjelenését. Egy oldalon tetszőleges számú ilyen szegmens lehet.

On-scroll animált fejléc Jó beépülő modul egy ragadós navigációs sáv megvalósításához. Ez így működik: az oldal legelején egy magas fejlécet látunk, amely a logót és a menüt tartalmazza. Görgetéskor a fejléc területe az összes elemmel, beleértve az emblémát és a navigációt is, simán csökken a tulajdonságok használatával, és a képernyő tetejére ragadt keskeny sáv lesz.

Feladat

Állítsa be a blokkelem pozícióját úgy, hogy az oldal görgetése során mindig ugyanazon a helyen maradjon.

Megoldás

Egy elem „lefagyasztása” egy adott helyen a weboldalon a stílus tulajdonság pozíciójával történik, rögzített értékkel. Ebben az esetben az elem pozíciója nem változik akkor sem, ha görgetéssel görgeti az oldalt. Magukat a koordinátákat a bal , jobb , felső és alsó tulajdonságok határozzák meg, amelyek rendre meghatározzák a pozíciót a böngészőablak bal, jobb, felső és alsó szélétől (1. példa).

1. példa: Pozíció használata

HTML5 CSS 2.1 IE Cr Op Sa Fx

Rögzített menü .menu ( pozíció: rögzített; /* Rögzített pozíció */ jobbra: 10 képpont; /* Távolság a böngészőablak jobb szélétől */ teteje: 20%; /* Távolság felülről */ kitöltés: 10 képpont; /* Margók szöveg körül * / háttér: #ffe; /* Háttérkép

Ennek a példának az eredménye az ábrán látható. 1. Kérjük, vegye figyelembe, hogy az elem pozíciója nem változik, amikor lefelé görget az oldalon.

Mostanában divat lett egy trend: oldallapozáskor fix menü. Általában ez egy vízszintes menü a céloldal webhelyein.

Ez úgy működik, hogy az oldal betöltésekor a menü az oldalon egy bizonyos helyen (például a „fejléc” alatt) található, az oldal görgetésekor pedig a böngészőablak tetején rögzül, ill. nem gördül, mint a többi tartalom.

Ha a látogató felfelé görget az oldalon és az oldal elejére ér, a menü visszatér a helyére. Így a látogató, bárhol az oldalon, használhatja azt, és az oldal más oldalaira léphet. Ez nagyon kényelmes, és megfelel a használhatósági elveknek.

Most elmondom, hogyan kell egy ilyen menüt megvalósítani úgy, hogy minimális időt tölt el, anélkül, hogy szakemberek segítségét kérné.

Először is csatlakoztatnunk kell a webhely jQuery könyvtárát

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

Csatlakozhat helyben vagy a Google-on keresztül.

A helyi csatlakozáshoz le kell töltenie a jQuery fájlt a hivatalos webhelyről: http://jquery.com/

CSS

JavaScript

A szkriptben 2 változót hozunk létre, amelyekben elmentjük a fejléc magasságának és a blokk behúzásának értékeit a tetején lévő menüvel. Lehetséges, hogy nincs behúzás (mint ebben az esetben). Ezután írunk egy kezelőt az ablak objektum onScroll eseményéhez. Ebben a scrollTop() metódussal kiszámoljuk az oldal tetejétől a görgető aktuális pozíciójáig mért távolságot. A számítás alapján a blokkot a menüvel pozícionáljuk.

Ez minden, az egyszerű megoldásoknak köszönhetően gyönyörű, rögzített menüt érhet el, amely nem gördül át, amikor a webhely fő részét görgeti.

Tekintsünk egy szkriptet, amely lehetővé teszi egy rögzített menü megvalósítását egy webhelyen. A szkript fejlesztésének koncepciója egy programozási nyelvet is tartalmaz JQuery, hiszen vele nem csak az étlapot lehet rendbe tenni, mint általában az ingatlannál css javítva, de az oldal felfelé görgetésénél is garantáltan megmarad a fejlécből a behúzás, amit a fájlba írhatsz js. Sőt, ez a technológia ideális a rögzített menükhöz, mind az alsó, mind a felső részhez.

A szkript böngészők közötti kompatibilitásának ellenőrzése után azt találtuk, hogy minden új verzión tökéletesen működik, de a böngészővel problémák vannak internet böngésző korábbi, mint a 9-es verzió, de nincs itt semmi meglepő, ez jellemző a régi böngészőkre.

Remélem már régóta használod az újakat.

Első rész. A stílusok összekapcsolása és js fájlokat.

Először csatlakoztassuk az összes szükséges stílust a szabványnak megfelelően, és adjunk hozzá fájlokat js, amelyek ehhez a szkripthez szükségesek. Először a stílusfájlt adjuk hozzá demo.css.

Ezután összekapcsoljuk a könyvtárat jquery-latest.min.jsés a menu.js fájl, amely a menüben található behúzások és illesztések működéséért, valamint a magasságban megadott kezdeti helyes pozícióért lesz felelős.

Második rész. Fájl index.php.

Itt minden egyszerű, a menüt a szabvány via szerint jelenítjük meg ulliés a héjat blokk elemmé tegye div, amelynek azonosítója lesz menü, teljes mértékben együttműködik a stílusokkal és a fájlokkal menü.js.

Ru/news/">Hírek

a projektről

A harmadik rész. Fájl demo.css.

Térjünk át a fix menüstílusokra, és írjuk le azokat a főbb tulajdonságokat, amelyeknek kötelezőnek kell lenniük! Először is regisztrálunk az azonosítóhoz menü: háttér, helyzet és szélesség. Másodszor, az egészet középre igazítjuk, és beállítjuk a magasságot.

#menü ( háttér:#ab4040; szélesség:100%; pozíció:fix; ) #menu ul( margó:0 auto; szélesség:750px; magasság:40px; )

Ezután az egyes menüelemekkel, vagy inkább linkekkel dolgozunk, és a következő tulajdonságokat rendeljük hozzájuk.

Az egyes lebegő tulajdonságok, keretek stb. csak a szépséget szolgálják, és nem kötelezőek.

#menu ul li ( lebegés:bal; listastílus:nincs; szélesség:140px; text-align:center; border-right:1px inset #d0d0d0; height:40px; ) .menuleft( border-left:1px inset #d0d0d0 ; ) #menu ul li a (vonalmagasság:40px; szövegdekoráció:nincs; szín:#ffffff; ) #menu ul li:hover(box-shadow:0 1px 0 #ab4040; background:#f43e3e; )

Negyedik rész. Fájl menü.js.

Most megvan a legérdekesebb rész. Étlapunkat azon a szinten javítjuk, ahol szükségünk van rá. Írjuk fel a változót menü_magasság, amelyben az oldalunk fejlécének magasságát fogjuk tárolni. Ez lehetővé teszi, hogy az oldal görgetése során pontosan rögzítse a menüt a kívánt távolságra a webhely fejlécétől. Változóban elem, tároljuk az id tulajdonságokat menü ésállítsa be az ingatlant tetejére, jelezve, hogy a menü felül lesz, és összehasonlítjuk a változóval menu_top, számítsa ki a szükséges távolságot a fejléctől a menüig.