Rögzített vízszintes menü

előző ◈ a következő

Tekintsük a következő két lehetőség:

  • azt jelenti, CSS: pozíció: rögzített kupak nélkül helyén,
  • érinteni érdekesebb megvalósítása, valamint a fejléc, amikor fix menü aktív tekercset, így neki mindig szem előtt, de ha a látogató visszatér a helyszínre fejlécet, akkor a menü „kerül a helyére.” Egy példa az ilyen megközelítés akkor megnézzük és Yandex.

Fix vízszintes menü CSS: összesen: fix.

Egyrészt, minden egyszerű és könnyen megoldható segítségével css két beszámoló:

Minta HTML layout rögzített vízszintes menü:

CSS elrendezés rögzített vízszintes menü:

Most határozzuk meg a behúzás az oldal tartalmának, egyenlő a magassága a menü:

És itt már „majdnem” minden kiderült. Menü a látogató „mindig a szem előtt.” De mi van, ha a tervezés egy sapka helyén, majd a menü is, és a fejlécben van a logó, site szlogen bannerek.

Nos, ki tudjuk javítani és honlap sapka francia tartalom megegyező magasságú sapka és menük közötti árrés őket.

Tehát vegyük azt az esetet, ha a menü „beszél” a fejléc, de ha a látogató aktívan görget a menüben a „fix” a tetején, és a helyén marad. Oldal sapka nem látható. Ha a látogató visszatér az oldal fejlécét, a menü „válik” a helyén „a fejléc az oldalon.”

Kezdeni privodem teljes HTML vorstku például egy oldal elrendezése:

A sablon oldalunkat áll, több jellemző területeken:

  • Kalap site - #header. magassága 150 képpont
  • vízszintes menü - # menu-top-szinte-fix - 30px magassága
  • a fő-page - #content,
  • pince helyén - #footer.

Adunk css vorstku:

Először is határozzuk meg a behúzás a kupakot, amíg a tartalma megegyezik a magassága Étlapunkon + egy kis bemélyedést mozgásteret esztétikai szépségét. #header . Mi fix Étlapunkon épphogy a kupakot: # menu-top-szinte-fix .

És most, mi gondoskodunk, hogy a lapozunk a „rögzített” menüben az oldal tetején pontosan.

A minta megvalósítása akkor nézd meg ezt a linket. és a görgető kerék.

Szóval, itt, minden egyszerű. A beállítások átadjuk a scriptet a következő paraméterekkel:

  • var m1 = 150; - magassága pixelben, kalapok,
  • var m2 = 2; - francia során, ha scroll sapka még nem látható,
  • var menuID = "menu-top-szinte-fix"; - id vízszintes, hogy biztosítsa a menü
  • var menuOpacityOnChange = "0,7"; - az átláthatóság a menü görgetés esetén:
    • 1 - átlátszatlan
    • 0.5 - áttetsző
    • 0.0 - teljesen átlátszó

Ebben a megvalósításban van egy kis „dallam” a menüből, ha hozzáadjuk a görgetés neki áttetszőség.

Azonnal felmerül a klasszikus változat, ha nem változik a menü átláthatóságot, de csak nem menü hordozó, mint a háttér, hogy a menü színét és áttetsző alsó határa (ahol a gradiens fokozatosan „mozog” átlátszatlan átlátszó szín):

Változás néhány CSS elrendezés a vízszintes fix menü:

Szóval, itt, minden egyszerű. A beállítások átadjuk a scriptet a következő paraméterekkel:

  • var m1 = 150; - magassága pixelben, kalapok,
  • var m2 = 0; - francia során, ha scroll kalap már nem látható.

Egy példa a kivitelezés, akkor láthatjuk, kattints erre a linkre. és a görgető kerék.

Menü működik, de ha az oldal újratöltődik, egy menü jelenik meg, az első francia

Ezzel a kérdéssel, akkor nyissa meg a menüt, miután egy egyszeri letöltési oldalon.

Ehhez változtassa meg a kódot, hogy hívja a funkció:

Az alábbi kód:

Miután az oldal betöltődik, azonnal hívja a funkció marginMenuTop. amely próbára teszi a menü helyét az oldalon, és alkalmazni kívánt stílust

Az általunk forgalmazott részben fix menüt jQuery plugint Afixx Twitter Bootstrap

További információk az internetes technológiákat megtalálható a lista az összes cikkek az oldalon:

Kapcsolódó cikkek

előző ◈ a következő