Foundation CSS Kitchen Sink Tabs
Last Updated :
01 Mar, 2022
Foundation CSS is the frontend framework of CSS that is used to build responsive websites, apps, and emails that work perfectly on any device. It is written using HTML, CSS, and Javascript and is used by many famous companies like Amazon, Facebook, eBay, etc. It uses packages like Grunt and Libsass for fast coding and controlling and Saas compiler to make development faster.
Kitchen Sink has the elements to work in websites and applications. Kitchen Sink Tabs are the navigation tabs that is used to display content in panels without leaving the page.
Used classes:
- tabs: It is used to create tabs.
- tabs-title: To give the title of the tab.
- tabs-content: It is used to provide the content of the tab.
- tabs-panel: It is used to create the panel for the tab.
Syntax:
<ul class="tabs" data-tabs id="example-tabs">
...
</ul>
or
<div class="tabs-content"
data-tabs-content="example-tabs">
...
</div>
Example 1: Below is the example that illustrates the use of Kitchen Sink Tabs.
HTML
<!DOCTYPE html>
<html>
<head>
<link crossorigin="anonymous" rel="stylesheet" href=
<script src=
</script>
<script crossorigin="anonymous" src=
</script>
</head>
<body>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>
Foundation CSS Kitchen Sink Tabs
</h3>
<ul class="tabs" data-tabs id="tabs_example">
<li class="tabs-title is-active"><a href="#tab1">Tab 1</a></li>
<li class="tabs-title"><a href="#tab2">Tab 2</a></li>
<li class="tabs-title"><a href="#tab3">Tab 3</a></li>
</ul>
<div class="tabs-content" data-tabs-content="tabs_example">
<div class="tabs-panel is-active" id="tab1">
<p>Tab 1</p>
<p>This is first tab</p>
</div>
<div class="tabs-panel" id="tab2">
<p>Tab 2</p>
<p>This is second tab</p>
</div>
<div class="tabs-panel" id="tab3">
<p>Tab 3</p>
<p>This is third tab</p>
</div>
</div>
<script>
$(document).ready(function () {
$(document).foundation();
})
</script>
</body>
</html>
|
Output:
Example 2: Below is the another example that illustrates the use of Kitchen Sink Tabs using some images.
HTML
<!DOCTYPE html>
<html>
<head>
<link crossorigin="anonymous" rel="stylesheet" href=
<script src=
</script>
<script crossorigin="anonymous" src=
</script>
</head>
<body>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>Foundation CSS Kitchen Sink Tabs</h3>
<ul class="tabs" data-tabs id="tabs_example">
<li class="tabs-title is-active"><a href="#tab1">Tab 1</a></li>
<li class="tabs-title"><a href="#tab2">Tab 2</a></li>
<li class="tabs-title"><a href="#tab3">Tab 3</a></li>
<li class="tabs-title"><a href="#tab4">Tab 4</a></li>
<li class="tabs-title"><a href="#tab5">Tab 5</a></li>
<li class="tabs-title"><a href="#tab6">Tab 6</a></li>
</ul>
<div class="tabs-content" data-tabs-content="tabs_example">
<div class="tabs-panel is-active" id="tab1">
<p>Tab 1</p>
<p>This is first tab</p>
</div>
<div class="tabs-panel" id="tab2">
<p>Tab 2</p>
<img class="thumbnail" src=
</div>
<div class="tabs-panel" id="tab3">
<p>Tab 3</p>
<p>This is third tab</p>
</div>
<div class="tabs-panel" id="tab4">
<p>Tab 4 image</p>
<img class="thumbnail" src=
</div>
<div class="tabs-panel" id="tab5">
<p>Tab 5</p>
<p>This is fifth tab</p>
</div>
<div class="tabs-panel" id="tab6">
<p>Tab 6</p>
<p>This is sixth tab</p>
</div>
</div>
<script>
$(document).ready(function () {
$(document).foundation();
})
</script>
</body>
</html>
|
Output:
Reference link: https://get.foundation/sites/docs/kitchen-sink.html#tabs
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...