Nanotabs s’utilise à l’aide de quelques paramètres seulement, ce qui devrait largement vous laisser le temps de faire un tour sur un site de casino en ligne pour vous détendre et gagner un peu d’argent en jouant au blackjack, par exemple !

Paramétrer nanotabs

nanotabs.settings = { c:"nanotabs", e:"click", s:"selected", d:0, f:false };

• c → Élément contenant votre menu,
• e → Type d’événement (click par défaut),
• s → Classe sélectionnée (classe selected utilisée par défaut),
• d → Onglet par défaut (onglet 0, par défaut),
• f → Fonction de rappel une fois que l’on a affiché un onglet.

→ Téléchargez nanotabs.

Profitez-en pour lire ou relire Menu à onglets (tabs) — idTabs ou domTab ? pour un comparatif complet entre deux scripts au coude à coude pour faire des menus à onglets.

Marquage HTML et classes CSS attendus pour jMenu :

<ul id="jMenu">
    <li><a class="fNiv">Niveau 1</a> <!-- Don't forget the 'fNiv' class, only on the first level link !! -->
        <ul>
            <li class="arrow"></li> <!-- Only for illustration : arrow_down.png -->
            <li><a>Niveau 2</a></li>
            <li><a>Niveau 2</a></li>
            <li><a>Niveau 2</a>
                <ul>
                    <li><a>Niveau 3</a></li>
                    <li><a>Niveau 3</a></li>
                    <li><a>Niveau 3</a></li>
                    <li><a>Niveau 3</a></li>
                </ul>
            </li>
            <li><a>Niveau 2</a></li>
        </ul>
    </li>
</ul>

Appel au script jMenu :

$(document).ready(function(){
    $("#jMenu").jMenu();
});

• La démonstration interactive vous permettra de tester toutes les options en direct-live et de copier-coller le script qui en résulte.
• jQuery UI sert uniquement à ajouter des effets pendant l’ouverture et la fermeture des sous-menus.
• Via @BlouLapinou

Voici le marquage HTML nécessaire :

<ul class="tabs">
        <li><a href="#tab1">Gallery</a></li>
        <li><a href="#tab2">Submit</a></li>
</ul>
<div class="tab_container">
    <div id="tab1" class="tab_content">
        <!--Content-->
    </div>
    <div id="tab2" class="tab_content">
        <!--Content-->
    </div>
</div>

Voir la démonstration.

1. Transformer une liste HTML en arborescence dossiers/fichiers
2. Ajouter un compteur de fichiers à chaque dossier
3. Ouvrir et fermer les dossiers
4. Ouvrir des dossiers par défaut dès l’ouverture
5. Déplacer les dossiers et fichiers en drag and drop
6. Supprimer un fichier de l’arbre
7. Sérialiser le résultat
8. Déclencher et utiliser des événements