Hozzon létre egy dinamikus és animált menü
LPgenerator - Profi Céloldal Platform növelni értékesítését a vállalkozás
SHOP Landing EGYETEM részvényeket a PARTNERS
Bizonyára láttad egyes weboldalakon dinamikus és animált menük, amelyek megváltoztatják lefelé görgetve. Minimalizálása a fő navigációs menü, akkor hagyjuk több hely tartalmat. Ebben a leckében fogjuk magyarázni, hogyan lehet létrehozni saját menü segítségével HTML5, CSS3 és egy kis jQuery.
Számos módja van erre. Ebben a leckében fogjuk magyarázni, hogyan lehet létrehozni egy fix menü oldal teljes szélességét, hogy változik a magasság mentén a logó, ami minimálisra csökkenti a kezdeti változata az eredeti. Ha szükséges, akkor is cserélje ki a logó egy másik lehetőség, mint a kezdőbetűit vagy ikon, de ne feledje, hogy a következetesség nagyon fontos itt, hogy a felhasználó más, mint egy elem megváltozott, és hogy fő célja továbbra is a eligazodást.
Létrehozása alapvető szerkezetét a HTML5
Kezdjük létrehozásával alap HTML kódot, amire szükségünk van. Kezdjük azzal, hogy mi fog ragaszkodni egy nagyon egyszerű HTML5 szerkezetét.
Most, amikor az eredeti HTML kód van írva, akkor adjuk hozzá a kódot a menüt, valamint néhány egyéb tárgyak a header file HTML.
Mivel itt nincs semmilyen tartalom,
És ez mind része a HTML. Most arra van szükség, hogy stílus elemeit a CSS, és egy menü dinamikus.
Styling menük és oldalak
Ha menteni szeretné ezt a kódot egyetlen fájlban, akkor létre CSS
. Így minden a CSS lesz a záró címke előtt .
A CSS-t, hogy étlapunkon 960 képpontos széles középen, a szervezet Étlapunkon jobbra és balra a logó. Mi is import Amaranth font Google Web Fonts, hogy használni, hogy a szöveget az oldalon.
Itt, csak hogy az oldal szakaszon provokálni görgetés (scroll), és az elhelyezése a szöveg jelzi a kezdetét és végét, a tartalom.
Itt fejezzük be az alapvető stílusa címünket.
Dinamikusan változik a menü méretét
Étlapunkon készül és stílusban, de még mindig akar dolgozni a minimalizálás. Ahhoz, hogy létrehozza ezt a „status”, akkor hozzon létre egy új osztályt
Tehát, mint látható, ezek a stílusok szinte megegyeznek a legtöbb menük, csak megváltozott az osztály a „nagy” és „kis” és módosítsa az értékeket, hogy mi használt a kisebbeket. Az általunk használt negatív margin-top a képre központosítani az edénybe, mert a kép egy vékony árnyék, és magasabb, mint az írást annak tartozékait. Most, hogy megvan az összes szükséges stílust szabni a menü átméretezés, és ha megpróbál változtatni a
A menü osztály jQuery
Ha a felhasználó görgetni több mint 100 képpont, akkor az osztály «nagy» akkor el kell távolítani, amelyet azért hoztunk létre, és hozzáadjuk az új osztály a «kis». Így a menü fog változni méretben, ahogy már korábban meghatározott CSS. Próbáld ki, ez alkalommal már meg kellett dolgozni, de előfordulhat, hogy az átmenetek az osztályok között, úgy tűnik, hogy nagyon éles.
CSS átmeneteket animáció menü
Annak érdekében, hogy zökkenőmentesen válthat osztályok Étlapunkon fogjuk használni CSS átmeneteket. Csak használja ezt a kódrészletet mellett a többi a CSS.
Itt meg egy átmenet minden CSS tulajdonságok és
LPgenerator - Profi Céloldal Platform növelni értékesítését a vállalkozás
kapcsolódó bejegyzések
FIGYELEM! Ön egy elavult böngészőt használ Internet Explorer
Ez a weboldal épül a fejlett, korszerű technológiák és nem támogatja az Internet Explorer a második és a hetedik változat.
