jQuery

【jQuery】BootstrapスタイルのアコーディオンメニューCollapsible Bootstrap Menu

October 8, 2016
Collapsible Bootstrap Menu

Collapsible Bootstrap MenuはBootstrapスタイルの美しい折りたたみ可能な垂直方向のメニューjQueryプラグイン。

HTML

<div class="gw-sidebar">
  <div id="gw-sidebar" class="gw-sidebar">
    <div class="nano-content">
      <ul class="gw-nav gw-nav-list">
        <li class="init-un-active">
          <a href="javascript:void(0)">
            <span class="gw-menu-text">
              <a href="#">
                PROJECT
                <button type="button" name="button" class="btn btn-success pull-right add-project btn-sm">+</button>
              </a>
            </span>
          </a>
        </li>
        {{#each projects}}
        <li class="init-arrow-down"> <a href="javascript:void(0)"><span class="gw-menu-text">{{project.name}}</span><b class="gw-arrow"></b> </a>
          <ul class="gw-submenu">
            <li>
              <a href="{{pathFor 'projectAnalysis' _id=_id}}">Analysis</a>
            </li>
            <li>
              <a href="{{pathFor 'projectQuotes' _id=_id}}">Quotes</a>
            </li>
            <li>
              <a href="#">Comparison</a>
            </li>
            <li>
              <a href="{{pathFor 'addProject' _id=_id monitor=monitor}}">Project Settings</a>
            </li>
          </ul>
        </li>
        {{/each}}
      </ul>
    </div>
  </div>
</div>