Lego2012
11/9/2016 - 6:44 PM
Sitemap With Alpha Index
Sitemap With Alpha Index
// Adds active state to secion navigation
$('.nav li').click(function(e) {
e.preventDefault();
$('.nav li').removeClass('active');
$(this).addClass('active');
});section {
border-bottom: 1px solid #ccc;
margin-top: 1em;
}
section .col-md-3 {
border-left: 1px solid #ccc;
}
section .col-md-3:first-child {
border: none;
}<div class="container">
<h1>Chronological With Alpha Index Site Map Template</h1>
<ul class="nav nav-pills">
<li role="presentation" class="nav-item"><a href="#sec1" class="nav-link">Section 1</a>
</li>
<li role="presentation" class="nav-item"><a href="#sec2" class="nav-link">Section 2</a>
</li>
<li role="presentation" class="nav-item"><a href="#sec3" class="nav-link">Section 3</a>
</li>
<li role="presentation" class="nav-item"><a href="#sec4" class="nav-link">Section 4</a>
</li>
<li role="presentation" class="nav-item"><a href="#secAlpha" class="nav-link">Section 4</a>
</li>
</ul>
<div class="row">
<div class="col-lg-8">
<section id="sec1">
<h2>Section 1</h2>
<div class="row">
<div class="col-lg-3">
<ul>
<li><a href="#">Home</a>
</li>
<li><a href="#">About</a>
</li>
<li><a href="#">Clients</a>
</li>
<li><a href="#">Contact Us</a>
</li>
</ul>
</div>
<div class="col-lg-3">
<ul>
<li><a href="#">Home</a>
</li>
<li><a href="#">About</a>
</li>
<li><a href="#">Clients</a>
</li>
<li><a href="#">Contact Us</a>
</li>
</ul>
</div>
<div class="col-lg-3">
<ul>
<li><a href="#">Home</a>
</li>
<li><a href="#">About</a>
</li>
<li><a href="#">Clients</a>
</li>
<li><a href="#">Contact Us</a>
</li>
</ul>
</div>
<div class="col-lg-3">
<ul>
<li><a href="#">Home</a>
</li>
<li><a href="#">About</a>
</li>
<li><a href="#">Clients</a>
</li>
<li><a href="#">Contact Us</a>
</li>
</ul>
</div>
</div>
</section>
<section id="sec2">
<h2>Section 2</h2>
<div class="row">
<div class="col-lg-3">
<ul>
<li><a href="#">Home</a>
</li>
<li><a href="#">About</a>
</li>
<li><a href="#">Clients</a>
</li>
<li><a href="#">Contact Us</a>
</li>
</ul>
</div>
<div class="col-lg-3">
<ul>
<li><a href="#">Home</a>
</li>
<li><a href="#">About</a>
</li>
<li><a href="#">Clients</a>
</li>
<li><a href="#">Contact Us</a>
</li>
</ul>
</div>
<div class="col-lg-3">
<ul>
<li><a href="#">Home</a>
</li>
</ul>
</div>
<div class="col-lg-3">
<ul></ul>
</div>
</div>
</section>
<section id="sec3">
<h2>Section 3</h2>
<div class="row">
<div class="col-lg-3">
<ul>
<li><a href="#">Home</a>
</li>
<li><a href="#">About</a>
</li>
<li><a href="#">Clients</a>
</li>
<li><a href="#">Contact Us</a>
</li>
</ul>
</div>
<div class="col-lg-3">
<ul>
<li><a href="#">Home</a>
</li>
<li><a href="#">About</a>
</li>
<li><a href="#">Clients</a>
</li>
<li><a href="#">Contact Us</a>
</li>
</ul>
</div>
<div class="col-lg-3">
<ul>
<li><a href="#">Home</a>
</li>
<li><a href="#">About</a>
</li>
<li><a href="#">Clients</a>
</li>
<li><a href="#">Contact Us</a>
</li>
</ul>
</div>
<div class="col-lg-3">
<ul></ul>
</div>
</div>
</section>
<section id="sec4">
<h2>Section 4</h2>
<div class="row">
<div class="col-lg-3">
<ul>
<li><a href="#">Home</a>
</li>
<li><a href="#">About</a>
</li>
<li><a href="#">Clients</a>
</li>
<li><a href="#">Contact Us</a>
</li>
</ul>
</div>
<div class="col-lg-3">
<ul>
<li><a href="#">Home</a>
</li>
<li><a href="#">About</a>
</li>
<li><a href="#">Clients</a>
</li>
<li><a href="#">Contact Us</a>
</li>
</ul>
</div>
<div class="col-lg-3">
<ul>
<li><a href="#">Home</a>
</li>
<li><a href="#">About</a>
</li>
<li><a href="#">Clients</a>
</li>
<li><a href="#">Contact Us</a>
</li>
</ul>
</div>
<div class="col-lg-3">
<ul>
<li><a href="#">Home</a>
</li>
<li><a href="#">About</a>
</li>
<li><a href="#">Clients</a>
</li>
<li><a href="#">Contact Us</a>
</li>
</ul>
</div>
</div>
</section>
</div>
<!-- /col-lg-8 -->
<div class="col-lg-4">
<section id="secAlpha">
<h3>Alpha</h3>
<ul>
<li><a href="#">Alpha</a>
</li>
<li><a href="#">Alpha</a>
</li>
<li><a href="#">Alpha</a>
</li>
<li><a href="#">Alpha</a>
</li>
</ul>
<h3>Beta</h3>
<ul>
<li><a href="#">Beta</a>
</li>
<li><a href="#">Beta</a>
</li>
<li><a href="#">Beta</a>
</li>
<li><a href="#">Beta</a>
</li>
</ul>
<h3>Charlie</h3>
<ul>
<li><a href="#">Charlie</a>
</li>
<li><a href="#">Charlie</a>
</li>
<li><a href="#">Charlie</a>
</li>
<li><a href="#">Charlie</a>
</li>
</ul>
</section>
</div>
<!-- /col-lg-4 -->
</div>
</div>
<!-- /container -->