Chargement…
Cacher Un Menu

Comment Cacher Un Menu Avec CSS3



A la base, les web développeurs utilisaient Javascript ou jQuery pour effectuer des animations sur une page. Mais dans notre tutoriel, on va utiliser de Pure CSS3 pour cacher un menu de navigation. Le même principe peut être utiliser pour cacher n’importe quel autre élément et l’afficher au passage de la souris.

Cacher Un Menu CSS

Cacher Un Menu Avec CSS3

Dans notre exemple, on cache un menu de navigation dans une Barre à l’en-tête de notre page puis on l’affiche au passage de la souris. Notre code HTML est comme suit :

Ce qui nous intéresses, c’est les classes « topbar » « tophiddenbar » où on insère notre menu de navigation.

Pour que notre animation fonctionne, on utilise la propriété « Transition » de CSS3 :

Pour plus d’informations sur les fonctions de la propriété transition : Lien

Télécharger Code Source

Si cet article vous a plu alors n’hésitez pas à le partager avec vos amis(es), et suivez nous sur Facebook, Twitter et Google+ Pour recevoir des notifications de tous Nos nouveaux tutoriaux et conseils.



Laisser un commentaire