Hogyan készítsünk egy vízszintes legördülő menü egy oldal css

A legtöbb klasszikus helyek az interneten a vízszintes menü, mint a fő navigációs elem. Néha meg tud felelni a különböző kiegészítő chips - többszintű struktúra az al-ikonok, kereső, összetett listák, stb A közelmúltban, a blog már van egy kis válogatást az elegáns menü PSD. és most nézd meg négy esettanulmány, hogyan kell egy legördülő menü a CSS + HTML. Az információ hasznos a kezdő fejlesztők és azoknak, akik szeretnének változtatni a navigációs weboldalán.

A hálózat hiányzik különböző útmutatók a témában, akkor könnyen megtalálja őket a Google a kifejezést legördülő menüben (beleértve az opciókat egy függőleges legördülő menüben). Megvizsgáljuk csak vízszintes navigáció + alábbi lehetőségek nem lesz hozzákötve egyetlen CMS, ez a döntés a HTML + CSS. Az alábbiakban megpróbáltuk kiválasztani a leghasznosabb és kifinomult lehetőség az Ön számára. Mindegyikben talál néhány darabot, amely javíthatja a klasszikus vízszintes legördülő menüből. Azt is nézd példák burger menü CSS.

1. Horizontális legördülő menüt CSS3

Hogyan készítsünk egy vízszintes legördülő menü egy oldal css

1. lépés - HTML jelölőnyelv

2. lépés - Menükijelző

Távolítsuk el az extra párnázás a CSS-elemek a vízszintes legördülő menüből a honlapon. Ebben a szakaszban egy fix szélessége és magassága a menüpontok, és adjunk hozzá lekerekített sarkokkal.

3. lépés - Regisztráció linkek

Amellett, hogy az alapvető chipek stílusok (betűtípus, szín, magasság) segítségével az árnyék lehetőséget szöveges árnyék, és hozzon létre a zökkenőmentes átmenetet a szöveg színét, ha lebeg. Is hozzá a menü szeparátor, eltávolítjuk a határ az első elem a bal oldalon, és az utóbbi a jobb oldalon.

Mivel van egy hely a CSS legördülő menüben, akkor is meg a regisztrációs listája mellékleteket. Kezdetben tegye padding 40px 0px a felső és bal + Hozzáadott lekerekített sarkokkal. Megjelenítéséhez / elrejtéséhez almenü eredetileg az átláthatóságot a tulajdonság (fedőképesség) nullával egyenlő, és ha lebeg - egységét. Ahhoz, hogy megteremtse a hatása az al-menü lista értékét mutatja magassága nulla, és indukciós = 36px.

A szélessége a linkek beállítva = 100px, alján minden elemét az utolsó kivételével hozzáadjuk a border-alján. Továbbá, ha szükséges, akkor tegye a képeket a almenüelemekkel (Figyelmeztetés: Ne felejtsük el, hogy változtatni az utat, hogy a képeket a kódot a célra).

Én személy szerint szeretem az egyszerű végrehajtását és ikonok használata. Itt látható a végleges kód codepen:

2. Egyszerű CSS3 legördülő menüből

Hogyan készítsünk egy vízszintes legördülő menü egy oldal css

3. legördülő menüt egy kereső egységet

Hogyan készítsünk egy vízszintes legördülő menü egy oldal css

Navigálni, mint mindig, használj rendezetlen listát (a nav osztály). Normál menüpontok a lista elemeinek (li) és linkeket tartalmaznak (a href) nélkül osztályok és ID. Kivételt képeznek a 3 speciális eleme a vízszintes legördülő menüket az ID:

Szintén a kódot, hogy prefixfree script használata CSS tulajdonságok nélkül előtagokat. A végleges változat a HTML az előugró menü:

1. Alapvető stílusok és menüpontok

Először adja meg a betűtípus Montserrat, amely sötétszürke háttérrel, és egy fix magasságot a menüpontok. Minden elemnek van egy szintező float: left és relatív pozícionálás, így később is hozzá lehet almenü position: absolute;

A stílus fogja találni háromszög be egy háttérképet (triangle.png) utal az almenü - ne felejtsük el, hogy a helyes utat ezen és egyéb képek a példa. Advent almenü valósul az ingatlan fényelnyelés. A végső döntést codepen:

4. Multi-level legördülő menü CSS

Hogyan készítsünk egy vízszintes legördülő menü egy oldal css

Általában egy jó és egyszerű példát. Nem fogjuk részletesen leírják a végrehajtási folyamat, mert ez hasonló a korábbi - először hozzon létre egy HTML keretben, majd fokozatosan hozzá stílust is. A végleges változat letölthető link a forrás, részben meg lehet nézni Codepen:

Mi négy lehetőséggel, hogyan kell egy legördülő menü a CSS + HTML, bár hasonló példákat a neten sokkal több. Vannak megoldások jQuery, de ez valószínűleg csak hasznos lehet a végrehajtása néhány speciális effektusok és a nem szabványos feladatokat. A legtöbb esetben elegendő CSS ínszalag + HTML, annál is inkább, hogy most a legfontosabb követelmények a menü - könnyű és gyors letöltési sebességet.

Mint a bejegyzést? Feliratkozás a blog frissítéseket RSS. E-mail vagy a Twitter.