lintel-contrib-navs
Version:
Navigation tools for lintel.
139 lines (124 loc) • 6.67 kB
HTML
<html>
<head>
<link rel="stylesheet" href="../../bower_components/lintel/dist/lintel.css">
<link rel="stylesheet" href="../../dist/navs.css">
<script src="../../bower_components/jquery/dist/jquery.js"></script>
<script src="../../dist/navs.js"></script>
</head>
<body class="pad">
<!-- TABS -->
<ul class="nav-list nav-tabs" role="tablist">
<li class="active" role="presentation">
<a href="#home" data-toggle="tab" role="tab" aria-controls="#home" aria-expanded="true">Home</a>
</li>
<li role="presentation">
<a href="#profile" data-toggle="tab" role="tab" aria-controls="#profile" aria-expanded="false">Profile</a>
</li>
<li role="presentation">
<a href="#activity" data-toggle="tab" role="tab" aria-controls="#activity" aria-expanded="false">Activity</a>
</li>
</ul>
<div class="tab-panel active" id="home" role="tabpanel">
You mean while I'm sleeping in it? Um, is this the boring, peaceful kind of taking to the streets? No! I want to live! There are still too many things I don't own! Or a guy who burns down a bar for the insurance money!
</div>
<div class="tab-panel" id="profile" role="tabpanel" style="display: none;">
Shinier than yours, meatbag. And from now on you're all named Bender Jr. Incidentally, you have a dime up your nose. I decline the title of Iron Cook and accept the lesser title of Zinc Saucier, which I just made up. Uhh… also, comes with double prize money. Humans dating robots is sick.
</div>
<div class="tab-panel" id="activity" role="tabpanel" style="display: none;">
You people wonder why I'm still single? It's 'cause all the fine robot sisters are dating humans! I didn't ask for a completely reasonable excuse! I asked you to get busy! Do a flip! I could if you hadn't turned on the light and shut off my stereo.
</div>
<br><br>
<!-- PILLS -->
<ul class="nav-list nav-pills" role="tablist">
<li class="active" role="presentation">
<a href="#home2" data-toggle="tab" role="tab" aria-controls="#home2" aria-expanded="true">Home</a>
</li>
<li role="presentation">
<a href="#profile2" data-toggle="tab" role="tab" aria-controls="#profile2" aria-expanded="false">Profile</a>
</li>
<li role="presentation">
<a href="#activity2" data-toggle="tab" role="tab" aria-controls="#activity2" aria-expanded="false">Activity</a>
</li>
</ul>
<div class="tab-panel active" id="home2" role="tabpanel">
You mean while I'm sleeping in it? Um, is this the boring, peaceful kind of taking to the streets? No! I want to live! There are still too many things I don't own! Or a guy who burns down a bar for the insurance money!
</div>
<div class="tab-panel" id="profile2" role="tabpanel" style="display: none;">
Shinier than yours, meatbag. And from now on you're all named Bender Jr. Incidentally, you have a dime up your nose. I decline the title of Iron Cook and accept the lesser title of Zinc Saucier, which I just made up. Uhh… also, comes with double prize money. Humans dating robots is sick.
</div>
<div class="tab-panel" id="activity2" role="tabpanel" style="display: none;">
You people wonder why I'm still single? It's 'cause all the fine robot sisters are dating humans! I didn't ask for a completely reasonable excuse! I asked you to get busy! Do a flip! I could if you hadn't turned on the light and shut off my stereo.
</div>
<br><br>
<!-- FLAT -->
<ul class="nav-list nav-flat" role="tablist">
<li class="active" role="presentation">
<a href="#home3" data-toggle="tab" role="tab" aria-controls="#home3" aria-expanded="true">Home</a>
</li>
<li role="presentation">
<a href="#profile3" data-toggle="tab" role="tab" aria-controls="#profile3" aria-expanded="false">Profile</a>
</li>
<li role="presentation">
<a href="#activity3" data-toggle="tab" role="tab" aria-controls="#activity3" aria-expanded="false">Activity</a>
</li>
</ul>
<div class="tab-panel active" id="home3" role="tabpanel">
You mean while I'm sleeping in it? Um, is this the boring, peaceful kind of taking to the streets? No! I want to live! There are still too many things I don't own! Or a guy who burns down a bar for the insurance money!
</div>
<div class="tab-panel" id="profile3" role="tabpanel" style="display: none;">
Shinier than yours, meatbag. And from now on you're all named Bender Jr. Incidentally, you have a dime up your nose. I decline the title of Iron Cook and accept the lesser title of Zinc Saucier, which I just made up. Uhh… also, comes with double prize money. Humans dating robots is sick.
</div>
<div class="tab-panel" id="activity3" role="tabpanel" style="display: none;">
You people wonder why I'm still single? It's 'cause all the fine robot sisters are dating humans! I didn't ask for a completely reasonable excuse! I asked you to get busy! Do a flip! I could if you hadn't turned on the light and shut off my stereo.
</div>
<br><br>
<!-- VERTICAL TABS -->
<ul class="nav-list nav-tabs nav-tabs-y nav-tabs-y-left" role="tablist">
<li class="active" role="presentation">
<a href="#" role="tab">Home</a>
</li>
<li role="presentation">
<a href="#" role="tab">Profile</a>
</li>
<li role="presentation">
<a href="#" role="tab">Activity</a>
</li>
</ul>
<ul class="nav-list nav-tabs nav-tabs-y nav-tabs-y-right" role="tablist">
<li class="active" role="presentation">
<a href="#" role="tab">Home</a>
</li>
<li role="presentation">
<a href="#" role="tab">Profile</a>
</li>
<li role="presentation">
<a href="#" role="tab">Activity</a>
</li>
</ul>
<!-- VERTICAL PILLS -->
<ul class="nav-list nav-pills nav-pills-y" role="tablist">
<li class="active" role="presentation">
<a href="#" role="tab">Home</a>
</li>
<li role="presentation">
<a href="#" role="tab">Profile</a>
</li>
<li role="presentation">
<a href="#" role="tab">Activity</a>
</li>
</ul>
<!-- VERTICAL FLAT -->
<ul class="nav-list nav-flat nav-flat-y" role="tablist">
<li class="active" role="presentation">
<a href="#" role="tab">Home</a>
</li>
<li role="presentation">
<a href="#" role="tab">Profile</a>
</li>
<li role="presentation">
<a href="#" role="tab">Activity</a>
</li>
</ul>
</body>
</html>