A rejtett menü tiszta css
Itt egy demo példája CodePen honlapján mutatja a végeredményt:
Kezdjük HTML
A jelölő a rejtett menü némileg eltér a verzió szabványos navigációs menü. Ahelyett, hogy a menü belsejében fejléc az oldal (header), akkor tedd a nyitást követően, body címke. Az alap szerkezete a következő:
Mint látható, a honlapunkon elrendezés három fő elemből áll: navigáció, checkbox (jelölőnégyzet) és párosított címke címke, valamint közvetlenül a webhely tartalmát. Itt meg kell jegyeznünk néhány pontot:
Particionálás navigációs kód található elsősorban azért, mert navigáció „mögött” van az összes többi elem a helyén. Létrehozásához a navigációs segítségével bármilyen HTML-címkéket. Ebben az esetben én a szokásos felsorolást.
A trigger a kiterjesztése a menü bemeneti címkét egyfajta négyzetet, és címke címke. Általában címke címkét, mielőtt a címke bemeneti vagy bemeneti tag csomagolva label tag. De ebben az esetben a bemenet tag, hogy közvetlenül a címke tag. És tovább, hozzátéve, CSS-stílusok, látni fogjuk, hogy miért.
Az összes többi elem a helyén kell csomagolni egy külön div tag. Ezt meg kell tenni annak érdekében, hogy ha kinyitja a többi menü tartalma mozogni le egy kicsit a szélén a képernyőn, hogy a rejtett elemeket navigációt.
Most, hogy megvan az alap HTML szerkezet, meg tudjuk venni a megjelenése a menüből!
CSS-stílusok menüpontok
Kezdjük hozzáadásával stílusok maga a menü és annak pont. Az első dolog, amit meg kell győződnie arról, hogy a menü egy tartalom oldal, és a helyén marad, ha a felhasználó görgeti az oldalt:
Ezután adtam hozzá néhány stílus a navigáción megjelenés vonzóbbá (háttérszín, határok, színátmenetek, stb.) Nem adom ezt a kódot, de láthatja, hogy pontosan hogyan csináltam a demo példa. Most van néhány szép menüpont, de általában ez nem egészséges, mert tartalmi található, közvetlenül a menüből. Adjunk hozzá egy kis stílus, hogy elrejtse a menüben, amíg a megfelelő pillanatban.
CSS-stílusokat az "wrapper" site
Kezdésként nézzük meg a tartalmát az oldal teljesen elrejti a menüben. Ebben a szakaszban, akkor adjunk hozzá egy pár bekezdések «Share:» a mi elem az osztály .site-pakolás, ha nem adunk semmilyen tartalmat.
Érdemes megjegyezni, hogy mi van szükség, adja meg a háttérben egy elemet .site-wrap az osztály, különben a menü jelenik meg a tartalomban. Akkor, persze, telepítse háttér, ami akar. Személy szerint, én a következő:
CSS-stílusok a menü Trigger
A következő lépés az, hogy adjunk stílusok változtatni a kinézetét a menü, amely kiváltja a szokásos négyzetet a klasszikus ikon „hamburger”, amelyet mindannyian ismerünk és szeretünk. Először is nézzük rejtőzhetik jelölőnégyzetet.
Tehát elrejteni négyzetet a levágás tulajdonság, amely előírja, ingatlan position: absolute egy adott elem. Most meg a stílus a címke elemek:
Régebben háttérképet beágyazott SVG elem. de használható bármely más ikont. beleértve a pszeudo-elemek: before és: after, hogy remake a „hamburger” ikonra tisztán CSS. Figyeljük meg, hogy én is egy olyan funkciót, a kurzor: pointer;, hogy vizuálisan jelölje ki az ikont, ha lebeg.
CSS-stílusok, hogy legyen aktív ravaszt
Most, amikor adott clearance Étlapunkon „csomagolás” a helyszínen, és a ravaszt, adjunk hozzá néhány sornyi CSS, végül mind működött.
A második rész a fenti mondatban stílusok garantálja számunkra, hogy a „csomagolást” az oldalon, és annak tartalmát fogják tolni 200 képpont. Azt is hozzá egy árnyék (ingatlan box-shadow) a „csomagolás” a helyén, ami így további értelme annak, amit ez a felső menüben.
Egy első választó (.nav reagált: ellenőrzött + címke) ellenőrzi a helyét a ravaszt, amikor megnyitja a menüt. Meg kell adnia a szám, amit korábban használt jelölésére [a = „nav-trigger”], hogy az érték, amely felelős milyen messze „wrapper” site elmozdulni. Ebben az esetben: 15 képpont + 200px = 215px.
Ez az, amikor fontossá válik az, hogy a elemek a ravaszt kódot. A második választó használ egy szimbólum
menedzsment kapcsolatos elemeket, hogy pont egy elem az osztály .site-pakolás, ha egy elemet egy osztály .nav reagált aktív lesz. Rangsor a bemeneti címkét egy típuskód négyzetet nem olyan fontos.
Azonban ki kell emelnünk, az elem .site-wrap osztály és a tag címke alapján, hogy mi lesz a négyzetet aktív-e vagy sem. Ehhez használjuk + (választó szomszédos elemek) jelzi a címke elem, amely követi az aktív négyzetet. Ha először jelzett tag címke, akkor nem lett volna esélye, hogy mozog, hogy együtt a „wrap” a helyszínen, amikor a trigger aktiválódik.
Mint egy utolsó érintés, mi is hozzá CSS-átmenet (átmeneti), és a ravaszt a „csomagolást” az oldalon, hogy a felfedezés Étlapunkon kíséretében sima animáció. Csak légy biztos, hogy a megadott a lehetőség, meg kell előtag az eladó verzióra, vagy használj valami hasonló Autoprefixer plugin.
végeredmény
Felülvizsgálat: Team webformyself.
A legtöbb IT hírek és webfejlesztés A csatorna-távirat