examples/tabs.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="../less/bootstrap.css"/>
<script type="text/javascript" src="../js/libs/vendors/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="../js/libs/materialbootstrap/tab.js"></script>
<script type="text/javascript" src="../js/libs/materialbootstrap/dropdown.js"></script>
</head>
<body>
<div style="padding: 10px">
<h4>Normal Tabs</h4>
<div class="material-nav">
<div class="nav-content">
<ul class="nav nav-tabs" role="tablist">
<li class="active"><a role="tab" data-toggle="tab" data-target="#tab1">Home</a></li>
<li><a role="tab" data-toggle="tab" data-target="#tab2">Profile</a></li>
<li class="material-dropdown dropdown">
<a class="dropdown-toggle" data-toggle="dropdown">Messages <span class="caret"></span></a>
<ul class="dropdown-menu dropdown-tab" role="menu">
<li><a role="tab" data-toggle="tab">Sub Item 1</a></li>
<li><a role="tab" data-toggle="tab">Sub Item 2</a></li>
<li><a role="tab" data-toggle="tab">Sub Item 3</a></li>
</ul>
</li>
<li><a role="tab" data-toggle="tab">very long title of tab</a></li>
<div class="selected"></div>
</ul>
</div>
</div>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
Tab 1
</div>
<div class="tab-pane" id="tab2">
Tab 2
</div>
<div class="tab-pane" id="tab3">
Tab 3
</div>
<div class="tab-pane" id="tab4">
Tab 4
</div>
</div>
</div>
<div style="padding: 10px">
<h4>Styled Tabs</h4>
<div class="material-nav" data-border="yellow" data-background="cyan" data-color="yellow">
<div class="nav-content">
<ul class="nav nav-tabs" role="tablist" data-border="yellow" data-background="cyan" data-color="yellow">
<li class="active"><a href="#" role="tab" data-toggle="tab">Home</a></li>
<li><a href="#" role="tab" data-toggle="tab">Profile</a></li>
<li class="material-dropdown dropdown">
<a class="dropdown-toggle" data-toggle="dropdown">Messages <span class="caret"></span></a>
<ul class="dropdown-menu dropdown-tab" role="menu">
<li><a role="tab" data-toggle="tab">Sub Item 1</a></li>
<li><a role="tab" data-toggle="tab">Sub Item 2</a></li>
<li><a role="tab" data-toggle="tab">Sub Item 3</a></li>
</ul>
</li>
<li><a href="#" role="tab" data-toggle="tab">very long title of tab</a></li>
<div class="selected"></div>
</ul>
</div>
</div>
</div>
<div style="padding: 10px">
<h4>Scroll Tabs</h4>
<div class="material-nav" style="max-width: 800px" role="scroll">
<div class="nav-scroll-left">
<a class="mic-chevron-left"></a>
</div>
<div class="nav-content">
<ul class="nav nav-tabs" role="tablist">
<li><a href="#" role="tab" data-toggle="tab">Home</a></li>
<li><a href="#" role="tab" data-toggle="tab">Profile</a></li>
<li><a href="#" role="tab" data-toggle="tab">Messages</a></li>
<li><a href="#" role="tab" data-toggle="tab">very long title of tab</a></li>
<li><a href="#" role="tab" data-toggle="tab">Tab 5</a></li>
<li><a href="#" role="tab" data-toggle="tab">Tab 6</a></li>
<li class="active"><a href="#" role="tab" data-toggle="tab">Tab 7</a></li>
<div class="selected"></div>
</ul>
</div>
<div class="nav-scroll-right">
<a class="mic-chevron-right"></a>
</div>
</div>
</div>
</body>
</html>