106 lines
5.3 KiB
Markdown
106 lines
5.3 KiB
Markdown
---
|
|
title: NavTabs Demo
|
|
permalink: /navtabs/
|
|
tags: []
|
|
keywords:
|
|
audience:
|
|
last_updated:
|
|
summary: "Navtabs provide a tabbable navagation directly in your content. Navtabs are helpful for showing code samples for different programming languages."
|
|
---
|
|
{% include linkrefs.html %}
|
|
|
|
## Common uses
|
|
|
|
Navtabs are particularly useful for scenarios where you want to show a variety of options, such as code samples for Java, .NET, or PHP, on the same page.
|
|
|
|
While you could resort to single-source publishing to provide different outputs for each unique programming language or role, you could also use navtabs to allow users to select the content you want.
|
|
|
|
Navtabs are better for SEO since you avoid duplicate content and drive users to the same page.
|
|
|
|
## Navtabs demo
|
|
|
|
The following is a demo of a navtab. Refresh your page to see the tab you selected remain active.
|
|
|
|
<ul id="profileTabs" class="nav nav-tabs">
|
|
<li class="active"><a href="#profile" data-toggle="tab">Profile</a></li>
|
|
<li><a href="#about" data-toggle="tab">About</a></li>
|
|
<li><a href="#match" data-toggle="tab">Match</a></li>
|
|
</ul>
|
|
<div class="tab-content">
|
|
<div role="tabpanel" class="tab-pane active" id="profile">
|
|
<h2>Profile</h2>
|
|
<p>Praesent sit amet fermentum leo. Aliquam feugiat, nibh in u ltrices mattis, felis ipsum venenatis metus, vel vehicula libero mauris a enim. Sed placerat est ac lectus vestibulum tempor. Quisque ut condimentum massa. Proin venenatis leo id urna cursus blandit. Vivamus sit amet hendrerit metus.</p>
|
|
</div>
|
|
|
|
<div role="tabpanel" class="tab-pane" id="about">
|
|
<h2>About</h2>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel sollicitudin felis. Sed eu arcu sed ipsum semper luctus eu a tortor. Suspendisse id leo eu metus laoreet varius. Mauris consequat accumsan ex, a iaculis metus fermentum a. Praesent sit amet fermentum leo. Aliquam feugiat, nibh in u ltrices mattis, felis ipsum venenatis metus, vel vehicula libero mauris a enim. Sed placerat est ac lectus vestibulum tempor. Quisque ut condimentum massa. Proin venenatis leo id urna cursus blandit. Vivamus sit amet hendrerit metus.about</p></div>
|
|
|
|
<div role="tabpanel" class="tab-pane" id="match">
|
|
<h2>Match</h2>
|
|
<p>Vel vehicula libero mauris a enim. Sed placerat est ac lectus vestibulum tempor. Quisque ut condimentum massa. Proin venenatis leo id urna cursus blandit. Vivamus sit amet hendrerit metus.</p>
|
|
</div>
|
|
</div>
|
|
|
|
## Code
|
|
|
|
Here's the code for the above (with the filler text abbreviated):
|
|
|
|
```html
|
|
<ul id="profileTabs" class="nav nav-tabs">
|
|
<li class="active"><a href="#profile" data-toggle="tab">Profile</a></li>
|
|
<li><a href="#about" data-toggle="tab">About</a></li>
|
|
<li><a href="#match" data-toggle="tab">Match</a></li>
|
|
</ul>
|
|
<div class="tab-content">
|
|
<div role="tabpanel" class="tab-pane active" id="profile">
|
|
<h2>Profile</h2>
|
|
<p>Praesent sit amet fermentum leo....</p>
|
|
</div>
|
|
|
|
<div role="tabpanel" class="tab-pane" id="about">
|
|
<h2>About</h2>
|
|
<p>Lorem ipsum ...</p></div>
|
|
|
|
<div role="tabpanel" class="tab-pane" id="match">
|
|
<h2>Match</h2>
|
|
<p>Vel vehicula ....</p>
|
|
</div>
|
|
</div>
|
|
```
|
|
|
|
## Design constraints
|
|
|
|
Bootstrap automatically clears any floats after the navtab. If you have a navtab that appears in the same space as pagemetadata floating column, there will be a big space after the navtab until the end of the pagemetadata element because there's a `clear: float` property applied after the nav class.
|
|
|
|
If you change the `clear:float` property, the first heading/text on the tab will suddenly float along side the tab, which is unfortunate.
|
|
|
|
## Appearance in the mini-TOC
|
|
|
|
If you put a heading in the navtab content, that heading will appear in the mini-TOC as long as the heading tag has an ID. If you don't want the headings for each navtab section to appear in the mini-TOC, simply omit the ID attribute from the heading tag. Without this attribute, the mini-TOC won't insert the heading title into the mini-TOC.
|
|
|
|
## Must use HTML
|
|
|
|
You must use HTML within the navtab content because each navtab section is surrounded with HTML, and you can't use Markdown inside of HTML.
|
|
|
|
## Match up ID tags
|
|
|
|
Each tab's `href` attribute must match the `id` attribute of the tab content's `div` section. So if your tab has `href="#acme"`, then you add `acme` as the ID attribute in `<div role="tabpanel" class="tab-pane" id="acme">`.
|
|
|
|
One of the tabs needs to be set as active, depending on what tab you want to be open by default (usually the first one).
|
|
|
|
```html
|
|
<div role="tabpanel" class="tab-pane active" id="acme">
|
|
```
|
|
|
|
## Sets a cookie
|
|
|
|
The navtabs are part of Bootstrap, but this theme sets a cookie to remember the last tab's state. The js/customscripts.js file has a long chunk of JavaScript that sets the cookie. The JavaScript comes from [this StackOverflow thread](http://stackoverflow.com/questions/10523433/how-do-i-keep-the-current-tab-active-with-twitter-bootstrap-after-a-page-reload).
|
|
|
|
By setting a cookie, if the user refreshes the page, the active tab is the tab the user last selected (rather than defaulting to the default active tab).
|
|
|
|
## Functionality to implement
|
|
|
|
One piece of functionality I'd like to implement is the ability to set site-wide nav tab options. For example, if the user always chooses PHP instead of Java in the code samples, it would be great to set this option site-wide by default. However, this functionality isn't yet coded.
|
|
|