Accordion Menü mit JS

by marusti

HTML

<nav class='menu'>
  <p class="menuheading">Menü</p>
  <ul>

    <li><a href="#">Products</a>
      <ul class="detailmenu">
        <li><a href="#">Products Sub Menu 1</a></li>
        <li><a href="#">Products Sub Menu 2</a></li>
        <li><a href="#">Products Sub Menu 3</a></li>
        <li><a href="#">Products Sub Menu 4</a></li>
      </ul>
    </li>
    <li><a href="#">Services</a>
      <ul class=detailmenu>
        <li><a href="#">Services Sub Menu 1</a></li>
        <li><a href="#">Services Sub Menu 2</a></li>
        <li><a href="#">Services Sub Menu 3</a></li>
        <li><a href="#">Services Sub Menu 4</a></li>
      </ul>
    </li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact Us</a></li>
  </ul>
</nav>

CSS

.menu>ul>li:first-child {}

.menu>ul>li:first-child>a {}

.menu>ul>li:first-child>a>span {
  padding: 0;
}

.menu>ul>li:first-child:hover {}

.menu>ul>li {}

.menu>ul>li:hover {}

.menu>ul>li>a {
  display: block;
}

.menu>ul>li>a>span {
  display: block;
}

.menu>ul>li>a:hover {
  text-decoration: none;
}

.menu>ul>li.active {
  border-bottom: none;
}

/* Sub menu */

.menu ul ul {
  display: none;
}

.menu ul ul li {
  padding: 0;
}

.menu ul ul li:last-child {}

.menu ul ul a {
  display: block;
}

.menu ul ul a:before {}

.menu ul ul a:hover {}

.menu li > a:only-child:after {
    content: "";
}

.menu li > a:after {
    content: " +";
}

JavaScript

$(document).ready(function(){
$('.menu > ul > li > a').click(function() {

  var checkElement = $(this).next();

  $('.menu li').removeClass('active');
  $(this).closest('li').addClass('active');

  if ((checkElement.is('ul')) && (checkElement.is(':visible'))) {
    $(this).closest('li').removeClass('active');
    checkElement.slideUp('normal');
  }

  if ((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
    $('.menu ul ul:visible').slideUp('normal');
    checkElement.slideDown('normal');
  }

  if (checkElement.is('ul')) {
    return false;
  } else {
    return true;
  }
});
    $('.menu > ul > li > a')[0].click();
});