Sliding Menu V1, enfin !
Edit : Attention ! Une nouvelle version existe !
Oui, vous avez bien lu le titre : j’ai terminé Sliding Menu !!! Alors pour ceux qui n’auraient pas suivi, il s’agit d’un menu animé en Javascript et réalisé par moi-même qui ne demande qu’un code minime en HTML pour pouvoir fonctionner, si vous voulez plus d’infos référez-vous à l’article précédent. En fait le menu est déjà terminé depuis environ une semaine mais j’avais eu la flemme de faire un article (surtout que j’en fais un paquet en ce moment)…
Bref, c’est bien beau de vous dire qu’il y a enfin la première version qui est sortie mais le plus important pour vous est de savoir : Qu’est que ça change ?!
Mais TOUT jeune inconscient ! Je me suis amusé à tout recoder de A à Z afin de sortir une version exemptée de bugs et tournant sur n’importe quel navigateur (bon, je ne garantis pas le résultat en-dessous de IE6 =° ), de plus tout à été réécrit de façon Objet, c’est pas de la merde en boîte ça !
Mais passons plutôt aux nouveautés, qu’est-ce qui a vraiment changé pour l’utilisateur ? Je vous fait une petite liste ci-dessous :
- Adoption d’une syntaxe Objet afin de faciliter l’intégration du menu dans une page mais aussi pour améliorer la gestion des variables.
- Les noms des variables ont tous été redéfinis et en anglais afin de donner une meilleure clarté au code.
- Suppression de deux arguments qui, auparavant, étaient nécessaires à l’initialisation du menu. L’argument spécifiant la largeur des images a été supprimé ainsi que celui définissant les attributs à transférer (eh oui, ça sera plus simple maintenant) !
- Résolution du problème de la constante inconnue (voir le premier article pour comprendre), je remercie au passage V@ldun car c’est grâce à lui que ça a été résolu, donc : MERCI ! =)
- Ajout de deux fonctions permettant de mettre en pause ou en lecture le menu.
- Optimisation au niveau du temps d’exécution et au niveau du téléchargement des images (les fondus ne sont plus que des background, si vous mettez une image de 96*1px, celle-ci sera dupliquée en hauteur, c’est moins lourd pour l’utilisateur).
- Et enfin, dernier ajout : possibilité de choisir le sens de défilement ! Droite ou gauche ? À vous de choisir ! Bon, ça peut paraître banal comme ça mais quand vous avez un code qui a été entièrement prévu pour effectuer un défilement vers la gauche c’est pas si simple que ça de l’adapter pour fonctionner vers la droite. Surtout qu’il a fallu redéfinir un paquet de variables mais je suis TRÈS content du résultat, je crois que je ne pouvais pas mieux coder !
Voilà, ça fait pas mal de changements hein ^^ ? Passons maintenant à la version de démonstration (au cas où vous n’auriez pas vu que l’image plus haut redirige au même endroit =° ), je signale au passage que le menu n’est pas initialisé directement sur cette page (mais ça reste possible vous verrez), ceci afin que vous puissiez bien voir son fonctionnement de A à Z, j’ai aussi mis des boutons pour que vous puissiez contrôler le menu comme vous le voulez, ces boutons n’auront pas à apparaître normalement, c’est juste moi qui ai mis ça pour vous laisser le contrôle.
Voyons maintenant comment initialiser le menu, ben oui, ça a changé vu que j’ai recodé de façon Objet et c’est bien mieux comme ça. Bref, tout d’abord il vous faut un code HTML dont voici un exemple :
<a href="#" title="Première image"><img src="bubble.png" alt="" /></a>
<a href="#" title="Deuxième image"><img src="chantier.png" alt="" /></a>
<a href="#" title="Troisième image"><img src="musique.png" alt="" /></a>
<a href="#" title="Quatrième image"><img src="mail.png" alt="" /></a>
<a href="#" title="Cinquième image"><img src="admin.png" alt="" /></a>
</div>
Voilà, pour faire un bouton il faut donc un ensemble de balises A + IMG, c’est pas bien dur ! Et vous définissez les attributs que vous souhaitez, ils seront conservés tout au long de l’animation. À noter que pouvez très bien ajouter une balise P afin de rendre votre code valide XHTML 1.0 Strict. Vous pouvez même ajouter du texte si vous le souhaitez, celui-ci ne sera alors affiché que si le Javascript est désactivé chez le visiteur.
Quant à l’initialisation du menu en lui-même, elle se fait par le biais de deux lignes de code en Javascript :
myMenu.init();
La première ligne sert à créer l’objet et à définir les options que vous souhaitez. La deuxième ligne lance l’initialisation (et donc l’animation) du menu.
Voici une définition des attributs pour la première ligne :
- cible : La cible du div contenant votre menu. Vous pouvez entrer soit le nom d’identification, soit un getElementById().
- sens : Le sens du menu. Il peut être défini par deux chaînes de caractères : “left” ou “right”.
- fondu_gauche : Le chemin d’accès au fondu gauche. Mettez plutôt une image de hauteur réduite (elle sera dupliquée si ce n’est pas assez), ainsi ça évitera de télécharger un gros fichier.
- fondu_droit : Même chose que pour le fondu gauche mais concerne le fondu droit cette fois-ci.
- vitesse : Dernier argument, facultatif. Il défini la vitesse de défilement du menu exprimée en millisecondes. Cette vitesse est le temps d’attente entre le déplacement de chaque pixel, par défaut il est à 30.
Voilà pour le code à fournir.
À noter que même si certains styles CSS sont redéfinis par mon script, la plupart d’entre eux peuvent être utilisés sans problème. La seule chose est que pour centrer votre menu, il vous faudra employer un margin:auto et non pas un text-align:center ;)
Eh bien c’est tout pour Sliding Menu, vous pouvez télécharger le pack ici. Au passage, pour ceux qui voudraient un menu compatible y compris au niveau de la transparence des images comme je l’ai fait sur ma page, je vous conseille d’aller voir ceci =)
Bon, et puis je crois que je vais faire une réforme dans mes catégories d’article parce que là c’est du grand n’importe quoi…
Nes’
PS : Si vous utilisez Sliding Menu, faites-le moi savoir, je serai ravi de voir ce que ça donne sur votre site web =D ! Et si vous trouvez un bug, n’hésitez pas à me le dire !
Walala, franchement bravo, car y a rien de plus horrible que la POO en Js, rien que d’y penser j’en ai des frissons, déjà qu’en PHP elle est vraiment pas terrible (manque de rigueur). Pas de protect/private, j’en claque mes dents. Un objet déclaré comme fonction, j’en souffre, et pourtant je suis obligé de le faire car je n’arrive plus à penser autrement qu’en POO. Moi j’ai fait un clignoteur de div il y a peu, pas en POO et tout moche, j’ai reformaté mais je dois pouvoir le récupérer, je pense m’inspirer de l’organisation de ton code :D .
Merci beaucoup, mais tu sais ce n’est pas la meilleure organisation qui soit, j’aurai très bien pu écrire les méthodes de ma classe en-dehors de celle-ci afin de bien différencier chaque partie mais bon… ça me plaît comme ça ^^ .
Moi aussi au début j’avais deux fonctions toutes moches avec des variables globales, c’était nul quoi… là je me suis défoncé pour faire une belle classe bien propre =D
Au passage, la POO de PHP n’est pas meilleure que celle du JS hein… enfin à mon goût !
C’est ce que je disais, la POO PHP manque de rigueur (d’ailleurs je sais pas pourquoi, mais en PHP j’ai énormément de mal à penser en POO, en JS et C++ c’est instinctif)
La POO du C++ est vraiment parfaite, une perle d’huitre du bassin d’Arcachon.
Pour ton script, c’est facilement “tunable”, un accélérateur quand la souris passe sur les fondus par ex, un texte descriptif qui s’affiche quand on passe sur l’image, je le ferais si j’ai le courage. Et passe sous LGPL, c’est plus libre pour l’utilisateur (enfin, fait comme tu veux, mais perso je le fairais sous LGPL)
EDIT ( :p ) : Le menu est légèrement saccadé…
Pour la LGPL ce n’est pas une mauvaise idée, je n’y avais pas pensé !
Concernant le fait que le script soit “tunable”, je l’ai conçu dans ce but. J’essaye de laisser un maximum de possibilités de skinnage CSS et je commente le code afin que certains puissent le modifier facilement =)
Et pour les saccades je n’y peux rien… mon code a été réduit de façon drastique c’est donc sûr que ça ne vient pas d’un trop plein de lignes à exécuter. J’aurais tendance à dire que le fautif est le navigateur car la plupart du temps il ne saccade pas (en plus, Chrome n’a pas un pet de ralentissements, contrairement à Firefox) mais parfois ça se produit, enfin c’est bizarre ^^’
Je verrai si je peux résoudre ça ;)
Il faut aussi que je fasse quelque chose pour résoudre le problème du chargement des images : si elles ne sont pas toutes chargées, il peut y avoir des bugs… Bref, ça m’a donné envie tiens !
Il semblerait que les saccades viennent d’un trop plein de calcul finalement… je vais réduire l’intervalle de vitesse par 2 et faire en sorte que les images se déplace sur 2 pixels d’un coup au lieu d’un seul. Ainsi j’aurai la même vitesse de déplacement pour des temps de calcul moindres.
Je vais essayer, je dirai ce que ça donne dans un nouvel article.
Enfaite pour la LGPL, GNU la dérecommande, je ne suis absolument pas d’accord avec, je pense faire un topic sur le sdz là dessus justement. http://www.gnu.org/licenses/why-not-lgpl.fr.html Je trouve ça assez déloyal de la part du libre. “Nous on est gentils, tout le monde peut voir ce qu’on fait”, maintenant ça devient “Nous on est gentils, mais t’as intérêt à penser comme nous car sinon tu peux pas voir ce qu’on fait (enfin pas l’utiliser)”.
C’est un peu comme si je disais “J’ai construit des maisons pour vous, allez vivre dedans c’est gratuit” puis en construire d’autre et dire “Je suis encore trop sympa, j’ai construit d’autres maisons, sauf que là seuls les communistes peuvent y aller”. (J’ai rien contre les communistes, il me fallait juste un truc qui n’est pas ‘inné’ comme la couleur ou la religion, mais quelque chose qu’on choisit)
Donc voilà, j’suis pas content et je pense faire un topic sur le sdz (si quelqu’un veut bien m’aider, pourquoi d’ailleurs ne pas commencer un débat d’accord/pas d’accord)
C’est clair que obliger les gens à faire du libre est abusif ! Ça me fait un peu penser au Parti Socialiste ça =°