Chargement…
Menu Avec Des Images En jQuery

Créer Un Menu Avec Des Images En jQuery



Dans ce tutoriel, nous allons créer un menu avec des images en css 3 et jQuery. Un menu animé avec une rotation des images au passage de la souris (Hover). Nous allons créer un menu avec des petites icônes qui tourne sur eu mêmes, puis nous allons élargir le menu et faire apparaître des un texte ou des liens pour chaque élément de notre Menu.

Un Menu Avec Des Images En jQuery

Menu avec des images en jquery

Menu avec Des Images : Le Marquage HTML

Pour ce menu, nous ne créerons pas une liste, mais une Division (div) pour chaque élément de menu. On englobe tous les éléments de menu dans une DIV principal appelé « menu » . Chaque menu aura une icône comme élément de liaison et une DIV pour le contenu (Lien, Paragraphe, Formulaire de Recherche…):

Initialement, la div article (Item) sera tout aussi grande pour entourer l’icône, nous allons alors la faire élargir pour afficher le Contenu.

LE CSS

Le style général pour le menu est comme suit:

Les éléments à l’intérieur du menu vont flottés par la droite parce qu’on veux laisser un champ pour faire apparaître le contenu à Gauche :

Ensuite, nous définissons le style des icônes (la classe de liaison) de la façon suivante:

Les autres éléments de contenu est comme suit :

Avec un blanc text-shadow, nous pouvons créer un bel effet de texte gravé.
Ok, nous allons ajouter un peu de magie.

LE JAVASCRIPT

Après avoir inclue les bibliothèques jQuery et notre Script, nous allons ajouter les fonctions suivantes:

Pour faciliter les choses, nous avons créé deux fonctions : Une pour l’expansion d’un élément et l’autre pour le faire effondrer par la suite. La fonction d’extension fera tourner l’icône 4 fois sur lui-même (360 fois 4 Soit 1440). Puis une autre petite animation qui fera élargir le champ de contenu.
La fonction de l’effondrement fera tourner l’icône de retour, réduire la largeur de l’article et faire disparaître le contenu.

Télécharger Code Source

Et c’est tout! J’espère que ça vous a plu!



Laisser un commentaire