Tiszta menüstílus a css3-mal
Tiszta stílus menü a CSS3 segítségével
Így türelemmel és kiságyakkal felfegyverkezve (akiknek szüksége van rá), a halott kód "kitöltésével" kezdődünk, élő és dinamikus navigációs menüt hozunk létre. Kezdjük, mint mindig a Html-ben, a menük legegyszerűbb listáját.
HTML jelölés
Amint láthatjuk, a jelölés egyszerűen csak a szégyentetés pillanatáig néz ki, egy elemi rendezetlen lista formájában. Életbe lélegezni és vonzani a listát, a CSS 3 "varázsa" használatával fogunk élni, vagy pontosabban a lépcsőzetes stílusok táblázatainak paramétereit fogjuk dolgozni. Az id = "main-navigation" lista hozzárendelésével a listához. és az első elem class = "first", és már a css-ben is, akkor felderítjük a jövőbeli menüünk alakját, színét és funkcionalitását.
CSS3 elrendezés
A menü tervezésekor a lekerekített sarkok határ-sugarát és a lineáris gradiens funkciót használjuk, hosszú ideig nem, és a kedvenc Operahárom a 11. verziótól kezdve végül bekapcsolta a gradiens támogatást. Nos, IEshka is felbukkan, és nem marad el a testvérek mögött, még ha nem is egy speciális szűrő nélkül.
Miután mindent megtettél, kiváló eredményt érhetsz el a kipufogógázban, és így fog kinézni:
Minden rendben volt. Az első példában, amikor a menüpont fölé mutat, a standard aláhúzást használtuk. Némileg bonyolítsuk a stílust, távolítsuk el az aláhúzás linkeket, és adjunk hozzá egy gyönyörű hatást. Erősen nem leszünk bölcsek, hanem egyszerűen változtatjuk meg a gradiens irányát abban a pillanatban, amikor a mutatót a menüpontra mutatjuk:
Végül teljesen más típusú aktív navigációs elemeket kapunk:
Biztosan észrevette, hogy a menü első tétele, amikor fölé húzza, nem megfelelően jelenik meg, a sarkok bal oldala egyenesen jelenik meg, ami nem jó az általános kép szimmetriájához. Helyesbíteni a helyzetet nem lesz nehezebb, ezért érdemes néhány módosítást hozzáadni az osztályhoz. amelyet kifejezetten az első bekezdéshez készítettek.
Nem csináltunk semmit természetellenesnek, csak hozzáadtuk a határ-sugár funkciót a felső és a bal alsó sarokban. Ha mindent helyesen teszel (egyébként nem lehet), akkor csodálatos, könnyű és legfontosabb funkciókat kell használni a navigációs menüben:
Ez minden, kedves barátaim, merem csendben remélem, hogy az eredmény, amit elégedett leszel. És ha hirtelen valaki módosítani szeretné a menüt, nagyon gyors, kísérletezi a stílus paramétereit, elérheti bármelyik legszebb és elképzelhetetlen eredményt. Nem vagyok belefájni annak megismételésére, hogy a jövőben az új szabványok és teljesítmény technikák a webfejlesztés, megpróbálom továbbra is megismertetni Önt a csodálatos találatok és megoldások web design. A következő alkalommal megmondom, hogy a felesleges és szükséges gesztusok nélkül gyorsan felvehet egy keresősávot a WordPress navigációs menüjébe.
Az anyagot előkészítették, lefordították és szem előtt tartották, a fejlesztéseken alapulva, valószínűleg egy tiszteletre méltó polgár: a Bavota San
Hálás lennék, ha támogatnád a projektet - hozzáadhatsz egy blogot az AdBlock kivételekhez, és megoszthatsz egy linket a közösségi hálózatokban szereplő bejegyzéshez: