Foundation tab


May 04, 2021 12:00 Foundation5


Table of contents


Foundation tab

Tab navigation is a great way to present different content and toggle content.

Tabs are created using the <ul class="tabs" data-tab> .tab-title

Tip: The currently selected item can .active class.

Instance

< ul class= "tabs" data-tab >
< li class= "tab-title active" > < a href= "#" > Home < /a > < /li >
< li class= "tab-title" > < a href= "#" > Menu 1 < /a > < /li >
< li class= "tab-title" > < a href= "#" > Menu 2 < /a > < /li >
< li class= "tab-title" > < a href= "#" > Menu 3 < /a > < /li >
< /ul >

Try it out . . .

Vertical tab

Vertical tabs can .vertical class:

Instance

< ul class= "tabs vertical" data-tab >

Try it out . . .

Switch tabs

If you want to set up a toggle label, you can use the .lt;div?gt; element .content class. A dd a unique ID to each tab, and connect to the list item ("#menu1" opens the option content of id"menu1"). Finally, put all the options on the <div> <div> needs to add .tabs-content and initialize Foundation JS.

Note The .active is automatically added to the currently selected tab:

Instance

< ul class= "tabs" data-tab >
< li class= "tab-title active" > < a href= "#home" > Home < /a > < /li >
< li class= "tab-title" > < a href= "#menu1" > Menu 1 < /a > < /li >
< li class= "tab-title" > < a href= "#menu2" > Menu 2 < /a > < /li >
< li class= "tab-title" > < a href= "#menu3" > Menu 3 < /a > < /li >
< /ul >
< div class= "tabs-content" >
< div class= "content active" id= "home" >
< h3 > HOME < /h3 >
< p > Home is where the heart is.. < /p >
< /div >
< div class= "content" id= "menu1" >
< h3 > Menu 1 < /h3 >
< p > Some text, blabla < /p >
< /div >
< div class= "content" id= "menu2" >
< h3 > Menu 2 < /h3 >
< p > Some other text. < /p >
< /div >
< div class= "content" id= "menu3" >
< h3 > Menu 3 < /h3 >
< p > Last tab. < /p >
< /div >
< /div >

<!-- Initialize Foundation JS -->
< script >
$(document).ready(function() {
$(document).foundation();
})
< /script >

Try it out . . .

Tab fades in

Use CSS to customize the effect of tab fade-in:

Instance

.tabs-content > .content.active {
-webkit-animation: fadeEffect 1s;
animation: fadeEffect 1s;
}

@-webkit-keyframes fadeEffect {
from { opacity: 0; }
to { opacity: 1; }
}

@keyframes fadeEffect {
from { opacity: 0; }
to { opacity: 1; }
}

Try it out . . .