SEO-friendly Vertical Accordion Menu With jQuery

A responsive, semantic, SEO-friendly, multi-level, accordion-style sidebar (dropdown) navigation system written in jQuery, CSS and HTML unordered list.

How to use it:

1. Code the HTML for the accordion menu. The script supports up to 2 levels of menus based on nested HTML lists as follows:

<div class="accordion-menu">
  <ul class="menu">
    <li><a href="#">Element 1</a></li>
    <li><a href="#">Element 2 <ANY SUB-MENU INDICATOR HERE></a>
      <ul>
        <li><a href="#">Sub-Element #1</a></li>
        <li><a href="#">Sub-Element #2</a></li>
        <li><a href="#">Sub-Element #3</a></li>
      </ul>
    </li>
    <li><a href="#">Element 3</a></li>
  </ul>
</div>

2. Apply the CSS styles to the accordion menu.

.btnMenu {
  display: none;
  padding: 20px;
  display: block;
  background: #1abc9c;
  color: #fff;
}

.accordion-menu {
  width: 20%;
  min-width: 300px;
  margin: 50px;
  display: inline-block;
  line-height: 18px;
}

.accordion-menu .menu { width: 100%; }

.accordion-menu ul { list-style: none; }

.accordion-menu .menu li a {
  color: #494949;
  display: block;
  padding: 15px 20px;
  background: #e9e9e9;
}

.accordion-menu .menu li a:hover { 
  background: #16a085; 
  color: #fff; 
}

.accordion-menu .menu i.fa {
  font-size: 12px;
  line-height: 18px;
  float: right;
  margin-left: 10px;
}

.accordion-menu .menu ul { display: none; }

.accordion-menu .menu ul li a {
  background: #424242;
  color: #e9e9e9;
}

.accordion-menu .menu .active > a {
  background: #16a085;
  color: #fff;
}

3. Insert the necessary jQuery library into the document.

<script src="/path/to/jquery.min.js"></script>

4. The jQuery script to enable the accordion menu.

$(document).ready(function() {
  $('.menu li:has(ul)').click(function(e) {
    e.preventDefault();

    if($(this).hasClass('active')) {
      $(this).removeClass('active');
      $(this).children('ul').slideUp();
    } else {
      $('.menu li ul').slideUp();
      $('.menu li').removeClass('active');
      $(this).addClass('active');
      $(this).children('ul').slideDown();
    }

    $('.menu li ul li a').click(function() {
      window.location.href = $(this).attr('href');
    })
  });
});

---

This awesome jQuery plugin is developed by FelixAVeras. For more Advanced Usages, please check the demo page or visit the official website.