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:
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 . . .