onglet Fondation
Tab navigation peut être très bon pour montrer un contenu différent, et le contenu peut être commuté.
Tab Utilisez les <ul class="tabs" data-tab> -Tab> pour créer chaque option <li> et ajouter .tab-title de classe pour créer.
Astuce: Vous pouvez utiliser l'élément sélectionné .active classe.
Exemples
<Class Li = "tab-titre active"> <a href = "#"> Accueil </ a> </ li>
<Class Li = "tab-titre "> <a href = "#"> Menu 1 </ a> </ li>
<Class Li = "tab-titre "> <a href = "#"> Menu 2 </ a> </ li>
<Class Li = "tab-titre "> <a href = "#"> Menu 3 </ a> </ li>
</ Ul>
Essayez »
onglet Vertical
onglet vertical Utilisez .vertical catégories:
commutation Tab
Si vous voulez changer l'onglet de configuration, vous pouvez utiliser l'élément <div> , plus .content classe. Plus un ID unique sur chaque onglet, et le connecter à l'élément de liste (<a href = "# menu1" ouvre id = "menu1" contenu en option). Enfin, toutes les options sur le contenu <div> sur l'élément, le <div> élément pour ajouter .tabs-content de classe, et initialise Fondation JS.
Remarque .active classe est automatiquement ajouté à l'onglet sélectionné:
Exemples
<Class Li = "tab-titre active"> <a href = "#home"> Accueil </ a> </ li>
<Li class = "tab-titre "> <a href = "# menu1"> Menu 1 </ a> </ li>
<Li class = "tab-titre "> <a href = "# menu2"> Menu 2 </ a> </ li>
<Li class = "tab-titre "> <a href = "# menu3"> Menu 3 </ a> </ li>
</ Ul>
<Div class = "tabs-content ">
<Class Div = "contenu actif" id = "home">
<H3> HOME </ h3>
<P> La maison est où le coeur est .. </ p>
</ Div>
<Div class = "content" id = "menu1">
<H3> Menu 1 </ h3 >
<P> Du texte, blabla < / p>
</ Div>
<Div class = "content" id = "menu2">
<H3> Menu 2 </ h3 >
<P> Certains autre texte. < / P>
</ Div>
<Div class = "content" id = "menu3">
<H3> Menu 3 </ h3 >
<P> Dernier onglet. </ P>
</ Div>
</ Div>
<! - Initialisation Fondation JS ->
<Script>
$ (Document) .ready (function () {
$ (Document) .foundation ();
})
</ Script>
Essayez »
Tab Fade
Utilisez CSS pour personnaliser les onglets disparaissent en effet:
Exemples
-webkit-animation: 1s fadeEffect;
animation: 1s fadeEffect;
}
@ -webkit-Keyframes fadeEffect {
de {opacité: 0;}
à {opacité: 1;}
}
@keyframes fadeEffect {
de {opacité: 0;}
à {opacité: 1;}
}
Essayez »