Comment faire le même style de menu que le site www.titanfall.com

Salut à tous,

J'aimerais vous poser une question comment faire le même style de menu que sur le site www.titanfall.com. .

Je parle du menu du bas ,quand on y passe la souris ,cela se lève et on peut y voir une image et du texte.

Si vous pouvais me dire comment s'appel se genre de menu si il y a un terme qui le défini ,pour être plus précise dans mes recherches .

merci a vous
Modifié par bellanova (05 Jan 2015 - 17:40)

Bonjour,

Je sais pas si ça a un nom, mais c'est une simple liste à puces, avec dans chaque élément de listes des liens, des images et des titres qui sont animés avec une animations CSS3 au survol.
Ils utilisent un système de positionnement absolution du bloc pour le coller en bas. Dedans y a une liste avec les 3 éléments. Et chacun est descendu de 352px par rapport au haut de la liste. Au survol, l'élément vient se placer en haut, soit 0 en top, du coup tu le vois en entier.
Sauf qu'au lieu d'utiliser un :hover ils ajoutent une classe CSS en JS quand l'élément est survolé et les styles sur cette classe.

En résumé, le menu fermé :

<div class="features__item" style="top: 352px;"></div>

Et ouvert :

<div class="features__item" style="top: 352px;"></div>

.features__item .focus{ 
top: 0 important!
}

J'avoue ne pas trop comprendre pourquoi ils utilisent du top plutôt que du bottom, ni pourquoi une fois c'est défini en JS et une fois en CSS pour écraser le JS. Mais le principe est pas super compliqué : faire un gros élément, en cacher un bout en dehors du viewport, le re-afficher à sa position initiale au survol

Merci beaucoup pour toutes tes explications Stéphanie ,je suis impressionnée .
Je n'en attendais pas autant ,un peu technique pour mon niveau mais tu me donne exactement ce que je cherchais et plus encore .
Merci ,merci ,merci et merci à toi
Meilleurs vœux et bonne années.