Számítógépek, Szoftver
Hogyan készítsünk egy legördülő menü CSS
Ma meg fogja vizsgálni a kérdést, „Hogyan lehet létrehozni egy legördülő menüt CSS?”. Meg kell mondani egyszer, hogy ez a tétel lesz csatlakoztatása nélkül semmilyen további források. Azaz, a menü jön létre csak a CSS és HTML.
edzés
Ahhoz, hogy megértsük, mi van benne a cikkben, akkor kell egy kicsit, hogy megismerjék az elméleti anyag. De ha már ismeri pszeudo-osztályokat, akkor kihagyhatja ezt a bekezdést. Tehát, hogy hozzon létre egy függőleges legördülő menük CSS, szükségünk van egy elem «: hover». Az ál «: hover» hozzárendelhető bármely HTML tag. Ez lehetővé teszi, hogy meghatározza a pillanat, amikor egy tétel Ha az egérrel. Például, már kijelölt tulajdonság: «a: hover {color: red;}». Ez a bejegyzés azt jelenti, hogy, ha lebeg a egér pirosra vált a tartalmát bármely tag . Érdemes megjegyezni, hogy ez a pszeudo-elem is inaktiválja. By the way, «: hover» még kapcsolódó hasonló elemeket. De ebből fogunk létrehozni ál CSS legördülő menüből.
oktatás
Először is, nézzük megérteni, mi a legördülő menüből. E definíció kap egy csomó más módszerek építésének különböző elrendezésben. Ebben az esetben mi elemzik a szerkezet, amely több állandóan látható elem és számos kiegészítő (rejtett). Fejezzük az elmélet és a gyakorlat kezd.
- Elkészítjük az elrendezés a menüben. Ehhez HTML-kód címkézés. Hozzon létre egy beágyazott lista:
-
- < / ul>. Valami ehhez hasonló kell kinéznie a legördülő menüből. CSS beavatkozni később. Ebben az esetben a fő listán három fő területen és két zárt.
- Elrejtése almenüben. Ehhez használjon egy stíluslapot, adjuk meg a következő tulajdonságokkal: ul ul {display: none;} Ez eltávolítja az elemek a második lista a képernyőn.
- Hozzon létre egy menü CSS, legördülő a fő listán. A lépcsőzetes stíluslapokat levelet a következő szabály: ul li: lebeg ul {display: block;}. Ez a bejegyzés azt jelenti, hogy ha az egérmutató az elem li, amely található ul lista jelenik meg a képernyőn ul (csatolva). Első pillantásra, egy ilyen rendszer tűnhet bonyolult és zavaros. Valójában azonban minden nagyon egyszerű.
- Használja ezt az elrendezést magát beiktatásával a címkék
- a tartalmat. Meg lehet változtatni a számát lista elemeinek.
dekoratív változások
Amint a főmenü elrendezése kész, akkor folytassa a regisztrációt. Valószínűleg sokan az első helyen hajlandó megszabadulni markerek a lista elem. Ezt használja egyetlen tulajdonság CSS, azaz a list-style-type. Meg kell adnia a következő bejegyzést: li {list-style-type: none;}. Ezután beteheti a keret, és a háttérben. A határ és a háttér segít ebben. Lehet, hogy néhány nem fog tetszeni a legördülő menü jelenik meg, mint egy további listát, nyomja meg az azonos alapvető elemei. Ennek kijavításához, akkor lehet azt elhelyezni. Ehhez a Cascading Style Sheets levelet a következő bejegyzést: ul ul {position: absolute; left: 15px; jobbra: 15px; top: 15px; alsó: 15px;}. Természetesen az értékeket fogja használni a saját. Attól függően, hogy hol szeretné látni a legördülő menük, CSS kínál még sok más funkciók, amelyek számos különböző hatással és díszítse a listákat.
következtetés
Ismét érdemes megjegyezni, az építőiparban a menü elrendezése. Rendelni a CSS-szabályok ebben az esetben használt beágyazott érték, például ul ul. Ha a dokumentumban, hogy találkozzanak más hasonló szerkezet, lehet nagy probléma. Ezekben az esetekben meg kell használni egy konkrét cél, például a szelektor vagy id-azonosítókat. A fenti cikk elrendezés legördülő menüből célja, hogy megismertesse az általános design. A többi munka nyugszik a vállán.
Similar articles
Trending Now