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
HTML + CSS NO JS NO IMG
Navigateurs
Firefox Safari Chrome Opéra
Propriétés CSS3
transition border-radius :nth-child
Partagez
Facebook Twitter

Votez

39 votes3.76

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 test, le 25 août 2011

testggggggggggggggg

#4par nono, le 19 novembre 2011

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

#5par kwa, le 2 janvier

yessss

#6par elo, le 5 janvier

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

#7par Anonyme, le 15 janvier

Je ne trouve pas le tuto !

#8par ilham, le 10 février

tutoriel stp

#9par anonyme, le 12 avril

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

#10par Moi, le 30 avril

Clic droit >> Code source de la page.

#11par Gamuz, le 4 mai

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


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