Menu Nav Pills

Testing menu using bootstrap's nav-pills

by Kieveli

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/parsley.js/2.3.11/parsley.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.2.0/backbone-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.marionette/2.4.1/backbone.marionette.min.js"></script>

<div class="checkbox">
  <label>
    <input type="checkbox">Testcheckbox
  </label>
</div>

<ul id="menu" class="nav nav-pills nav-stacked">
    <li class="nav-divider"></li>
    <li>
        <a class="nav-menu-container" data-toggle="collapse" data-parent="#menu" href="#sub-menu">
            Sub-Menu
            <div class="sub-menu-caret-container"><span class="caret arrow"></span></div>
        </a>
    </li>
    <ul class="nav nav-pills nav-stacked collapse in" id="sub-menu">
      <li data-toggle="collapse" data-parent="#sub-menu" href="#pv11">
        <div class="nav-sub-menu-container">
          <div class="checkbox">
            <label>
              <input type="checkbox">Testcheckbox
            </label>
          </div>
        </div>
      </li>
      <li data-toggle="collapse" data-parent="#sub-menu" href="#pv11"><a id="item1" class="nav-sub-menu-container" href="#">Item 2</a></li>
      <li data-toggle="collapse" data-parent="#sub-menu" href="#pv11"><a id="item2" class="nav-sub-menu-container" href="#">Item 3</a></li>
      <li data-toggle="collapse" data-parent="#sub-menu" href="#item3"><a class="nav-sub-menu-container" href="#">Item 4</a></li>
    </ul>
    <li class="nav-divider"></li>
</ul>

CSS

.sub-menu-caret-container {
  float: right;
}
.nav-menu-container {
  font-weight: bold;
}
ul.nav-stacked ul.nav-stacked > li > .nav-sub-menu-container {
  padding-left: 30px;
}