Astuce expert : créer un menu avec des effets en JS pour votre site

Envie de créer un menu dynamique pour votre site WebAcappella ? La team vous propose aujourd’hui cette astuce qui vous permettra de créer un menu de navigation avec des effets en JS. Vous pourrez, en modifiant le fichier CSS et le fichier JS, personnaliser le menu à vos couleurs et avec l’animation de votre choix. Alors, c’est parti !

Dans WebAcappella, menu site web/propriétés du site web, 4ème onglet, commencez par coller le code suivant dans la partie head de vos pages Web afin d’initialiser les appels JS :

	<link href="animated-menu.css" rel="stylesheet" /><script type="text/javascript" src="jquery-1.3.2.min.js"></script><script type="text/javascript" src="jquery.easing-1.3.pack.js"></script>
<script type="text/javascript" src="animated-menu.js"></script>

Ensuite, téléchargez et dézippez le dossier contenant le fichier css et les 3 fichiers js (4 fichiers au total) en cliquant sur le lien suivant JS_CSS_ANIM.

Voici le détail des fichiers que vous allez trouver :

– fichier animated-menu.css

– fichier animated-menu.js

– fichier jquery.easing-1.3.pack.js

– fichier jquery-1.3.2.min.js

Tous ces fichiers sont à copier à la racine de votre projet de site dans le dossier distant de votre hébergeur à l’aide d’un client FTP de type Filezilla. Afin que le menu fonctionne bien, il est important également de conserver leur nom d’origine.

Intégrer le menu dans vos pages

Ensuite, insérez le code suivant dans une zone de code HTML à l’endroit de vos pages où vous souhaitez avoir votre menu de navigation. Le mieux c’est bien sûr de l’intégrer directement dans votre maquette principale de votre site.

A savoir : une fois le menu intégré, l’affichage dans WebAcappella se fera de façon verticale. Vous pouvez avoir un aperçu du rendu final en cliquant sur le bouton ‘test’.

<ul>
		<li class="green">
			<p><a href="http://www.webacappella.fr">Accueil</a></p>
<p class="subtext">Page d'accueil</p>
		</li>
		<li class="yellow">
			<p><a href="http://www.webacappella.fr/about_fr.html">A propos</a></p>
			<p class="subtext">Nous concernant</p>
		</li>
		<li class="red">
			<p><a href="http://www.webacappella.fr/contact_fr.html">Contact</a></p>
			<p class="subtext">écrivez-nous !</p>
		</li>
		<li class="blue">
			<p><a href="http://www.webacappella.fr/help_fr.html">Aides</a></p>
			<p class="subtext">Trouvez l'aide nécessaire  !</p>
		</li>
		<li class="purple">
			<p><a href="http://www.numento.fr/">Numento</a></p>
			<p class="subtext">Gérez vos collections</p>
		</li>
</ul>

Vous pouvez personnaliser ce code avec vos textes et vos liens :

* li class=’blue’ –> Il s’agit du nom d’une classe présente dans le fichier css. Vous pouvez donner le nom que vous souhaitez aux classes. Le changement de couleur et la personnalisation de l’apparence du menu se feront directement dans le fichier css (voir plus bas dans le tuto).

* <p><a href= »index »>Accueil</a></p> -> index : il s’agit du lien. Cela peut être une page du site ou une page externe au site comme c’est le cas de : http://www.numento.com

* <p>Page d’Accueil</p> -> Vous pourrez changer ici le libellé du ‘sous-menu’

Personnaliser l’apparence du menu

1. Modification du fichier animated-menu.css pour changer la mise en page (couleurs, police et fond)

– Connectez-vous à votre dossier distant à l’aide de votre client FTP.

– A la racine de votre projet, éditez le fichier ‘animated-menu.css’ et personnalisez le code avec votre police et vos couleurs préférées, ainsi que la largeur et hauteur des zones de couleur du menu. Vous trouverez le détail dans les notes du code (entre les symboles /*  */) :

body{
	font-family:sans-serif, arial;
	background:#F3F3F3; /*Police et couleur de fond d ecran*/
}

ul{
	margin:200;/*Marge interieure du menu*/
	padding:100;/*Espacement du menu (vers la droite de la page)*/
}

li{
	width:100px;/*largeur des colonnes du menu*/
	height:50px;/*hauteur des colonnes du menu*/
	float:left;
	color:#191919;/*couleur de la police du sous-menu*/
	text-align:center;/* alignement du texte*/
	overflow:hidden;
}

a{
	color:#FFF;/*couleur de la police du menu*/
	text-decoration:none;
}

p{
	padding:0px 5px;/*Espacement du texte du menu*/
}

	.subtext{
		padding-top:15px;/*Espacement du texte du sous-menu*/
	}

/*Couleur des fonds du menu*/
.green{background:#6AA63B top left no-repeat;}
.yellow{background:#FBC700 top left no-repeat;}
.red{background:#D52100 top left no-repeat;}
.purple{background:#5122B4 top left no-repeat;}
.blue{background:#0292C0 top left no-repeat;}

2. Modification du fichier animated-menu.js pour personnaliser l’animation

Vous trouverez sur le site http://easings.net/fr plein d’effets intéressants pour changer et personnaliser l’animation de votre menu.

Dans le fichier animated-menu.js vous pourrez modifier le type d’animation ainsi que la vitesse de celle-ci (en 2 phases, au survol de la souris et au départ de celle-ci). Éditez le fichier pour changer ces données (vous trouverez également le détail dans les notes du code).

$(document).ready(function(){

	$("a").click(function(){
		$(this).blur();
	});

	/*Au survol de la souris*/
	$("li").mouseover(function(){
		$(this).stop().animate({height:'150px'} /*hauteur de l animation, animation deployee*/
,{queue:false, duration:600, easing: 'easeOutBounce'}) /*duree de l animation exprime en ms. Nom de l’animation, cf : lien du site dedie a ces differents effets*/
	});

	/*Quand on enleve la souris*/
	$("li").mouseout(function(){
		$(this).stop().animate({height:'50px'} /*hauteur de l’animation non deployee*/ ,{queue:false, duration:600, easing: 'easeOutBounce'})
	});

});

Il ne vous reste plus que à vous lancer dans la création de votre menu animé pour votre site !

La team vous donne rendez-vous pour un prochain tuto du blog. Alors à très vite.

18 Comments

  1. sautreuil

    bonjour
    Les astuces sont très remarquables mais pour un novice elles peuvent parfois dérouter
    il serait intéressant d’avoir une petite vidéo de démo courte mais juste de quoi orienter et ainsi de faciliter la mise en œuvre.
    Cordialement.

    • Team WebAcappella

      Bonjour et merci pour votre question !
      En effet, nous publions des astuces et des tutos de niveaux différents pour que tous les utilisateurs WebAcappella trouvent des infos qui les intéressent 🙂
      Pour les astuces « avancées » vous trouverez toujours dans le titre de l’article l’indication du niveau de difficulté (avancée et expert).
      Les astuces niveau expert, comme celle-ci, demandent quelques connaissances en code.
      Pour l’instant il ne nous est pas possible de réaliser des vidéos pour les tutos, mais nous prenons note de votre suggestion ! 🙂
      Bonne journée !
      La team

  2. MetalOS

    Merci de l’astuce 😉

  3. Carlus77

    Merci 😀

  4. champion

    et çà donne quoi une animation en « JS », vous connaissez un site avec çà (que l’on voit ce que cela donne) ????
    merci

  5. Louic

    Vous pourriez donner un lien d’exemple de ce style de menu?

  6. Andrée Robert

    Est-ce que l’on pourrait voir un exemple de ce que ça donne?

  7. Lesaintdrome

    Bonjour,
    Ce tuto permet-il de faire un menu vertical avec effet « accordéon » permettant d’afficher les sous-menus ?

    Cordialement

    • Wels

      Bonjour
      J’ai fait l’essai et ça marche très bien en horizontal comme vertical, pour le vertical, rien de plus simple, il faut juste réduire la largeur de la zone de code et le menu s’affiche les uns en dessous des autres.

    • Team WebAcappella

      Bonjour !
      Vous pouvez faire le menu en vertical, merci à Wels 🙂 qui nous a indiqué dans les commentaires comment faire :
      « pour le vertical, rien de plus simple, il faut juste réduire la largeur de la zone de code et le menu s’affiche les uns en dessous des autres. »
      Si vous souhaitez rajouter des sous-menus avec des animations également, il faudra rajouter des lignes de code.

  8. bourguignat

    bonjour Team !..
    Un petit code pour page précédente

    hé Hop
    http://www.lescheminsdecompostelle.fr

  9. bourguignat

    impossible de publier le code il ne passe pas en impression de publication même quand je le met dans commentaires

    • Team WebAcappella

      Bonjour Bourguignat !
      Vous pouvez essayer de mettre le code entre des balises code : [ code] [ /code]

  10. REGARDsur

    Bonjour, je suis dans la même interrogation que certains de vos internautes. Pourriez-vous nous indiquer un site existant qui utilise ce type de menu dynamique ? Merci pour votre retour et pour vos articles.

  11. Atlante

    Vous pouvez trouver l’exemple de menu sur : http://buildinternet.com/live/smoothmenu/animated-menu.html

    Et bien, avec ce lien, rien ne fonctionne, sous Safari, et Java Script et Java autorisé 😦

    • Team WebAcappella

      Bonjour Atlante !
      Nous avons testé le lien sous chrome et safari (version 5.1.3) et cela fonctionne. Le menu s’affiche correctement.
      Vous avez quelle version de Safari ?

Commentaires fermés