A CSS legördülő menüjének létrehozása

Ma megfontoljuk a "Hogyanhozzon létre egy legördülő CSS-menüt? ". Azt kell mondani, hogy ezt az elemet további eszközök összekapcsolása nélkül fogják megtenni. Ez azt jelenti, hogy a menü csak CSS és HTML formátumú.

Ahhoz, hogy teljesen megértsük, miről beszélünkcikket, meg kell ismerkedned az elméleti anyaggal. De ha ismeri az ál-osztályokat, kihagyhatja ezt a bekezdést. Tehát egy függőleges CSS legördülő menü létrehozásához olyan elemre van szükségünk, mint a ": lebeg". Egy pszeudosztály "hover" lehet hozzárendelve bármely HTML taghez. Lehetővé teszi annak meghatározását, hogy egy egérmutató mikor mutat egy elemet. Például hozzárendeltünk egy tulajdonságot: "a: hover {color: red;}". Ez a bejegyzés azt jelenti, hogy bármelyik <a> címke felett lebegnek, annak tartalma pirosra vált. Érdemes megjegyezni, hogy ez az ál-osztály még mindig inaktív elemet jelent. Egyébként a ": hover" hasonló elemeket tartalmaz. De ez az ál-osztály, hogy létrehozunk egy legördülő CSS menüt.

oktatás

Először is érdemes megérteni, mi alkotjalegördülő menüből. E meghatározás szerint számos különböző technika létezik a különböző makettek felépítéséhez. Ebben az esetben szétszereljük egy olyan konstrukciót, amely több állandóan látható tételből és több további (rejtett) elemből áll. Fejezzük be az elméletet, és menjünk le a gyakorlatba.

Hozzon létre egy menü elrendezését. Ehhez a HTML-jelölést készítjük. Hozzon létre egy beágyazott lista: <ul> <li> </ li> <li> <ul> <li> </ li> <li> </ li> </ ul> </ li> <li> </ li> < / ul>. Ez úgy néz ki, mint a legördülő menü. A CSS egy kicsit később lép működésbe. Ebben az esetben a fő listán három fő területen és két zárt.
A további menü elrejtése. Ehhez stíluslapokat használunk, definiáljuk a következő tulajdonságot: ul ul {display: none;} Ez eltávolítja a második lista elemeit a képernyőn.
Hozzon létre egy CSS-t a CSS-ben, kilépve a főbőllistát. A lépcsőzetes stíluslapokban a következő szabályt írjuk: ul li: hover ul {display: blokk;}. Ez a bejegyzés azt jelenti, hogy amikor az egeret az ul elem fölé illesztjük az ul elemre, az ul (beágyazott) jelenik meg a képernyőn. Első pillantásra egy ilyen rendszer túl bonyolultnak és zavarosnak tűnhet. De valójában minden nagyon egyszerű.
Használja ezt az elrendezést, a tartalmat a <li> címkék közé helyezze. Megváltoztathatja a listán szereplő elemek számát.

Dekoratív változások

Amint a főmenü elrendezése elkészült, megtehetifolytassa a tervezést. Valószínűleg sokan elsősorban meg szeretnék szabadulni a jelölőktől, amelyek a lista elemét jelölik. Ez egy CSS tulajdonság használatával történik, nevezetesen a list-style típusúak. Ezt a bejegyzést hozzá kell adni: li {list-style-type: none;}. Ezután beilleszthet egy keretet és készíthet hátteret. A határ és a háttér tulajdonságai segítenek Önnek. Talán néhány nem fog tetszeni, hogy a legördülő menü kiegészítő listaként jelenik meg, miközben a fő elemeket bővíti. Ennek megjavításához helyezze el. Ehhez a kaszkád stíluslapban írja be a következő bejegyzést: ul ul {pozíció: abszolút; balra: 15px; jobb: 15px; top: 15px; alsó: 15px;}. Természetesen az Ön által használt értékek. Attól függően, hogy hová szeretné látni a legördülő menüt, a CSS számos további tulajdonságot kínál, amelyek különböző hatásokat adhatnak hozzá, és díszíthetik listáinkat.

következtetés

Még egyszer érdemes megemlíteni a menü elrendezésének kialakítását. Ebben az esetben a CSS szabályok hozzárendeléséhez egymásba ágyazott értékeket használhat, például ul ul. Ha más hasonló tervek vannak a dokumentumban, akkor nagy problémák adódhatnak. Ezekben a helyzetekben konkrétabb célokat kell használni, például szelektort vagy id-azonosítókat. A cikk legördülő menüjének elrendezése az általános tervezéshez való ismerkedésre szolgál. A munka többi része a vállán van.