Sliding Menu

Présentation

Comme son nom l'indique, Sliding Menu est un script permettant la mise en place rapide et simple d'un menu défilant tel que présenté ci-dessous. Le code à écrire est minime et simple même si vous ne maîtrisez pas le Javascript (langage dans lequel a été codé Sliding Menu).
Les différentes fonctionnalités offertes sont : le choix du sens de défilement, deux types d'animations et le choix de la vitesse de défilement.
Il est bien sûr possible de créer plusieurs menus sur une même page (attention à ne pas en abuser).

Utilisation

La seule chose que vous ayez à faire pour la mise en place de ce menu est de créer un code HTML de ce type (il s'agit d'un exemple parmi d'autres, ce code peut très bien être modifié selon vos exigeances, vous pouvez par exemple ajouter des attributs supplémentaires, des balises, ou même du texte) : 

<p id="menu">
    <a href="#titre1" title="Titre 1"><img src="image1.png" /></a>
    <a href="#titre2" title="Titre 2"><img src="image2.png" /></a>
    <a href="#titre3" title="Titre 3"><img src="image3.png" /></a>
    <a href="#titre4" title="Titre 4"><img src="image4.png" /></a>
</p>

Cependant, votre code HTML devra obligatoirement comporter un ensemble de ce style :

<BLOC>
    <LIEN><IMAGE /></LIEN>
</BLOC>

Il s'agit de la seule limite imposée au niveau du code HTML. Si vous le souhaitez, vous pouvez appliquer un design sur votre menu afin que celui-ci soit correctement affiché si le Javascript est désactivé chez le visiteur (à condition de ne pas mettre n'importe quoi, c'est à vous de faire attention car tous les styles CSS ne sont pas effacés lors de l'exécution du menu, en revanche les margin, padding et bordures sont largement supportés).

Dernière chose, n'oubliez pas ces trois conditions importantes :

Une fois que votre code HTML est prêt il ne vous reste plus qu'à lancer l'animation, pour cela il vous suffit d'opérer de cette façon : 

var myMenu = new SlidingMenu('menu', 'left');

Il s'agit ici de l'exécution d'un menu avec le minimum d'argument requis, voici la liste des arguments au complet et dans l'ordre (les deux premiers sont obligatoires) :

  1. Pointeur vers le bloc contenant le menu, cela peut aussi bien être le nom de son ID qu'un getElementById().
  2. Sens du défilement, "left" pour aller vers la gauche et "right" pour aller vers la droite.
  3. Vitesse de défilement exprimée en millisecondes, correspond au temps d'attente entre chaque déplacement d'un pixel (valeur par défaut : 40).
  4. Chemin vers le fondu de gauche, il vient se placer au-dessus des images et fait ainsi croire à un fondu progressif lorsqu'une image vient à passer dessous.
  5. Idem mais pour le fondu droit.

À noter que ce bout de code Javascript peut-être placé où vous le souhaitez.

Concernant les fondus, si ceux-ci ne sont pas spécifiés l'animation fonctionnera mais avec une opacité progressive appliquée sur les images de côté (comme vous pouvez le voir sur le menu de cette page). Les fondus devront être créés par vous-mêmes et doivent faire une largeur équivalente à une fois et demi la largeur de vos images (vous pouvez prendre une autre valeur si vous le souhaitez, tout dépend de ce que vous souhaitez faire). Il faut aussi préciser que la hauteur importe peu car si l'image n'est pas assez haute, celle-ci sera dupliquée. Afin de vous éclairer un peu, voici un petit exemple avec des fondus (en noir pour que vous puissiez bien les voir) :

Et une fois votre menu créé, vous pouvez utiliser ces deux méthodes que voici si vous en avez besoin : 

myMenu.stop(); // Permet de mettre en pause le défilement des images.
myMenu.play(); // Permet de relancer le défilement des images.

Voilà tout pour les explications. En cas de problème, n'hésitez pas à utiliser le formulaire de contact.

Compatibilité

Sliding Menu est compatible avec les navigateurs web les plus connus, à savoir :

Alors attention ! Certains navigateurs non-testés n'auront qu'une compatiblité partielle, cela veut dire que la compatiblité n'est assurée que pour l'animation possédant des fondus, ceci s'explique en raison de la non prise en charge de l'attribut CSS opacity par leur moteur de rendu respectif.

Une autre incompatibilité existe mais pour Internet Explorer 6 uniquement : il s'agit de la transparence nécessaire pour les fondus. Cette version du navigateur ne gère pas la transparence des PNG sauf par le biais d'un script adéquat, Sliding Menu a justement été adapté pour pouvoir supporter la gestion d'un script de ce genre nommé IE PNG Fix, son utilisation est assez simple vous verrez.

Personnellement, même si l'attribut opacity n'est pas encore pris en charge par certains navigateurs, je vous conseille d'utiliser l'animation qui ne nécessite pas d'images pour les fondus. Elle est bien plus simple à mettre en place.

Bugs connus

Téléchargement

Télécharger la dernière version de Sliding Menu Avant de télécharger ce script, n'oubliez pas qu'il est fourni sous licence LGPL dont les caractéristiques sont spécifiées sur le site officiel. Je ne suis pas du genre à embêter les gens pour un simple problème de copyright mais j'apprécie quand même lorsque mon travail est reconnu. Donc, si vous utilisez ce menu, veuillez laisser mon nom et l'adresse de mon site dans le code source, si vous voulez le modifier puis le redistribuer alors citez mon nom, merci.

Modifications

Sliding Menu - v1.3.1 :

Sliding Menu - v1.2.4 :

Sliding Menu - v1 : Aucun changement (normal non ? =° )

La page continue plus bas