Démos

Toutes les démos

<>

Couverture du livre CSS3 Le design web moderne

Livre CSS3

Le design web moderne

Plus d'infos sur le site officiel

En vente sur Amazon, FNAC, Dunod

Suivre

Actualités du site CSS3Create

Actualités sur CSS et le web en général

Menu effet jQuery en CSS

Réaliser une animation sur un menu sans Javascript

Création: juillet 2010Modifié:

Contenu
Full CSS Pas de JavaScript Pas d’images
Navigateurs
Firefox Safari Chrome Opera
Partagez
Facebook Twitter

Votez

102 votes3.82

Utilisation des Transitions CSS3 pour créer un menu avec effet jQuery. L’effet du hover est animé.

Ici, on utilise les Transitions CSS3 pour créer un effet jusqu’à maintenant réservé à jQuery (ou javascript).

L’effet consiste à déplacer un élément au hover, de sa position initiale vers le lien où se trouve la souris, puis à le repositionner. De plus, au départ les éléments animés sont masqués avec visibility:hidden et affichés seulement lors du hover.

L’effet fonctionne actuellement sous Safari, Chrome, Opéra. Dans Firefox, l’effet produit est celui d’un hover normal : apparition sous la souris. Firefox 4 sera compatible.

Envie d'une nouvelle démo?

Un p'tit mot...

#1par Steve, le 12 juillet 2011

Ne fonctionne pas sur firefox 3.6. En revanche aucun problème sur Chrome.

#2par Adrien, le 22 août 2011

Tout simplement génial !

#3par nono, le 19 novembre 2011

bonjour ou trouve t’on l’effet s’il vous plait

#4par kwa, le 2 janvier 2012

yessss

#5par elo, le 5 janvier 2012

Réservé à Javascript, pas Jquery (on faisait ça bien avant cette bibliothèque, heureusement).

#6par Anonyme, le 15 janvier 2012

Je ne trouve pas le tuto !

#7par ilham, le 10 février 2012

tutoriel stp

#8par anonyme, le 12 avril 2012

Cool la démo, euh ....où est l’intérêt si on a pas le code ? u_u’

#9par Moi, le 30 avril 2012

Clic droit >> Code source de la page.

#10par Gamuz, le 4 mai 2012

Trop Cool !!!!!! la Demo c’est chouet :)

#11par Homunculus, le 26 juin 2012

Bonjour, j’essaye de piquer le code pour le comprendre et le reproduire mais je n’y parviens pas. Pouvez vous nous donnez un lien, ou faire un tuto ?
PS : ce site est une vraie mine, c’est du bon boulot.

#12par G4lAcTiC SilvR, le 22 septembre 2012

Simple question, cela fonctionne si l’on place le hover (caché bien-sûr) n’importe où ??

#13par 2aurene, le 22 novembre 2012

Finalement déçue par cet exemple qui semble être réglé au pixel près...
Ça donne des idées tout de même !

#14par Almo, le 7 décembre 2012

Vraiment trop bien le slide ; Mais où pourrai je voir le code ???


modération à priori

Ce forum est modéré à priori : votre contribution n'apparaîtra qu'après avoir été validée par un administrateur du site.

Un message, un commentaire ?
    Qui êtes-vous ? (optionnel)
  • (Pour créer des paragraphes, laissez simplement des lignes vides.)