eMenu Plugin


Suivez le guide !

eMenu Plugin


eMenu plugin est un menu interactif composé d'une bande de menu sélectif et de sous-menu le tout souligné par une image de fond ajustable.

Il permet de gérer des catégories ainsi que de nombreux liens. Simple d'utilisation, Il vous faudra néanmoins bien maitriser le CSS pour obtenir de bon résultats.


Suivez le guide ! Description et informations générales

Ce Jquery présente plusieurs onglets dévoilant verticalement plusieurs sous menus, eux même pouvant être ordonnés en plusieurs sections. Ce plugin peut être personnalisé (hauteur-largeur, couleur, taille, padding...) via le fichier .css.

Le Jquery n'est ici que pour gérer l'intéraction et surtout la vitesse d'apparition et de disparition des menus.

Auteur : Chris Jaure
Source : Chromasynthetic
Date de réalisation : 30 septembre 2009




Suivez le guide ! Exemple

Voici un petit exemple concocté par nos soins. Vous pouvez y retrouver différents contenu ainsi qu'une section.

 

Suivez le guide ! Configuration et mise en place

La mise en place de ce plug-in est très simple.

Comme toujours, nous commençons par ajouter la librarie Jquery :

  1. <script src="eMenu/scripts/jquery.js" type="text/javascript"></script> <!--  A télécharger sur Jquery.com -->

Nous plaçons ensuite notre menu dans le code source. Il se constitue d'un ensemble de liste ordonnées le tout contenu dans une division.

Pour l'exemple, nous reprendrons le code que nous avons utilisé pour l'exemple ci-dessus. Notez que si vous changez le nombre de menu, vous devrez aussi penser à changer dans le Css la taille de chaque menu (.emenu ul li ul) pour garder une taille générale identique.


  1. <div class="emenu" id="menu1">
  2.   <ul>
  3.     <li class="first-child">
  4.       <h2><a href="#"> Menu principal</a></h2>
  5.       <ul>
  6.         <li class="first-child">
  7.           <ul>
  8.             <li><a href="#">Lien n° 1</a></li>
  9.             <li><a href="#">Lien n° 2</a></li>
  10.             <li><a href="#">Lien n° 3</a></li>
  11.             <li><a href="#">Lien n° 4</a></li>
  12.             <li><a href="#">Lien n° 5</a></li>
  13.           </ul>
  14.         </li>
  15.       </ul>
  16.     </li>                
  17.     <li>
  18.       <h2><a href="#">Menu suivant</a></h2>
  19.       <ul >
  20.         <li class="first-child">
  21.           <h3>Section 1</h3>
  22.           <ul>
  23.             <li><a href="#">Lien n° 1</a></li>
  24.             <li><a href="#">Lien n° 2</a></li>
  25.           </ul>
  26.         </li>
  27.         <li>
  28.           <h3>Section 2</h3>
  29.           <ul>
  30.             <li><a href="#">Lien n° 3</a></li>
  31.             <li><a href="#">Lien n° 4</a></li>                                
  32.           </ul>
  33.         </li>
  34.       </ul>
  35.     </li>              
  36.     <li>
  37.       <h2><a href="#"> Encore un menu</a></h2>
  38.       <ul>
  39.         <li class="first-child">
  40.           <p>Voici des liens utiles :</p>
  41.           <ul>
  42.             <li><a href="#">Lien n° 1</a></li>
  43.             <li><a href="#">Lien n° 2</a></li>
  44.             <li><a href="#">Lien n° 3</a></li>
  45.             <li><a href="#">Lien n° 4</a></li>
  46.           </ul>
  47.         </li>
  48.       </ul>
  49.     </li>
  50.     <li>
  51.       <h2><a href="#">Dernier menu </a></h2>
  52.       <ul>
  53.         <li class="first-child">
  54.           <h3>Section 1</h3>
  55.           <p>D'autres liens :</p>
  56.           <ul>
  57.             <li><a href="#">Lien n° 1</a></li>
  58.             <li><a href="#">Lien n° 2</a></li>
  59.             <li><a href="#">Lien n° 3</a></li>
  60.             <li><a href="#">Lien n° 4</a></li>
  61.           </ul>
  62.         </li>
  63.       </ul>
  64.     </li>                
  65.   </ul>
  66.   <div class="menu_content">
  67.     <p>
  68.       <strong> Placez ici le texte<br />
  69.            que vous souhaitez !
  70.       </strong>
  71.     </p>
  72.   </div>
  73. </div>

Nous ajoutons ensuite le Css pour formater notre menu comme il se doit :

  1. <link href="eMenu/css/jquery.emenu.css" rel="stylesheet" type="text/css" />

Enfin, nous terminons par ajouter l'interactivité en ajoutant le javascript qui contient les directives JQuery :

  1. <script src="eMenu/scripts/jquery.emenu.js" type="text/javascript"></script>

 

Notez que vous pouvez personnaliser la vitesse de « Fade In / Fade out » ou littéralement « Effacement d'entrée / Effacement de sortie » à la fois du menu mais aussi de l'image de fond.

Pour cela, vous devrez changer les différentes propriétées « fadeTo » comme par exemple :

  1. bg.stop().fadeTo(400, 0.5);

Le 1er nombre représente la vitesse en milliseconde de la disparition et le second chiffre donne l'opacité du composant de 1 (parfaitement opaque ) à 0 (complètement invisible).

Cela donne :

  1. $(function(){
  2.   $('#menu1').emenu({
  3.     over: function(event, bg){
  4.     bg.stop().fadeTo(400, 0.5);
  5.     },
  6.     out: function(event, bg){
  7.     bg.stop().fadeTo(400, 1);
  8.     },
  9.     show: function(event, ul, li, width, height){
  10.     ul.css('visibility', 'visible').stop(true).fadeTo(200, 1);
  11.     },
  12.     hide: function(event, ul, li){
  13.     ul.stop(true).fadeTo(200, 0, function(){
  14.       ul.css('visibility', 'hidden');
  15.     });
  16.     }
  17.   });
  18. });

Voilà ! Il ne vous reste plus qu'à personnaliser votre menu !