SO,
Egyedi menüt készítek egy oldalhoz, fix szélességgel. Megpróbálok létrehozni egy "menüt", amely valójában csak egy vízszintes sor, amely DIV-ekből áll (egy DIV minden menüponthoz). Mellékeltem egy képet, hogy közöljem az elérni kívánt funkciót: 1. ábra a DIV-ek legfelső szintű sora. A 2. ábra azt mutatja be, hogy mi történik azzal a sorral, amikor a kurzort a legfelső szintű „Professzionális fejlesztés” elem fölé helyezzük: ez a div kibővül, hogy kitöltse a teljes menüterület szélességét, és felfedjen számos további DIV-t, amelyek almenüelemként működnek. Végül a 3. ábra azt mutatja, hogy mi történik, ha a kurzor egy olyan legfelső szintű div felett áll, amely még nincs a tároló bal oldalán: mivel a DIV-nek balra és jobbra kell bővülnie, hogy megtöltse a tárolót, a „Nagyon hosszú menü Az elem" balra mozog, így a gyermek DIV-ek jobbra kerülnek.
Használhattam a Jqueryt bővülő DIV-ek animálására vagy harmonika létrehozására, de nem tudok rájönni, hogyan készítsek ilyen animációt, különösen mivel több legfelső szintű elemről van szó. Minden segítséget nagyra értékelünk!
-Marca
SZERKESZTÉS:
Hozzáadtam egy JSfiddle-t, amely néhány gombon eléri a kívánt funkcionalitást a CSS hover pszeudo segítségével -osztályokban, de tanácstalan vagyok, hogy hogyan animáljam a változást a JQuery segítségével. Amikor a kurzort a „Professzionális fejlesztés”-re helyezem, ez a div jobbra és balra bővül, hogy felfedje az almenü elemeiként működő további diveket – de a kibővülés azonnali, ahogy az elvárható csupán CSS-sel.