Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
tree: 80ea89428a
Fetching contributors…

Cannot retrieve contributors at this time

185 lines (162 sloc) 8.098 kb
<!DOCTYPE html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8" />
<!-- Set the viewport width to device width for mobile -->
<meta name="viewport" content="width=device-width" />
<title>Foundation Tabs Testing</title>
<!-- Included CSS Files -->
<link rel="stylesheet" href="stylesheets/styles.css">
<script src="../vendor/assets/javascripts/foundation/modernizr.foundation.js"></script>
<!-- IE Fix for HTML5 Tags -->
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="row">
<div class="twelve columns">
<p><a href="index.html">&laquo; Back</a></p>
<h2>Foundation Tabs Testing</h2>
<hr />
<dl class="sub-nav">
<dt>Go to:</dt>
<dd><a href="#simple-tabs">Simple Tabs</a></dd>
<dd><a href="#tab-sizing">Tab Sizing</a></dd>
<dd><a href="#contained-tabs">Contained Tabs</a></dd>
<dd><a href="#pill-style-tables">Pill-Style Tabs</a></dd>
<dd><a href="#vertical-tabs">Vertical Tabs</a></dd>
<dd><a href="#mobile-tabs">Mobile Tabs</a></dd>
</dl>
</div>
</div>
<!-- Test Foundation Components Here -->
<div class="row">
<div class="twelve columns">
<h3>Tabs</h3>
<h4 class="subheader">Tabs are very versatile both as organization and navigational constructs. With the base Foundation package, tabs in the markup specified below are already hooked up &mdash; no extra work required.</h4>
<br>
<div class="row">
<div class="four columns">
<a name="simple-tabs"></a>
<h4>Simple Tabs</h4>
<p>Tabs are made of <strong>two objects:</strong> a <code>dl</code> object containing the tabs themselves, and a <code>ul</code> object containing the tab content.</p>
</div>
<br>
<div class="eight columns">
<dl class="tabs">
<dd class="active"><a href="#simple1">Simple Tab 1</a></dd>
<dd><a href="#simple2">Simple Tab 2</a></dd>
<dd class="hide-for-small"><a href="#simple3">Simple Tab 3</a></dd>
</dl>
<ul class="tabs-content">
<li class="active" id="simple1Tab">This is simple tab 1's content. Pretty neat, huh?</li>
<li id="simple2Tab">This is simple tab 2's content. Now you see it!</li>
<li id="simple3Tab">This is simple tab 3's content. It's only okay.</li>
</ul>
</div>
</div>
<br><br>
<div class="row">
<div class="four columns">
<a name="tab-sizing"></a>
<h4>Tab Sizing</h4>
<p>If you want your tabs to run the full width of their container evenly, you can add class of <code>.two-up</code>, <code>.three-up</code>, <code>.four-up</code>, and <code>.five-up</code> to them.</p>
</div>
<br>
<div class="eight columns">
<dl class="tabs three-up">
<dd class="active"><a href="#evenTab1">Even Tab 1</a></dd>
<dd><a href="#evenTab2">Even Tab 2</a></dd>
<dd><a href="#evenTab3">Even Tab 3</a></dd>
</dl>
<dl class="tabs five-up">
<dd class="active"><a href="#evenTab4">Tab 4</a></dd>
<dd><a href="#evenTab5">Tab 5</a></dd>
<dd><a href="#evenTab6">Tab 6</a></dd>
<dd><a href="#evenTab7">Tab 7</a></dd>
<dd><a href="#evenTab8">Tab 8</a></dd>
</dl>
</div>
</div>
<br><br>
<div class="row">
<div class="four columns">
<a name="contained-tabs"></a>
<h4>Contained Tabs</h4>
<p>Contained tabs have a simple added class of "contained" on the tabs-content element. What that means is the tab content has a border around it tying it to the tabs. You can still use standard column sizes inside a tab element.</p>
</div>
<br>
<div class="eight columns">
<dl class="tabs contained">
<dt>Title 1</dt>
<dd class="active"><a href="#simpleContained1">Simple Tab 1</a></dd>
<dd class="hide-for-small"><a href="#simpleContained2">Simple Tab 2</a></dd>
<dt class="hide-for-small">Title 1</dt>
<dd class="hide-for-small"><a href="#simpleContained3">Simple Tab 3</a></dd>
</dl>
<ul class="tabs-content contained">
<li class="active" id="simpleContained1Tab">This is simple tab 1's content. Pretty neat, huh?</li>
<li id="simpleContained2Tab">This is simple tab 2's content. Now you see it!</li>
<li id="simpleContained3Tab">This is simple tab 3's content. It's only okay.</li>
</ul>
</div>
</div>
<br><br>
<div class="row">
<div class="four columns">
<a name="pill-style-tabs"></a>
<h4>Pill-Style Tabs</h4>
<p>If you need an alternate view for tabs (especially for filters, or similar), you can use pill-style tabs. They look like this:</p>
</div>
<br>
<div class="eight columns">
<dl class="tabs pill">
<dd class="active"><a href="#pillTab1">Pill Tab 1</a></dd>
<dd><a href="#pillTab2">Pill Tab 2</a></dd>
<dd class="hide-for-small"><a href="#pillTab3">Pill Tab 3</a></dd>
</dl>
</div>
</div>
<div class="row">
<div class="four columns">
<a name="vertical-tabs"></a>
<h4>Vertical Tabs</h4>
<p>You can also use tabs in a vertical configuration by adding a class of 'vertical' to the <code>dl</code> element. These are great for more scalable nav, and you can see how they work on this page on a tablet or desktop.</p>
</div>
<div class="eight columns">
<dl class="vertical tabs">
<dd class="active"><a href="#vertical1">Vertical Tab 1</a></dd>
<dd><a href="#vertical2">Vertical Tab 2</a></dd>
<dd><a href="#vertical3">Vertical Tab 3</a></dd>
</dl>
</div>
</div>
<a name="mobile-tabs"></a>
<h4>Mobile Tabs</h4>
<p>If you want a standard, horizontal tab group to act vertical on small devices, adding a class of "mobile" to a standard (not vertical) tab group will switch them to full width nav bars on small screens.</p>
</div>
</div>
<!-- Included JS Files -->
<script src="../vendor/assets/javascripts/foundation/jquery.js"></script>
<script src="../vendor/assets/javascripts/foundation/jquery.foundation.mediaQueryToggle.js"></script>
<script src="../vendor/assets/javascripts/foundation/jquery.placeholder.js"></script>
<script src="../vendor/assets/javascripts/foundation/jquery.foundation.alerts.js"></script>
<script src="../vendor/assets/javascripts/foundation/jquery.foundation.accordion.js"></script>
<script src="../vendor/assets/javascripts/foundation/jquery.foundation.buttons.js"></script>
<script src="../vendor/assets/javascripts/foundation/jquery.foundation.tooltips.js"></script>
<script src="../vendor/assets/javascripts/foundation/jquery.foundation.forms.js"></script>
<script src="../vendor/assets/javascripts/foundation/jquery.foundation.tabs.js"></script>
<script src="../vendor/assets/javascripts/foundation/jquery.foundation.navigation.js"></script>
<script src="../vendor/assets/javascripts/foundation/jquery.foundation.reveal.js"></script>
<script src="../vendor/assets/javascripts/foundation/jquery.foundation.orbit.js"></script>
<script src="../vendor/assets/javascripts/foundation/app.js"></script>
<script type="text/javascript">
// Page-Specific JavaScript Goes Here
</script>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.