Suckerfish legördülő menü kódjának elemzése
CSS Guruk segítségét kérem az alábbi kérdésben:
A http://htmldog.com/articles/suckerfish/dropdowns/example/# oldalon látható többszintes CSS menü az általam látott legjobb megoldás a témában.
Muszáj megértenem a működését, egyrészt mert érdekel, másrészt nem tudom szolgalélekkel lemásolni (konkrétan: ennek a fentinek minden fő- és almenüpontja kötelezően fix szélességű, az enyémnél jó lenne ha ez nem lenne követelmény)
Az érdekelne (minden más tekintetben értem a CSS megoldását), hogy szerintetek azt a fontos jelenséget (amelyet mások megoldásai kikerülnek), hogy a :hover után a megjelenő almenü fölé elmozdított egér (vagyis már nincs :hover) ellenére a szülő elem is :hover állapotban marad, mivel éri el az adott CSS.
Más szempontból: melyik elem melyik CSS ficsörének a hozadéka ez a számomra fontos és reprodukálandó jelenség?
Köszönettel:
teamtom
■ A http://htmldog.com/articles/suckerfish/dropdowns/example/# oldalon látható többszintes CSS menü az általam látott legjobb megoldás a témában.
Muszáj megértenem a működését, egyrészt mert érdekel, másrészt nem tudom szolgalélekkel lemásolni (konkrétan: ennek a fentinek minden fő- és almenüpontja kötelezően fix szélességű, az enyémnél jó lenne ha ez nem lenne követelmény)
Az érdekelne (minden más tekintetben értem a CSS megoldását), hogy szerintetek azt a fontos jelenséget (amelyet mások megoldásai kikerülnek), hogy a :hover után a megjelenő almenü fölé elmozdított egér (vagyis már nincs :hover) ellenére a szülő elem is :hover állapotban marad, mivel éri el az adott CSS.
Más szempontból: melyik elem melyik CSS ficsörének a hozadéka ez a számomra fontos és reprodukálandó jelenség?
Köszönettel:
teamtom
Pure CSS
http://www.alistapart.com/articles/dropdowns
Régen olvastam már ezt a cikket, de most gyorsan átfutva is kiderült, hogy csak azokban a böngészőkben működik, amelyek a :hover pszeudo osztályt "ismerik".
Tehát az IE-hez szükség van egy kis Javascript kódra, hogy működjön.
Viszont itt egy "tiszta" CSS menü:
http://www.meyerweb.com/eric/css/edge/menus/demo.html
viszont, mint a szerző írja, ez sem működik az IE-ben :-). Viszont a karakteres böngészők, mint listát fogják megjeleníteni, tehát no problem :-).
Tomek73
félreértetted
egy li:hover a főmenuben megváltoztatja a főmenüpont háttérszínét ha föléviszem az egeret és megjeleníti az almenüt
ha lefelé mozdítom az egeret az almenüre, a főmenüben lévő li már nincs hover állapotban, mégis marad a háttérszín.
Hogyan?
Szerintem pedig de. Mivel az
CSShover
Nem értem rá csomagot csinálni belöle, de nézzétek meg a http://www.trigonkft.hu/test/ oldalt, ott használok egy CSS hacket, ami lehetövé teszi pl a li:hover használatát is.
Maga az oldal nem müködik még, de erre jó.
ProClub
proclub##kukac##karinthy.hu
Azt elfelejtettem
Ezt a sort kell nézni:
behavior:url(./engine/designs/csshover.htc);ebben a fájlban:
http://www.trigonkft.hu/test/engine/designs/basic/screen.css
Tehát beteszitek a http://www.triognkft.hu/test/engine/designs/csshover.htc fájlt valahova a webrootba és a CSS-böl a fentiek szerint hivatkoztok rá. És íme, IE alatt is müködnek a menük.
ProClub
Ajnasz megelőzött, épp a
A listaelem (li) tartalmazza a legördülő listát (ul).
A li:hover ul {display:block;} megjeleníti a listát, amit a listaelem tartalmaz.
Tehát mikor a kurzort a listaelem fölé viszed, megjelenik a lista, ami addig is a listaelemhez tartozott, csak nem látszott. Mikor leviszed a kurzort, a listát tartalmazó listaelemre mutatsz.
Tomek73
Köszönöm
fontos mondat: "A listaelem (li) tartalmazza a legördülő listát (ul)"
végül mégsem ez oldotta meg a kérdést, hanem az hogy rájöttem, hogy a :hover állapot színváltozásait az <a> taghoz kötöttem, ezért a színek nem maradtak :hover állapotban, mikor elvittem az egeret az <a> fölül