Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/djlechuck/moonav

A tab system for MooTools with transition or not (slide, fade, none).
https://github.com/djlechuck/moonav

Last synced: about 2 months ago
JSON representation

A tab system for MooTools with transition or not (slide, fade, none).

Awesome Lists containing this project

README

        

MooNav
===========

A tab system for MooTools with transition or not (slide, fade, none).

How to use
----------

MooTab can be easily use, with just one line! But we also have possibility to customize some points.

There are three ways to do the transition:
- none (default)
- slide (up/down for the moment)
- fade

There are some examples:
- Basic, without transition effect and the default class
new MooNav();

- Custom with slide effect and redefinition of tabs, parts and active class
new MooNav({
tabs: '.onglet_slide',
parts: '.partie_slide',
transition: 'slide',
classActive: 'actif_bis'
});

- Custom with fade effect, redefinition of tabs and parts class and custom first active tab
new MooNav({
tabs: '.onglet_fade',
parts: '.partie_fade',
transition: 'fade',
firstActiveTab: 2
});

There isn't any other methods to call, all is done!

You can add tabs with the addTab(li_content, div_content).
For example :
myNav = new MooNav();
myNav.addTab("Tab name", "Tab content");

Screenshots
-----------

![Screenshot 1](http://www.djlechuck.fr/MooNav/Screens/screen1.png)
![Screenshot 2](http://www.djlechuck.fr/MooNav/Screens/screen2.png)
![Screenshot 3](http://www.djlechuck.fr/MooNav/Screens/screen3.png)