Legördülő menü css
működési elve
Kezdjük azzal, hogy érti az elvet a legördülő elemek, mi kell érteni egy egyszerű példát. Ahhoz, hogy egy egyszerű html-kódot:
és alkalmazza ezt a kódot, így stílusok:
A css elrejtettük a jogot a szöveg megváltoztatásával kijelző a display: none;. Ha az egérmutatót (: hover) .example_shown a szülő elem van utódeleme .example_hidden változik a látható kijelző típusa. Ezen elv szerint és a beépített legördülő menüt.
Készítsen legördülő menüből
Most zaymomsya végrehajtása a menüből. Mert az ő szervezete fogja használni a címkéket ul és li listák
Mint látható, a kód, a fő lista id = «menü», mi lesz felelős a látható részek a menü. A metszeteket rakjuk egy másik listát ul, amely egy legördülő linkeket, ha lebeg át a címet a menü részben. Most kell alkalmazni ezen elemekre a következő stílusok:
Ezekben stílusok, szeretnék összpontosítani négy dolgot:
- Ügyeljen arra, hogy ez a szimbólum #menu> li stílusokat. Azt jelzi, hogy a stílus nem alkalmazható valamennyi eleme li belsejében található ul # menüben, de csak azoknak, akik a közvetlen leszármazottja ul # menü tag.
- A menü pozicionálás szakaszok megváltozott helyzet: a relatív. Az a tény, hogy egy közönséges címke összesen: abszolút koordináta pozícionáló vezet gróf a bal felső sarokban a böngésző ablakot. De ha a tag van ágyazva a címkét position: relative, számolás hajtják végre a szög a címkét.
Így nem tudjuk lekötni a legördülő listák egyes vonatkozó koordinátákat az ablakon, és koordinálja tekintetében a részben a főmenübe. Tulajdonképpen fel: 20px és beállítja a függőleges eltolás a tetején a fő rész. - legfelső opciót #menu> li> ul meg kell egyeznie az összege paraméterek #menu> li, mint a magasság + padding-top + padding-bottom. Ebben az esetben az utolsó két paraméter nincs megadva, akkor az értéke öröklődik legelső stílust, és nullával egyenlő. Jelentése magasság = 20. Eszerint benyomódás- mi legördülő lista azonos a 20 + 0 + 0 = 20 képpont
- Amikor lefordítani a kurzort a lista a lehullott (#menu> li> ul> li), mindegyik li elem a lista kap egy hover esemény hover. Ebben az esetben, hogy be van ágyazva egy ul listán, amely viszont zárt #menu> li. hover esemény ezután át #menu> li> ul> li valamennyi szülő-tagnak, beleértve #menu> li. Emiatt ez a lista az összeomlás vissza, annak ellenére, hogy nem tartjuk a kurzort közvetlenül #menu> li.
következtetés
Legördülő listák - elég egy kényelmes módja, hogy tegyen egy nagy menü egy kis helyet. De ez a módszer nagy hátránya van: nem fog működni a mobil eszközök. Miért? Mert alapvetően nem lebeg fogalom. Van egy klikk a háború. De nem lebeg. Tehát ne felejtsd el ezeket a felhasználókat, és hogy azok külön menüben végrehajtását.