CodePen Embed - jQuery - Custom Accordion

<header>
  <div class="container">
    <h1>jQuery</h1>
    <h3>Custom Accordion</h3>
  </div>
</header>

<nav class="navbar navbar-default no-margin no-border no-radius">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-i">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#home">Home</a>
    </div>
    <div class="collapse navbar-collapse" id="navbar-i">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#one">One</a></li>
        <li><a href="#two">Two</a></li>
        <li><a href="#three">Three</a></li>
        <li><a href="#four">Four</a></li>
      </ul>
    </div>
  </div>
</nav>

<main id="home" class="contents">
  <section id="one" class="i-row i-row-odd">
    <div class="container">
      <div class="text-center" style="margin-bottom: 20px;">
        <a href="#four" class="btn btn-warning btn-block">Looking for Multiple Level?</a>
      </div>
      <div class="row">
        <div class="col-md-4">
          <div class="block ac-menu">
            <h3 class="section-title">Accordion Menu <small>(.ac-menu)</small></h3>
            <ul class="ac-list">
              <li class="expanded">
                <a href="javascript:void(0);">Link 1 <i class="ac-icon ion-ios-arrow-down"></i></a>
                <ul class="sub-menu">
                  <li><a href="javascript:void(0);">Link 1</a></li>
                  <li><a href="javascript:void(0);">Link 2</a></li>
                  <li><a href="javascript:void(0);">Link 3</a></li>
                  <li><a href="javascript:void(0);">Link 4</a></li>
                  <li><a href="javascript:void(0);">Link 5</a></li>
                </ul>
              </li>
              <li class="expanded">
                <a href="javascript:void(0);" class="open">Link 2 <i class="ac-icon ion-ios-arrow-down"></i></a>
                <ul class="sub-menu" style="display: block;">
                  <li><a href="javascript:void(0);">Link 1</a></li>
                  <li><a href="javascript:void(0);" class="hover">Link 2</a></li>
                  <li><a href="javascript:void(0);">Link 3</a></li>
                  <li><a href="javascript:void(0);">Link 4</a></li>
                  <li><a href="javascript:void(0);">Link 5</a></li>
                </ul>
              </li>
              <li class="expanded">
                <a href="javascript:void(0);">Link 3 <i class="ac-icon ion-ios-arrow-down"></i></a>
                <ul class="sub-menu">
                  <li><a href="javascript:void(0);">Link 1</a></li>
                  <li><a href="javascript:void(0);">Link 2</a></li>
                  <li><a href="javascript:void(0);">Link 3</a></li>
                  <li><a href="javascript:void(0);">Link 4</a></li>
                  <li><a href="javascript:void(0);">Link 5</a></li>
                </ul>
              </li>
              <li><a href="javascript:void(0);">Link 4</a></li>
              <li class="expanded">
                <a href="javascript:void(0);">Link 5 <i class="ac-icon ion-ios-arrow-down"></i></a>
                <ul class="sub-menu">
                  <li><a href="javascript:void(0);">Link 1</a></li>
                  <li><a href="javascript:void(0);">Link 2</a></li>
                  <li><a href="javascript:void(0);">Link 3</a></li>
                  <li><a href="javascript:void(0);">Link 4</a></li>
                  <li><a href="javascript:void(0);">Link 5</a></li>
                </ul>
              </li>
              <li><a href="javascript:void(0);">Link 6</a></li>
              <li class="expanded">
                <a href="javascript:void(0);">Link 7 <i class="ac-icon ion-ios-arrow-down"></i></a>
                <ul class="sub-menu">
                  <li><a href="javascript:void(0);">Link 1</a></li>
                  <li><a href="javascript:void(0);">Link 2</a></li>
                  <li><a href="javascript:void(0);">Link 3</a></li>
                  <li><a href="javascript:void(0);">Link 4</a></li>
                  <li><a href="javascript:void(0);">Link 5</a></li>
                </ul>
              </li>
              <li class="expanded">
                <a href="javascript:void(0);">Link 8 <i class="ac-icon ion-ios-arrow-down"></i></a>
                <ul class="sub-menu">
                  <li><a href="javascript:void(0);">Link 1</a></li>
                  <li><a href="javascript:void(0);">Link 2</a></li>
                  <li><a href="javascript:void(0);">Link 3</a></li>
                  <li><a href="javascript:void(0);">Link 4</a></li>
                  <li><a href="javascript:void(0);">Link 5</a></li>
                </ul>
              </li>
            </ul>
          </div>
        </div>
        <div class="col-md-8">
          <h4>A simple custom accordion</h4>
          <p class="text-muted">Base on drupal menu block html structure and classes</p>
          <pre>
&lt;div class="ac-menu"&gt;
  &lt;ul class="ac-list"&gt;
    &lt;li class="expanded"&gt;
      &lt;a href="./"&gt;Link Level 1 - 1&lt;/a&gt;
      &lt;ul class="sub-menu"&gt;
        &lt;li&gt;&lt;a href="./"&gt;Link Level 2 - 1&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="./"&gt;Link Level 2 - 2&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="./"&gt;Link Level 2 - 3&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="./"&gt;Link Level 2 - 4&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="./"&gt;Link Level 2 - 5&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
&lt;/div&gt;</pre>
          <p class="text-warning">does not support for more than 2 level</p>
        </div>
      </div>
    </div>
  </section>
  <section id="two" class="i-row i-row-even">
    <div class="container">
      <h3 class="section-title">More Theme</h3>
      <div class="row">
        <div class="col-md-4">
          <div class="block bc-menu">
            <ul class="bc-list">
              <li class="expanded">
                <a href="javascript:void(0);">Link 1 <i class="bc-icon ion-ios-arrow-down"></i></a>
                <ul class="sub-menu">
                  <li><a href="javascript:void(0);">Link 1</a></li>
                  <li><a href="javascript:void(0);">Link 2</a></li>
                  <li><a href="javascript:void(0);">Link 3</a></li>
                  <li><a href="javascript:void(0);">Link 4</a></li>
                  <li><a href="javascript:void(0);">Link 5</a></li>
                </ul>
              </li>
              <li class="expanded">
                <a href="javascript:void(0);" class="open">Link 2 <i class="bc-icon ion-ios-arrow-down"></i></a>
                <ul class="sub-menu" style="display: block;">
                  <li><a href="javascript:void(0);">Link 1</a></li>
                  <li><a href="javascript:void(0);" class="hover">Link 2</a></li>
                  <li><a href="javascript:void(0);">Link 3</a></li>
                  <li><a href="javascript:void(0);">Link 4</a></li>
                  <li><a href="javascript:void(0);">Link 5</a></li>
                </ul>
              </li>
              <li class="expanded">
                <a href="javascript:void(0);">Link 3 <i class="bc-icon ion-ios-arrow-down"></i></a>
                <ul class="sub-menu">
                  <li><a href="javascript:void(0);">Link 1</a></li>
                  <li><a href="javascript:void(0);">Link 2</a></li>
                  <li><a href="javascript:void(0);">Link 3</a></li>
                  <li><a href="javascript:void(0);">Link 4</a></li>
                  <li><a href="javascript:void(0);">Link 5</a></li>
                </ul>
              </li>
              <li><a href="javascript:void(0);">Link 4</a></li>
              <li class="expanded">
                <a href="javascript:void(0);">Link 5 <i class="bc-icon ion-ios-arrow-down"></i></a>
                <ul class="sub-menu">
                  <li><a href="javascript:void(0);">Link 1</a></li>
                  <li><a href="javascript:void(0);">Link 2</a></li>
                  <li><a href="javascript:void(0);">Link 3</a></li>
                  <li><a href="javascript:void(0);">Link 4</a></li>
                  <li><a href="javascript:void(0);">Link 5</a></li>
                </ul>
              </li>
              <li><a href="javascript:void(0);">Link 6</a></li>
              <li class="expanded">
                <a href="javascript:void(0);">Link 7 <i class="bc-icon ion-ios-arrow-down"></i></a>
                <ul class="sub-menu">
                  <li><a href="javascript:void(0);">Link 1</a></li>
                  <li><a href="javascript:void(0);">Link 2</a></li>
                  <li><a href="javascript:void(0);">Link 3</a></li>
                  <li><a href="javascript:void(0);">Link 4</a></li>
                  <li><a href="javascript:void(0);">Link 5</a></li>
                </ul>
              </li>
              <li class="expanded">
                <a href="javascript:void(0);">Link 8 <i class="bc-icon ion-ios-arrow-down"></i></a>
                <ul class="sub-menu">
                  <li><a href="javascript:void(0);">Link 1</a></li>
                  <li><a href="javascript:void(0);">Link 2</a></li>
                  <li><a href="javascript:void(0);">Link 3</a></li>
                  <li><a href="javascript:void(0);">Link 4</a></li>
                  <li><a href="javascript:void(0);">Link 5</a></li>
                </ul>
              </li>
            </ul>
          </div>
        </div>
        <div class="col-md-4">
          <div class="block cc-menu">
            <ul class="cc-list">
              <li class="expanded">
                <a href="javascript:void(0);">Link 1 <i class="cc-icon ion-ios-arrow-down"></i></a>
                <ul class="sub-menu">
                  <li><a href="javascript:void(0);">Link 1</a></li>
                  <li><a href="javascript:void(0);">Link 2</a></li>
                  <li><a href="javascript:void(0);">Link 3</a></li>
                  <li><a href="javascript:void(0);">Link 4</a></li>
                  <li><a href="javascript:void(0);">Link 5</a></li>
                </ul>
              </li>
              <li class="expanded">
                <a href="javascript:void(0);" class="open">Link 2 <i class="cc-icon ion-ios-arrow-down"></i></a>
                <ul class="sub-menu" style="display: block;">
                  <li><a href="javascript:void(0);">Link 1</a></li>
                  <li><a href="javascript:void(0);" class="hover">Link 2</a></li>
                  <li><a href="javascript:void(0);">Link 3</a></li>
                  <li><a href="javascript:void(0);">Link 4</a></li>
                  <li><a href="javascript:void(0);">Link 5</a></li>
                </ul>
              </li>
              <li class="expanded">
                <a href="javascript:void(0);">Link 3 <i class="cc-icon ion-ios-arrow-down"></i></a>
                <ul class="sub-menu">
                  <li><a href="javascript:void(0);">Link 1</a></li>
                  <li><a href="javascript:void(0);">Link 2</a></li>
                  <li><a href="javascript:void(0);">Link 3</a></li>
                  <li><a href="javascript:void(0);">Link 4</a></li>
                  <li><a href="javascript:void(0);">Link 5</a></li>
                </ul>
              </li>
              <li><a href="javascript:void(0);">Link 4</a></li>
              <li class="expanded">
                <a href="javascript:void(0);">Link 5 <i class="cc-icon ion-ios-arrow-down"></i></a>
                <ul class="sub-menu">
                  <li><a href="javascript:void(0);">Link 1</a></li>
                  <li><a href="javascript:void(0);">Link 2</a></li>
                  <li><a href="javascript:void(0);">Link 3</a></li>
                  <li><a href="javascript:void(0);">Link 4</a></li>
                  <li><a href="javascript:void(0);">Link 5</a></li>
                </ul>
              </li>
              <li><a href="javascript:void(0);">Link 6</a></li>
              <li class="expanded">
                <a href="javascript:void(0);">Link 7 <i class="cc-icon ion-ios-arrow-down"></i></a>
                <ul class="sub-menu">
                  <li><a href="javascript:void(0);">Link 1</a></li>
                  <li><a href="javascript:void(0);">Link 2</a></li>
                  <li><a href="javascript:void(0);">Link 3</a></li>
                  <li><a href="javascript:void(0);">Link 4</a></li>
                  <li><a href="javascript:void(0);">Link 5</a></li>
                </ul>
              </li>
              <li class="expanded">
                <a href="javascript:void(0);">Link 8 <i class="cc-icon ion-ios-arrow-down"></i></a>
                <ul class="sub-menu">
                  <li><a href="javascript:void(0);">Link 1</a></li>
                  <li><a href="javascript:void(0);">Link 2</a></li>
                  <li><a href="javascript:void(0);">Link 3</a></li>
                  <li><a href="javascript:void(0);">Link 4</a></li>
                  <li><a href="javascript:void(0);">Link 5</a></li>
                </ul>
              </li>
            </ul>
          </div>
        </div>
        <div class="col-md-4">
          <div class="block dc-menu">
            <ul class="dc-list">
              <li class="expanded">
                <a href="javascript:void(0);">Link 1 <i class="dc-icon ion-ios-arrow-down"></i></a>
                <ul class="sub-menu">
                  <li><a href="javascript:void(0);">Link 1</a></li>
                  <li><a href="javascript:void(0);">Link 2</a></li>
                  <li><a href="javascript:void(0);">Link 3</a></li>
                  <li><a href="javascript:void(0);">Link 4</a></li>
                  <li><a href="javascript:void(0);">Link 5</a></li>
                </ul>
              </li>
              <li class="expanded">
                <a href="javascript:void(0);" class="open">Link 2 <i class="dc-icon ion-ios-arrow-down"></i></a>
                <ul class="sub-menu" style="display: block;">
                  <li><a href="javascript:void(0);">Link 1</a></li>
                  <li><a href="javascript:void(0);" class="hover">Link 2</a></li>
                  <li><a href="javascript:void(0);">Link 3</a></li>
                  <li><a href="javascript:void(0);">Link 4</a></li>
                  <li><a href="javascript:void(0);">Link 5</a></li>
                </ul>
              </li>
              <li class="expanded">
                <a href="javascript:void(0);">Link 3 <i class="dc-icon ion-ios-arrow-down"></i></a>
                <ul class="sub-menu">
                  <li><a href="javascript:void(0);">Link 1</a></li>
                  <li><a href="javascript:void(0);">Link 2</a></li>
                  <li><a href="javascript:void(0);">Link 3</a></li>
                  <li><a href="javascript:void(0);">Link 4</a></li>
                  <li><a href="javascript:void(0);">Link 5</a></li>
                </ul>
              </li>
              <li><a href="javascript:void(0);">Link 4</a></li>
              <li class="expanded">
                <a href="javascript:void(0);">Link 5 <i class="dc-icon ion-ios-arrow-down"></i></a>
                <ul class="sub-menu">
                  <li><a href="javascript:void(0);">Link 1</a></li>
                  <li><a href="javascript:void(0);">Link 2</a></li>
                  <li><a href="javascript:void(0);">Link 3</a></li>
                  <li><a href="javascript:void(0);">Link 4</a></li>
                  <li><a href="javascript:void(0);">Link 5</a></li>
                </ul>
              </li>
              <li><a href="javascript:void(0);">Link 6</a></li>
              <li class="expanded">
                <a href="javascript:void(0);">Link 7 <i class="dc-icon ion-ios-arrow-down"></i></a>
                <ul class="sub-menu">
                  <li><a href="javascript:void(0);">Link 1</a></li>
                  <li><a href="javascript:void(0);">Link 2</a></li>
                  <li><a href="javascript:void(0);">Link 3</a></li>
                  <li><a href="javascript:void(0);">Link 4</a></li>
                  <li><a href="javascript:void(0);">Link 5</a></li>
                </ul>
              </li>
              <li class="expanded">
                <a href="javascript:void(0);">Link 8 <i class="dc-icon ion-ios-arrow-down"></i></a>
                <ul class="sub-menu">
                  <li><a href="javascript:void(0);">Link 1</a></li>
                  <li><a href="javascript:void(0);">Link 2</a></li>
                  <li><a href="javascript:void(0);">Link 3</a></li>
                  <li><a href="javascript:void(0);">Link 4</a></li>
                  <li><a href="javascript:void(0);">Link 5</a></li>
                </ul>
              </li>
            </ul>
          </div>
          <div class="block color-changer">
            <h5>Select Color</h5>
            <ul>
              <li><a data-bgcolor="#1abc9c" style="background-color:#1abc9c;">#1abc9c</a></li>
              <li><a data-bgcolor="#2ecc71" style="background-color:#2ecc71;">#2ecc71</a></li>
              <li><a data-bgcolor="#4aa3df" style="background-color:#4aa3df;">#4aa3df</a></li>
              <li><a data-bgcolor="#9b59b6" style="background-color:#9b59b6;">#9b59b6</a></li>
              <li><a data-bgcolor="#34495e" style="background-color:#34495e;">#34495e</a></li>
              <li><a data-bgcolor="#f1c40f" style="background-color:#f1c40f;">#f1c40f</a></li>
              <li><a data-bgcolor="#e67e22" style="background-color:#e67e22;">#e67e22</a></li>
              <li><a data-bgcolor="#e74c3c" style="background-color:#e74c3c;">#e74c3c</a></li>
              <li><a data-bgcolor="#7f8c8d" style="background-color:#7f8c8d;">#7f8c8d</a></li>
              <li><a data-bgcolor="#95a5a6" style="background-color:#95a5a6;">#95a5a6</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </section>
  <section id="three" class="i-row i-row-odd">
    <div class="container">
      <div class="row">
        <div class="col-md-4">
          <div class="block ec-menu">
            <ul id="three-one" class="ec-list">
              <li class="expanded">
                <a href="javascript:void(0);">Link 1 <i class="ec-icon ion-ios-arrow-down"></i></a>
                <ul class="sub-menu">
                  <li><a href="javascript:void(0);">Link 1</a></li>
                  <li><a href="javascript:void(0);">Link 2</a></li>
                  <li><a href="javascript:void(0);">Link 3</a></li>
                  <li><a href="javascript:void(0);">Link 4</a></li>
                  <li><a href="javascript:void(0);">Link 5</a></li>
                </ul>
              </li>
              <li class="expanded open">
                <a href="javascript:void(0);">Link 2 <i class="ec-icon ion-ios-arrow-down"></i></a>
                <ul class="sub-menu" style="display: block;">
                  <li><a href="javascript:void(0);">Link 1</a></li>
                  <li><a href="javascript:void(0);" class="hover">Link 2</a></li>
                  <li><a href="javascript:void(0);">Link 3</a></li>
                  <li><a href="javascript:void(0);">Link 4</a></li>
                  <li><a href="javascript:void(0);">Link 5</a></li>
                </ul>
              </li>
              <li class="expanded">
                <a href="javascript:void(0);">Link 3 <i class="ec-icon ion-ios-arrow-down"></i></a>
                <ul class="sub-menu">
                  <li><a href="javascript:void(0);">Link 1</a></li>
                  <li><a href="javascript:void(0);">Link 2</a></li>
                  <li><a href="javascript:void(0);">Link 3</a></li>
                  <li><a href="javascript:void(0);">Link 4</a></li>
                  <li><a href="javascript:void(0);">Link 5</a></li>
                </ul>
              </li>
              <li><a href="javascript:void(0);">Link 4</a></li>
              <li class="expanded">
                <a href="javascript:void(0);">Link 5 <i class="ec-icon ion-ios-arrow-down"></i></a>
                <ul class="sub-menu">
                  <li><a href="javascript:void(0);">Link 1</a></li>
                  <li><a href="javascript:void(0);">Link 2</a></li>
                  <li><a href="javascript:void(0);">Link 3</a></li>
                  <li><a href="javascript:void(0);">Link 4</a></li>
                  <li><a href="javascript:void(0);">Link 5</a></li>
                </ul>
              </li>
              <li><a href="javascript:void(0);">Link 6</a></li>
              <li class="expanded">
                <a href="javascript:void(0);">Link 7 <i class="ec-icon ion-ios-arrow-down"></i></a>
                <ul class="sub-menu">
                  <li><a href="javascript:void(0);">Link 1</a></li>
                  <li><a href="javascript:void(0);">Link 2</a></li>
                  <li><a href="javascript:void(0);">Link 3</a></li>
                  <li><a href="javascript:void(0);">Link 4</a></li>
                  <li><a href="javascript:void(0);">Link 5</a></li>
                </ul>
              </li>
              <li class="expanded">
                <a href="javascript:void(0);">Link 8 <i class="ec-icon ion-ios-arrow-down"></i></a>
                <ul class="sub-menu">
                  <li><a href="javascript:void(0);">Link 1</a></li>
                  <li><a href="javascript:void(0);">Link 2</a></li>
                  <li><a href="javascript:void(0);">Link 3</a></li>
                  <li><a href="javascript:void(0);">Link 4</a></li>
                  <li><a href="javascript:void(0);">Link 5</a></li>
                </ul>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </section>
  <section id="four" class="i-row i-row-even">
    <div class="container">
      <h3>Multiple Level</h3>
      <div class="row">
        <div class="col-md-4 sidebar">
          <div class="block ec-menu">
            <ul class="ec-list">
              <li><a href="javascript:;">Link 1</a></li>
              <li><a href="javascript:;">Link 2</a></li>
              <li><a href="javascript:;">Link 3</a></li>
              <li class="expanded">
                <a href="javascript:;">Link 4 <i class="ec-icon ion-ios-arrow-down"></i></a>
                <ul class="sub-menu">
                  <li><a href="javascript:;">Sub Link 1</a></li>
                  <li><a href="javascript:;">Sub Link 2</a></li>
                  <li class="expanded">
                    <a href="javascript:;">Sub Link 3 <i class="ec-icon ion-ios-arrow-down"></i></a>
                    <ul class="sub-menu">
                      <li><a href="javascript:;">Sub Link 1</a></li>
                      <li><a href="javascript:;">Sub Link 2</a></li>
                      <li><a href="javascript:;">Sub Link 3</a></li>
                      <li><a href="javascript:;">Sub Link 4</a></li>
                      <li><a href="javascript:;">Sub Link 5</a></li>
                    </ul>
                  </li>
                  <li><a href="javascript:;">Sub Link 4</a></li>
                  <li><a href="javascript:;">Sub Link 5</a></li>
                </ul>
              </li>
              <li class="expanded">
                <a href="javascript:;">Link 5 <i class="ec-icon ion-ios-arrow-down"></i></a>
                <ul class="sub-menu">
                  <li><a href="javascript:;">Sub Link 1</a></li>
                  <li><a href="javascript:;">Sub Link 2</a></li>
                  <li class="expanded">
                    <a href="javascript:;">Sub Link 3 <i class="ec-icon ion-ios-arrow-down"></i></a>
                    <ul class="sub-menu">
                      <li><a href="javascript:;">Sub Link 1</a></li>
                      <li><a href="javascript:;">Sub Link 2</a></li>
                      <li><a href="javascript:;">Sub Link 3</a></li>
                      <li><a href="javascript:;">Sub Link 4</a></li>
                      <li><a href="javascript:;">Sub Link 5</a></li>
                    </ul>
                  </li>
                  <li><a href="javascript:;">Sub Link 4</a></li>
                  <li><a href="javascript:;">Sub Link 5</a></li>
                </ul>
              </li>
              <li><a href="javascript:;">Link 7</a></li>
              <li><a href="javascript:;">Link 8</a></li>
            </ul>
          </div>
        </div>
        <div class="col-md-8">
          <div class="block">
            <div class="alert alert-danger"><i class="fa fa-exclamation-triangle fa-fw"></i> Caret issue</div>
            <div class="alert alert-warning"><i class="fa fa-exclamation-circle fa-fw"></i> Active line motion</div>
          </div>
        </div>
      </div>
    </div>
  </section>
</main>

<footer>
  <div class="container">
    <p class="text-muted no-margin">Powered by Ivan 2015</p>
  </div>
</footer>

@import url(https://fonts.googleapis.com/css?family=Roboto:500,900,300,700,400);
@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:400,300,700);
html { min-height: 100%; position: relative; }
body { margin-bottom: 60px; font-family: 'Roboto', sans-serif; }
.btn, .btn:hover, .btn:focus, .btn:active, .btn:active:focus { outline: 0; }
.btn-custom { margin-bottom: 1em; }
.no-margin { margin: 0; }
.no-padding { padding: 0; }
.no-border { border: 0; }
.no-radius { border-radius: 0; }

/*** Header ***/
header { padding: 30px 0; background-color: #0769AD; color: #fff; }
  header h1 { margin: 0; }
  header h3 { margin: 0; color: rgba(255,255,255,0.5); }

/*** Content ***/
main {}
  .i-row { padding-top: 40px; padding-bottom: 40px; }
  .i-row-odd { background-color: #ffffff; }
  .i-row-even { background-color: #f7f7f7; }

.section-title { margin-top: 0; margin-bottom: 0.6em; font-weight: 500; }
.section-title .fa { margin-right: 5px; color: #07a; }

/*** Footer ***/
footer { padding: 20px 0; background-color: #333; position: absolute; bottom: 0; width: 100%; height: 60px; }

/******************************************/
.color-changer { margin: 20px 0; }
.color-changer ul { margin: 0; padding: 0; list-style: none; }
.color-changer ul li { float: left; width: 20%; }
.color-changer ul li a { display: block; text-indent: -999em; cursor: pointer; }
.color-changer ul li a:hover { position: relative; opacity: 0.9; }
.color-changer ul li a:active { opacity: 1; transform: scale(1.1); }

.ac-menu .ac-icon { float: right; font-size: 1.2em; }
.ac-menu ul { margin: 0; padding: 0; list-style: none; }
.ac-menu ul li { margin-top: 2px; }
.ac-menu ul li a { display: block; text-decoration: none; }
.ac-menu ul li a:hover,
.ac-menu ul li a.hover { background-color: rgba(0,0,0,0.15); color: #333 }
.ac-menu .ac-list {}
.ac-menu .ac-list > li {}
.ac-menu .ac-list > li > a { padding: 10px 15px; background-color: #dddddd; color: #777; }
.ac-menu .sub-menu { display: none; }
.ac-menu .sub-menu > li > a { padding: 5px 15px; background-color: #eeeeee; color: #aaa; font-size: 14px; }
/* Hover / Open */
.ac-menu .ac-list > li > a:hover,
.ac-menu .ac-list > li > .open { background-color: #18bc9c; color: #fff; }
.ac-menu .open > .ac-icon:before { content: '\f3d8'; }
/* Transition */
.ac-menu .ac-list > li > a { transition: all 0.24s ease-in-out; }


.bc-menu .bc-icon { float: right; font-size: 1.2em; }
.bc-menu ul { margin: 0; padding: 0; list-style: none; }
.bc-menu ul li {}
.bc-menu ul li a { display: block; text-decoration: none; }
.bc-menu ul li a:hover,
.bc-menu ul li a.hover { background-color: rgba(0,0,0,0.05); color: #333 }
.bc-menu .bc-list {}
.bc-menu .bc-list > li { margin-top: 2px; }
.bc-menu .bc-list > li > a { padding: 8px 15px; border: 1px solid #ddd; background-color: #fff; color: #777; }
.bc-menu .sub-menu { display: none; border: 1px solid #ddd; background-color: #fff; transform: translateY(-1px); }
.bc-menu .sub-menu > li { margin-top: 0; }
.bc-menu .sub-menu > li > a { padding: 5px 15px; color: #aaa; font-size: 14px; }
/* Hover / Open */
.bc-menu .bc-list > li > a:hover,
.bc-menu .bc-list > li > .open { background-color: #eee; }
.bc-menu .open > .bc-icon:before { content: '\f3d8'; }
/* Transition */
.bc-menu .bc-list > li > a { transition: all 0.24s ease-in-out; }


.cc-menu .cc-icon { float: right; font-size: 1.2em; }
.cc-menu ul { margin: 0; padding: 0; list-style: none; }
.cc-menu ul li {}
.cc-menu ul li a { display: block; text-decoration: none; }
.cc-menu .cc-list {}
.cc-menu .cc-list > li { margin-top: -1px; }
.cc-menu .cc-list > li > a { padding: 8px 15px; border: 1px solid #ddd; background-color: #fff; color: #777; }
.cc-menu .sub-menu { display: none; padding: 5px 0; background-color: #fff; }
.cc-menu .sub-menu > li { margin-top: 0; }
.cc-menu .sub-menu > li > a { padding: 5px 15px; color: #aaa; font-size: 14px; }
.cc-menu .sub-menu > li > a:hover,
.cc-menu .sub-menu > li > a.hover{ color: #e56; }
/* Hover / Open */
.cc-menu .cc-list > li > a:hover { color: #d56; }
.cc-menu .cc-list > li > a.open { background-color: #d56; border-color: #d56; color: #fff; }
.cc-menu .open > .cc-icon:before { content: '\f3d8'; }
/* Transition */
.cc-menu .cc-list > li > a { transition: all 0.24s ease-in-out; }


.dc-menu .dc-icon { float: right; font-size: 1.2em; }
.dc-menu ul { margin: 0; padding: 0; list-style: none; }
.dc-menu ul li {}
.dc-menu ul li a { display: block; text-decoration: none; }
.dc-menu .dc-list { background-color: #2980b9; } /* change this background-color */
.dc-menu .dc-list > li { border-bottom: 1px solid rgba(255,255,255,0.15); }
.dc-menu .dc-list > li > a { padding: 8px 15px; color: #fff; }
.dc-menu .sub-menu { display: none; background-color: rgba(255,255,255,0.15); }
.dc-menu .sub-menu > li {}
.dc-menu .sub-menu > li > a { padding: 5px 15px; color: rgba(255,255,255,0.7); font-size: 14px; }
.dc-menu .sub-menu > li > a:hover,
.dc-menu .sub-menu > li > a.hover { background-color: rgba(0,0,0,0.1); color: #fff; }
/* Hover / Open / Active */
.dc-menu .dc-list > li > a:hover,
.dc-menu .dc-list > li > .open { background-color: #333; }
.dc-menu .open > .dc-icon:before { content: '\f3d8'; }
/* Transition */
.dc-menu .dc-list > li > a { transition: all 0.2s ease; }


.ec-menu .ec-icon { float: right; font-size: 1.2em; }
.ec-menu ul { margin: 0; padding: 0; list-style: none; }
.ec-menu ul li {}
.ec-menu ul li a { display: block; text-decoration: none; border-left: 1px solid #ddd; }
.ec-menu ul li a:hover,
.ec-menu ul li.open > a { color: #d56; }
.ec-menu ul li a:hover,
.ec-menu ul li.open a { border-color: #d56; }
.ec-menu .ec-list > li > a { padding: 8px 15px; color: #777; font-weight: 500; }
.ec-menu .sub-menu { display: none; }
.ec-menu .sub-menu > li > a { padding: 5px 25px; color: #999; font-size: 14px; }
.ec-menu .sub-menu .sub-menu > li > a { padding-left: 35px; }
/* Hover / Open */
.ec-menu .open > a > .ec-icon:before { content: '\f3d8'; }
/* Transition */
.ec-menu ul li a { transition: all 0.24s ease-in-out; }

View Compiled

$(function () {
  // Smooth Scroll
  $('a[href*=#]').bind('click', function(e){
    var anchor = $(this);
    $('html, body').stop().animate({
      scrollTop: $(anchor.attr('href')).offset().top
    }, 1000);
    e.preventDefault();
  });
});

(function ($) {
  // Color Changer
  $('.color-changer li a').on('click', function(e){
    var color = $(this).data('bgcolor');
    $('.dc-menu .dc-list').css({'background-color': color});
    e.preventDefault();
  });
  $(document).ready(function() {
    $('.ac-list > li.expanded > a').on('click', function(e) {
      e.preventDefault();
      if($(this).next('ul.sub-menu').is(':visible')) {
          $(this).removeClass('open');
          $(this).next('ul.sub-menu').slideUp();
      } else {
          $('.ac-list > li.expanded > a').removeClass('open');
          $(this).addClass('open');
          $('.ac-list > li.expanded > a').next('ul.sub-menu').slideUp();
          $(this).next('ul.sub-menu').slideToggle();
      }
    });
    
    var $menu = $('.bc-list');
    $menu.find('li.expanded > a').on('click', function(e) {
      e.preventDefault();
      if($(this).next('ul.sub-menu').is(':visible')) {
          $(this).removeClass('open');
          $(this).next('ul.sub-menu').slideUp();
      } else {
          $menu.find('li.expanded > a').removeClass('open');
          $(this).addClass('open');
          $menu.find('li.expanded > a').next('ul.sub-menu').slideUp();
          $(this).next('ul.sub-menu').slideToggle();
      }
    });
    
    var $cmenu = $('.cc-list');
    $cmenu.find('li.expanded > a').on('click', function(e) {
      e.preventDefault();
      if($(this).next('ul.sub-menu').is(':visible')) {
          $(this).removeClass('open');
          $(this).next('ul.sub-menu').slideUp();
      } else {
          $cmenu.find('li.expanded > a').removeClass('open');
          $(this).addClass('open');
          $cmenu.find('li.expanded > a').next('ul.sub-menu').slideUp();
          $(this).next('ul.sub-menu').slideToggle();
      }
    });
    
    var $dmenu = $('.dc-list');
    $dmenu.find('li.expanded > a').on('click', function(e) {
      e.preventDefault();
      if($(this).next('ul.sub-menu').is(':visible')) {
          $(this).removeClass('open');
          $(this).next('ul.sub-menu').slideUp();
      } else {
          $dmenu.find('li.expanded > a').removeClass('open');
          $(this).addClass('open');
          $dmenu.find('li.expanded > a').next('ul.sub-menu').slideUp();
          $(this).next('ul.sub-menu').slideToggle();
      }
    });
    
    var $emenu = $('#three-one');
    $emenu.find('li.expanded > a').on('click', function(e) {
      e.preventDefault();
      if($(this).next('ul.sub-menu').is(':visible')) {
          $(this).parent().removeClass('open');
          $(this).next('ul.sub-menu').slideUp();
      } else {
          $emenu.find('li.expanded').removeClass('open');
          $(this).parent().addClass('open');
          $emenu.find('li.expanded').children('ul.sub-menu').slideUp();
          $(this).next('ul.sub-menu').slideToggle();
      }
    });
    
    $(".sidebar .ec-list > .expanded > a").click(function() {
      var e = $(this).next(".sub-menu")
        , a = ".sidebar .ec-list > li.expanded > .sub-menu";
      0 === $(".page-sidebar-minified").length && ($(a).not(e).slideUp(function() {
        $(this).closest("li").removeClass("open")
      }),
      $(e).slideToggle(function() {
        var e = $(this).closest("li");
        $(e).hasClass("open") ? $(e).removeClass("open") : $(e).addClass("open")
      }))
    }),
    $(".sidebar .ec-list > .expanded .sub-menu li.expanded > a").click(function() {
      if (0 === $(".page-sidebar-minified").length) {
        var e = $(this).next(".sub-menu");
        $(e).slideToggle()
      }
    });
  });
})(jQuery);

This Pen is owned by Ivan Yew on CodePen.

See more by @ivan8i on CodePen

External CSS

External JavaScript