<< BACK TO HOME

BySlideMenu - Nice and powerful accordion menu

What is BySlideMenu?

BySlideMenu is a plugin for Mootools which allow you to easily create a beautiful accordion menu (sliding menu) on any element you want (ul/li, div, p ...) using images and/or text.

Features

  • Works horizontally or vertically.
  • Automatic size - The container width/height can be adjusted automatically.
  • Menu is expandable by mouseover or by click, as you want.
  • Menu can be pinned or not, by mouseover or click, you choose.
  • A default index can be defined.
  • Can be used with any elements (ul/li, div, p...)
  • Overflow support.

Usage

HTML

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

Note: You can use any element you want. Instead of ul / li you can use div / div or div / p ...

Javascript

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

Container

The ID of the container to transform into sliding menu.

Options

Option Type Default Description
defaultIndex int false Index of the element to expand at start. Set to false if none.
If you want to expand the third element at start, set defaultIndex to 3.
expandMode string "mouseover" "mouseover": elements will expand on mouse over.
"click": elements will expand on mouse clic.
false: elements will not expand by mouse.
pinMode string false "mouseover": Elements stay opened on mouse over.
"click": Elements stay opened on mouse click.
false: Elements don't stay opened.
vertical bool false Set to true to switch in vertical mode.
compressSize int 40 The width (or height, in vertical mode) of the elements when "compressed".
autoSize bool true If true, the script will try to detect elements size by checking the first founded image.
If false, or if no image is found, the two options below will be used.
containerWidth int Container width. The width of elements will be automatically calculated from container width. If value is set to "full", then the container width will be its parent's width.
containerHeight int Container height. The height of elements will be automatically calculated from container height. If value is set to "full", then the container height will be its parent's height.
elementWidth int 320 The width of expanded elements. This option will be used if autoSize is set to false, or if no image is found in menu, and if containerWidth is not defined.
elementHeight int 240 The height of expanded elements. This option will be used if autoSize is set to false, or if no image is found in menu, and if containerHeight is not defined.
useOverflow bool false If this option is set to true, then overflow will be activated when displaying an element.

Public method

The mySlideMenu.expand(index, setDefault) method can be called to expand the indexth element, and pin it if setDefault is true.

Requirements

BySlideMenu is written for Mootools v1.2

It requires these modules (and their dependencies):

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

License

BySlideMenu by ByScripts is licensed under a Open Source MIT License.

Changelog

1.1 beta

+ Possibility to set a container width and/or height, instead of setting the elements width and/or height.

+ Possibility to activate overflow on elements, when displayed.

* Enhancement of the calculation of the elements width/height. Now taking in account the padding and the border width.

0.9 beta

# First release

Examples

Example 1: Default options

HTML

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

Javascript

  1. var slideMenu = new BySlideMenu();

Output

Example 2: Same as above, but changing compression width and duration

HTML

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

Javascript

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

Output

Example 3: Vertical menu

HTML

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

Javascript

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

Output

Example 4: Menu using default index and Bounce transition

HTML

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

Javascript

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

Output

Example 5: Menu expanded by mouse click

HTML

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

Javascript

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

Output

Example 6: Menu pinned by mouse click

HTML

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

Javascript

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

Output

Example 7: Menu pinned by mouse over

HTML

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

Javascript

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

Output

Example 8: Menu expanded and pinned by mouse click

HTML

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

Javascript

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

Output

Example 9: Text menu

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. });

Output

Example 10: Vertical text menu with 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. });

Output

Title 1

This is the first content. Don't you think it's great ?

Title 2

And now, the second content.

Title 3

Another one. It may be useful for many things no ?

Title 4

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

Example 11: Act on menu with links

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>

Output

Example 12 : Setting the container width and height

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. });

Output