A Pen by Ian Kirkland on CodePen.
Created
September 5, 2017 03:26
-
-
Save ianthekirkland/854f7a9672b2cf07d25d06ae9b800462 to your computer and use it in GitHub Desktop.
Foundation/Vertical Tabs (Flex)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- This demo uses flex grid but you can use float grid too --> | |
<section class="container"> | |
<div class="row" style="margin-top: 1.rem;"> | |
<div class="columns"> | |
<h2>Vertical Tabs</h2> | |
<p>And here is the example of Vertical Tabs. Just add the <code>.vertical</code> class to a tabstrip to stack tabs vertically. You can also place the tabstrip and the tab contents in a grid to make them sit side-by-side.</p> | |
</div> | |
</div> | |
<div class="row collapse"> | |
<div class="medium-3 columns"> | |
<ul class="vertical tabs" data-tabs id="example-tabs"> | |
<li class="tabs-title is-active"><a href="#panel1v" aria-selected="true">Tab 1</a></li> | |
<li class="tabs-title"><a href="#panel2v">Tab 2</a></li> | |
<li class="tabs-title"><a href="#panel3v">Tab 3</a></li> | |
<li class="tabs-title"><a href="#panel4v">Tab 4</a></li> | |
<li class="tabs-title"><a href="#panel5v">Tab 5</a></li> | |
<li class="tabs-title"><a href="#panel6v">Tab 6</a></li> | |
</ul> | |
</div> | |
<div class="medium-9 columns"> | |
<div class="tabs-content" data-tabs-content="example-tabs"> | |
<div class="tabs-panel is-active" id="panel1v"> | |
<p>One</p> | |
<p>Check me out! I'm a super cool Tab panel with text content!</p> | |
</div> | |
<div class="tabs-panel" id="panel2v"> | |
<p>Two</p> | |
<img class="thumbnail" src="//foundation.zurb.com/sites/docs/assets/img/generic/rectangle-7.jpg"> | |
</div> | |
<div class="tabs-panel" id="panel3v"> | |
<p>Three</p> | |
<p>Check me out! I'm a super cool Tab panel with text content!</p> | |
</div> | |
<div class="tabs-panel" id="panel4v"> | |
<p>Four</p> | |
<img class="thumbnail" src="//foundation.zurb.com/sites/docs/assets/img/generic/rectangle-2.jpg"> | |
</div> | |
<div class="tabs-panel" id="panel5v"> | |
<p>Five</p> | |
<p>Check me out! I'm a super cool Tab panel with text content!</p> | |
</div> | |
<div class="tabs-panel" id="panel6v"> | |
<p>Six</p> | |
<img class="thumbnail" src="//foundation.zurb.com/sites/docs/assets/img/generic/rectangle-8.jpg"> | |
</div> | |
</div> | |
</div> | |
</div> | |
</section> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$(document).foundation(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> | |
<script src="https://codepen.io/ZURBFoundation/pen/jmYLwq"></script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* Demo Styles | |
*/ | |
* { | |
color: #444444; | |
} | |
body { | |
padding: 2rem 1rem; | |
} | |
.container { | |
width: 80%; | |
margin: auto; | |
margin-top: 2em; | |
} | |
.row { | |
margin-bottom: 2em; | |
} | |
.row.small-up-12 { | |
margin-bottom: 0; | |
} | |
.column { | |
margin-bottom: .5em; | |
} | |
/* Hides Foundation Docs Callout */ | |
[href*="https://foundation.zurb.com/sites.html"] { | |
visibility: hidden !important; | |
padding: 0px !important; | |
margin: 0px !important; | |
width: 0px !important; | |
height: 0px !important; | |
display: none !important; | |
} | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<link href="https://codepen.io/ZURBFoundation/pen/jmYLwq" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment