Plugins gratuits pour le framework JavaScript Mootools 1.2 |
English

<< RETOUR À L'ACCUEIL

BySlideMenu - Menu de type accordéon

Qu'est-ce que BySlideMenu ?

BySlideMenu est un plugin pour Mootools qui vous permet de créer facilement un menu accordéon, sur tous les éléments que vous souhaitez (ul/li, div, p ...), en utilisant des images et/ou du texte.

Fonctionnalités

  • Fonctionne horizontalement ou verticalement.
  • Taille automatique - Les dimensions du conteneur peuvent s'adapter automatiquement.
  • Le menu s'étend au passage de la souris ou au clic, au choix.
  • Le menu peut être épinglé ou non, au passage de la souris ou clic, au choix.
  • Un index par défaut peut être défini.
  • Peut être utilisé sur n'importe quels éléments (ul/li, div, p...)
  • Support de l'overflow.

Participer

Faire un don

Si vous aimez ce script, et que vous souhaitez participez, vous pouvez envoyer quelques (centimes d') euros. Vous pouvez donner ce que vous souhaitez en cliquant ici (vous pouvez ne RIEN donner en ne cliquant PAS ici ^^) :

Utilisation

HTML

  1. <ul id="byslidemenu">
  2. <li><img src="picture1.jpg" /></li>
  3. <li><img src="picture2.jpg" /></li>
  4. <li><img src="picture3.jpg" /></li>
  5. </ul>

Note : Vous pouvez utiliser n'importe quels éléments. À la place de ul/li vous pouvez utiliser div/div ou div/p par exemple.

Javascript

  1. var mySlideMenu = new BySlideMenu(container, options);

Container

L'ID du conteneur à transformer en menu glissant.

Options

Option Type Default Description
defaultIndex int false Index de l'élément à étendre au démarrage (false si aucun).
Si vous souhaitez étendre le 3ème élément au démarrage, définissez defaultIndex à 3.
expandMode string "mouseover" "mouseover" : Le menu s'étend au passage de la souris.
"click" : Le menu s'étend au clic de la souris.
false : Le menu ne s'étend pas avec la souris.
pinMode string false "mouseover" : Les éléments restent ouverts au passage de la souris.
"click" : Les éléments restent ouverts au clic de la souris.
false : Les éléments ne restent pas ouverts.
vertical bool false Définir à true pour passer en mode vertical.
compressSize int 40 La largeur (ou hauteur, en mode vertical) des éléments "compressés".
autoSize bool true Si true, le script essayera de détecter la taille des éléments en vérifiant la première image trouvée.
Si false, ou si aucune image n'est trouvée, les deux options suivantes seront utilisées.
containerWidth int La largeur du conteneur. La largeur des éléments sera calculée automatiquement à partir de la largeur du conteneur. Si la valeur est définie à "full", alors la largeur sera celle de l'élément parent.
containerHeight int La hauteur du conteneur. La hauteur des éléments sera calculée automatiquement à partir de la hauteur du conteneur. Si la valeur est définie à "full", alors la hauteur sera celle de l'élément parent.
elementWidth int 320 La largeur des éléments étendus. Cette option sera utilisée si autoSize est défini à false, ou si aucune image n'est trouvée dans le menu, et que containerWidth n'est pas défini.
elementHeight int 240 La hauteur des éléments étendus. Cette option sera utilisée si autoSize est défini à false, ou si aucune image n'est trouvée dans le menu, et que containerHeight n'est pas défini.
useOverflow bool false Si cette option vaut true, l'overflow sera activé lors de l'affichage d'un élément.

Méthode publique

La méthode mySlideMenu.expand(index, setDefault) peut être appelée pour étendre le indexème élément, et l'épingler si setDefault vaut true.

Pré-requis

BySlideMenu est écrit pour Mootools v1.2

Il requiert ces modules (et leurs dépendances) :

  • Element.Dimensions
  • Element.Event
  • Fx.Tween
  • Fx.Transitions

Je le veux !

Combien dois-je payer pour l'avoir ?

Rien du tout ! C'est totalement gratuit. Vous pouvez le télécharger, le modifier et l'utiliser dans n'importe quel projet commercial tant que vous respectez la licence. C'est Open Source !

Télécharger

License

BySlideMenu par ByScripts est mis à disposition selon les termes de la licence MIT Open Source.

Historique

1.1 beta

+ Possibilité de définir la largeur et/ou hauteur du conteneur au lieu de la largeur et/ou hauteur des éléments.

+ Possibilité d'activer l'overflow sur les éléments, une fois affichés.

* Amélioration du calcul de la largeur et de la hauteur des élements. Prise en compte du padding et de la bordure.

0.9 beta

# Première version

Exemples

Exemple 1 : Options par défaut

HTML

  1. <ul id="byslidemenu">
  2. <li><img src="creditcards.jpg" /></li>
  3. <li><img src="games.jpg" /></li>
  4. <li><img src="computer.jpg" /></li>
  5. <li><img src="eiffeltower.jpg" /></li>
  6. <li><img src="electronic.jpg" /></li>
  7. </ul>

Javascript

  1. var slideMenu = new BySlideMenu();

Résultat

Exemple 2 : Comme précédemment, mais en modifiant la largeur compressée et la durée

HTML

  1. <ul id="compressmenu">
  2. <li><img src="creditcards.jpg" /></li>
  3. <li><img src="games.jpg" /></li>
  4. <li><img src="computer.jpg" /></li>
  5. <li><img src="eiffeltower.jpg" /></li>
  6. <li><img src="electronic.jpg" /></li>
  7. </ul>

Javascript

  1. var compressmenu = new BySlideMenu('compressmenu', {
  2. compressSize: 10,
  3. duration: 250
  4. });

Résultat

Exemple 3 : Menu vertical

HTML

  1. <ul id="verticalmenu">
  2. <li><img src="creditcardsV.jpg" /></li>
  3. <li><img src="gamesV.jpg" /></li>
  4. <li><img src="computerV.jpg" /></li>
  5. <li><img src="eiffeltowerV.jpg" /></li>
  6. <li><img src="electronicV.jpg" /></li>
  7. </ul>

Javascript

  1. var verticalmenu = new BySlideMenu('verticalmenu', {vertical: true});

Résultat

Exemple 4 : Menu utilisant un index par défaut, et la transition "Bounce"

HTML

  1. <div id="indexmenu">
  2. <p><img src="creditcards.jpg" /></p>
  3. <p><img src="games.jpg" /></p>
  4. <p><img src="computer.jpg" /></p>
  5. <p><img src="eiffeltower.jpg" /></p>
  6. <p><img src="electronic.jpg" /></p>
  7. </div>

Javascript

  1. var indexmenu = new BySlideMenu('indexmenu', {
  2. defaultIndex: 4,
  3. transition: Fx.Transitions.Bounce.easeOut
  4. });

Résultat

Exemple 5 : Menu étendu par un clic de souris

HTML

  1. <ul id="expandclickmenu">
  2. <li><img src="creditcards.jpg" /></li>
  3. <li><img src="games.jpg" /></li>
  4. <li><img src="computer.jpg" /></li>
  5. <li><img src="eiffeltower.jpg" /></li>
  6. <li><img src="electronic.jpg" /></li>
  7. </ul>

Javascript

  1. var expandclickmenu = new BySlideMenu('expandclickmenu', {expandMode: 'click'});

Résultat

Exemple 6 : Menu épinglé par un clic de souris

HTML

  1. <ul id="pinclickmenu">
  2. <li><img src="creditcards.jpg" /></li>
  3. <li><img src="games.jpg" /></li>
  4. <li><img src="computer.jpg" /></li>
  5. <li><img src="eiffeltower.jpg" /></li>
  6. <li><img src="electronic.jpg" /></li>
  7. </ul>

Javascript

  1. var pinclickmenu = new BySlideMenu('pinclickmenu', {pinMode: 'click'});

Résultat

Exemple 7 : Menu épinglé au passage de la souris

HTML

  1. <ul id="pinovermenu">
  2. <li><img src="creditcards.jpg" /></li>
  3. <li><img src="games.jpg" /></li>
  4. <li><img src="computer.jpg" /></li>
  5. <li><img src="eiffeltower.jpg" /></li>
  6. <li><img src="electronic.jpg" /></li>
  7. </ul>

Javascript

  1. var pinovermenu = new BySlideMenu('pinovermenu', {pinMode: 'mouseover'});

Résultat

Exemple 8 : Menu étendu et épinglé par un clic de la souris

HTML

  1. <ul id="clickmenu">
  2. <li><img src="creditcards.jpg" /></li>
  3. <li><img src="games.jpg" /></li>
  4. <li><img src="computer.jpg" /></li>
  5. <li><img src="eiffeltower.jpg" /></li>
  6. <li><img src="electronic.jpg" /></li>
  7. </ul>

Javascript

  1. var clickmenu = new BySlideMenu('clickmenu', {
  2. expandMode: 'click',
  3. pinMode: 'click'
  4. });

Résultat

Exemple 9 : Menu texte

HTML

  1. <ul id="textmenu">
  2. <li class="bg1 icon1">Element 1</li>
  3. <li class="bg2 icon2">Element 2</li>
  4. <li class="bg1 icon3">Element 3</li>
  5. <li class="bg2 icon4">Element 4</li>
  6. <li class="bg1 icon5">Element 5</li>
  7. <li class="bg2 icon6">Element 6</li>
  8. <li class="bg1 icon7">Element 7</li>
  9. <li class="bg2 icon8">Element 8</li>
  10. <li class="bg1 icon9">Element 9</li>
  11. </ul>

Javascript

  1. var textmenu = new BySlideMenu('textmenu', {
  2. defaultIndex: 1,
  3. elementHeight: 30,
  4. elementWidth: 175
  5. });

Résultat

Exemple 10 : Menu texte vertical avec overflow

HTML

  1. <div id="verticaltextmenu">
  2. <div class="bg1 first">
  3. <h5>Title 1</h5>
  4. <p>This is the first content. Don't you think it's great ?</p>
  5. </div>
  6. <div class="bg2">
  7. <h5>Title 2</h5>
  8. <p>And now, the second content.</p>
  9. </div>
  10. <div class="bg1">
  11. <h5>Title 3</h5>
  12. <p>Another one. It may be useful for many things no ?</p>
  13. </div>
  14. <div class="bg2">
  15. <h5>Title 4</h5>
  16. <p>And the last one... So, what's your opinion on this script ?</p>
  17. </div>
  18. </div>

Javascript

  1. verticaltextmenu = new BySlideMenu('verticaltextmenu', {
  2. defaultIndex: 1,
  3. vertical: true,
  4. elementHeight: 110,
  5. elementWidth: 200,
  6. compressSize: 30,
  7. useOverflow: true
  8. });

Résultat

Titre 1

Voici le premier contenu. Sympa non ?

Titre 2

Et maintenant, le second contenu.

Titre 3

Un autre. Ça peut être utile...

Titre 4

Et le dernier. Alors, votre opinion sur ce script ? Ce texte est long, et devrait dépasser du cadre. Merci useOverflow.

Exemple 11 : Agir sur un menu avec un lien

HTML

  1. <ul style="font-size: 16pt;">
  2. <li><a href="javascript:verticaltextmenu.expand(3)">
  3. Display the third element, but don't pin it.</a></li>
  4. <li><a href="#" onclick="verticaltextmenu.expand(4, true); return false;">
  5. Display and pin the fourth element.</a></li>
  6. </ul>

Résultat

Exemple 12 : Paramétrage de la largeur et de la hauteur du conteneur

HTML

  1. <ul id="fullwidthmenu">
  2. <li class="bg1 icon1">Element 1</li>
  3. <li class="bg2 icon2">Element 2</li>
  4. <li class="bg1 icon3">Element 3</li>
  5. <li class="bg2 icon4">Element 4</li>
  6. <li class="bg1 icon5">Element 5</li>
  7. <li class="bg2 icon6">Element 6</li>
  8. <li class="bg1 icon7">Element 7</li>
  9. <li class="bg2 icon8">Element 8</li>
  10. <li class="bg1 icon9">Element 9</li>
  11. </ul>

Javascript

  1. var fullwidthmenu = new BySlideMenu('fullwidthmenu', {
  2. defaultIndex: 1,
  3. containerHeight: 30,
  4. containerWidth: "full"
  5. });

Résultat