Egyszerű és látványos legördülő menüből CSS3 és jQuery
Nagyon gyakran megtalálható a sablonok legördülő navigációs elemeket. A fejlesztők ezt a fajta, hogy megjelenítse a rejtett menü további rejtett linkeket, tematikusan kapcsolódik a fő szempont. Megtalálható példákat fly-out panelek és menük a stílus egy harmonika, ami végrehajtja ezt az elvet a navigációt.
Először építünk alap HTML5 sablon. Szükség van a legújabb verzióját jQuery. jutunk el API Google. Is hozzá a stílusok styles.css fájlt. amelyet az alábbiakban ismertetjük:
Most nézzük a szerkezet, amelynek alapja egy rendezetlen listája az oldal tetején. A teljes lista kerül a HTML5 elem
A szerkezet a kód nagyon egyszerű. Minden elem a lista tartalmazza a szelekciós hatás, ha az egérmutató van benne. Minden belső UL elem tartalmazza az eredeti lista elemet, így a hangsúly nem vész, ha mozog a tételek legördülő menüből.
stílusok navigáció
Egy stíluslap értékeket tartalmaz alaphelyzetbe kód alapértelmezett tulajdonságait. Sok fejlesztő közé fájlt Eric Meye. de a mi esetünkben ez túl nehézkes. Ezen túlmenően, a kód van tárolva egy másik szerveren, ami már önmagában is egy rossz döntés ebben az esetben.
A kód van egy érdekes tulajdonsága -webkit-font-simítás. Célja, hogy kisimítja a betűtípus, ha a kód fut a böngésző fut a Mac OS X vagy iOS.
Most viszont, hogy a menü is.
Hozzáadása #ddmenu ul választó kiválasztására minden belső elem a lista egyes elemeire, hiszen fontos számukra, hogy meghatározzák a távolságot abszolút pozicionálás. Szintén hozzá a lineáris átmenet valamennyi kapcsolatokat, amelyek jelenik meg, ha lebeg felettük.
Most vizsgálják meg a felső elem mutatót. Ez alkotja az ingatlan forgatás és univerzális keretes sötét háttér árnyékban. A helymeghatározás offset egyik eleme a szerkezet van elhelyezve a másik felett, és létrehoz egy képi ábrázolása a mutatót a legördülő menüből.
A második rész a kód követ az összes mágikus cselekvés. Mi hozzá egy eseménykezelő feldolgozni egéráthúzáskor a listaelemet. A felvezető megáll az aktív animáció és megjelenik egy új bekezdés alkalmazásával .slideDown (). Azt is meg egy rövid késleltetés válaszolni csak a tényleges választást.
Által nyújtott információk útján két csatorna (látás és hallás) a képzés hatékonyságának sokkal jobb tanulás könyvekből. A házi feladatok és online tesztek lehetővé teszi, hogy folyamatosan úgy gondolja, a célnyelven, és azonnal ellenőrizze tudását!
Ha azt szeretnénk, hosszú ideig, hogy tanulmányozzák, hogyan lehet HTML-t, akkor engem, mert van jó hír!
Ha már megtanulta a HTML és tovább szeretne lépni, a következő lépés az lesz, hogy tanulmányozza a CSS technológiával.
Ha azt szeretnénk, hogy megértsék a fogalmak domain és tárhely, megtanulják, hogyan kell létrehozni egy adatbázist, feltölteni a fájlokat a honlapon keresztül FTP szerver, hozzon létre aldomain konfigurálja a postaládákat a helyszínen, és ellenőrzi a részvétel, a tanfolyam kifejezetten az Ön számára!