Hogyan készítsünk egy vízszintes menü honlapján
Klasszikus eszköz oldalon navigáció egy vízszintes menü a fejlécben. Lássuk, hogyan lehet egy egyszerű vízszintes menü HTML és CSS.
Egyszerű HTML menü
Értelmében a menü egy lista szakaszok a helyszínen, így logikus, hogy a fenti címke menüvel ul - a felsorolás. Ezen túlmenően, HTML5 van egy új tag, hogy kell használni, hogy olvassa el a navigációs terület a helyszínen - nav. Ezeknek a használata a két tag lehetővé pontosabb kereső szerkezetének megértéséhez, a honlapon.
Példaként, hogy a menü 4 példány: Home, cikkek, szolgáltatások és Contacts. Így a HTML kódot Étlapunkon fog kinézni:
Ha nav csak akkor kell használni a fő vízszintes menü, meg tudod csinálni anélkül, hogy a osztály és minden stílus segítségével írják le nav referenciaként választó. De én megmutatom néhány menüpont, így a hozzáadott hmenuA osztályban. így akkor lehet alkalmazni a különböző stílusok különböző menüpontok. A levél A végén az osztályba, mert nem lesz több lehetőség a B és C
Eddig a menü meglehetősen eltérően a vízszintes. Úgy néz ki, mint ez:
Az első lista a zsetont kell távolítani, és az extra padding:
Az elemek listáját használjuk inline-block mód:
Ez a mód azt jelenti, hogy a „külső” elemek a lista úgy kezelik, mint egy kis elemek, azaz a akkor húzza egy sorban. Belül, akkor továbbra is blokkolja elemekkel. Kiderült a vízszintes menüsorban:
Lásd a rések között az elemek a menü? Ez nem a francia, a szöveg és a valós terek. Úgy adódott, hogy a HTML-kód osztották több van, és „üres” karakter menük között böngésző értelmezni közötti terek „szavak”. Ezt a funkciót akkor kell figyelembe venni, amikor a inline-block módban.
Elvileg ezek a hiányosságok nem igazán zavarja. De ha vannak vorstke menü be kell állítani a pontos távolságot padding között menüpontok, vagy nyomja meg a menüpontok egymás nélkül padding, hiányosságok akadályozzák minket. Ezért, amikor vorstke vízszintes panelek inline-block-én úgy döntött, hogy távolítsa el az összes felesleges terek. Én fix menü HTML kódot, így a címkék nem volt felesleges szóközöket. Olvasni a kódot normális maradt, tettem sortörés tag, a záró csúcsos zárójel. Itt van egy kód, amelyet:
Most a terek eltűntek:
Ne félj, hogy a menüelemek összevontuk. Most adjunk hozzá egy kevés díszítéssel, minden lesz sokkal szebb:
text-align: center segítségével beállítható a menü az oldalon. Így azt jelezték, hogy a menüpontok kell tekinteni, mint egy kis elemenity után fedésbe segítségével text-align.
Menü magasság Megkérdeztem, jelezve a line-height. Ez a módszer lehetővé teszi, hogy egyszerre állítja a magassága a blokk és a szöveget függőlegesre a közepén a blokk.
Egy tag, azt is kérte a megjelenítési módot: blokk. tesz említést, amelyen akkor Nada, a teljes téglalap menüpont, nem csak egy kis területet a szöveget.
Hogyan fog viselkedni Étlapunkon csökkenésével szélessége az oldal? Csökkentse a böngésző ablak szélessége, így a menü már nem fér bele. Mi folyik itt? Menü egy kétsoros egyetlen stanovistya. (Vagy még három- és chetyrohstrochnym, ha teszik a böngésző ablakot nem keskeny.)
Ha nem szeretnénk, hogy egy multi-line menüben van, hogy korlátozza a minimális szélessége az oldalt, válassza ki a megfelelő értéket min-width a body tag.
Adjunk hozzá egy kis animáció. A legegyszerűbb lehetőség -, hogy hangsúlyozzák a menüpontok az egérrel. De olyan egyszerű, aláhúzás - ez elég unalmas, csináljuk, hogy jelennek meg, és fokozatosan eltűnik.
Hozzáadás a stílusok a következők:
Egy másik változata az animáció:
Lássuk néhány lehetőséget, hogyan lehet rendezni a menüt. Minden korlátozott, csak a képzelet.
Menü lapos gombokkal
menüpont lapos gombok és a megjelenése szegélye kiemelve:
Menü megkönnyebbülten szeparátorok
Manipulálása színhatárait találkozásánál a menüpontok, akkor érheti el a megjelenése egy pszeudo-mentesség vonalon. Egy hasonló menüt használjuk a fejlécben az oldalon.
Animált menük képaláírásokkal
Szép menü feliratok jelennek meg, ha lebeg az egér: