WebHU - Programozási kérdések és válaszok

Vízszintes Div Expand Animáció a menühöz

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: adja meg a kép leírását1. á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.


Válaszok:


1

SO,

Arra az esetre, ha valakit érdekel, azt hiszem, találtam egy szkriptet a szükséges tulajdonságok animálásához – lásd: JSfiddle.

-Marca

17.09.2012
Új anyagok

A rádiógomb ellenőrzött eseményének használata a jQueryben
Ebben a cikkben látni fogjuk, hogyan kell dolgozni a jquery választógombbal ellenőrzött eseményeivel. A választógombok HTML gombok, amelyek segítenek kiválasztani egyetlen értéket egy csoportból...

Körkörös függőségek megoldása terraformban adatforrásokkal – lépésről lépésre
Mi az a körkörös függőségek Dolgozzunk egy egyszerű eseten, amikor az SQS-sor és az S3-vödör közötti körkörös függőség problémája van egy egymástól függő címkeérték miatt. provider..

Miért érdemes elkezdeni a kódolást 2023-ban?
01100011 01101111 01100100 01100101 — beep boop beep boop Világunk folyamatosan fejlődik a technológia körül, és naponta fejlesztenek új technológiákat a valós problémák megoldására. Amint..

🎙 Random Noise #2  – Örökbefogadás és hit
az analitika íratlan világának gondozása Szeretné, hogy ezek a frissítések a postaládájába kerüljenek? Iratkozzon fel itt . "Ha önvezető autókat gyártanak, akkor mi miért ne..

A legrosszabb politika és prediktív modellek májátültetésre jelöltek számára az Egyesült Államokban
A máj (vagy óangolul lifer) az emberi test legnehezebb belső szervére utal, amely csendesen működik a nap 24 órájában. Mit csinál a máj? 500 feladatot hajt végre a szervezet egészségének..

5 webhely, amely 2022-ben fejleszti front-end fejlesztői készségeit
Frontendmentor.io A tényleges projektek létrehozásával a Frontendmentor.io segítséget nyújt a front-end kódolási képességeinek fejlesztésében. A kódolást azután kezdheti meg, hogy..

Mikor kell használni a Type-t az interfészhez képest a TypeScriptben?
A TypeScript a JavaScript gépelt szuperkészlete, amely statikus gépelést ad a nyelvhez. Ez megkönnyíti a robusztus és karbantartható kód írását azáltal, hogy a hibákat a fordítási időben..