Drop Down Menu Variant

Submenu's with group item still active link

by jim ulle

HTML

<ul class="main_list">
 <li class="parent">
     <a href="##########">Menu-1</a>
   <ul class="children">
    <li>
     <a href="##########">SubMenu-1</a>
     <a href="##########">SubMenu-2</a>
     <a href="##########">SubMenu-3</a>
    </li>
   </ul>
 </li>
 <li><a href="##########">Menu-2</a></li>
 <li><a href="##########">Menu-3</a></li>
 <li><a href="##########">Menu-4</a></li>
 <li class="parent">
  <a href="##########">Menu-5</a>
   <ul class="children">
    <li>
     <a href="##########">SubMenu-1</a>
     <a href="##########">SubMenu-2</a>
     <a href="##########">SubMenu-3</a>
    </li>
   </ul>
  </li>
</ul>

CSS

ul.children {
    display: none;
}

JavaScript

$(function(){
    $('li.parent').each(function(){
        $(this).children('a').after('<img src="http://upload.wikimedia.org/wikipedia/commons/f/f7/Arrow-down-navmenu.png" />');
    });
    
    $('li.parent img').on("click",function(){
        if($(this).hasClass('open')) {
            $(this).removeClass('open');
            $(this).attr('src','http://upload.wikimedia.org/wikipedia/commons/f/f7/Arrow-down-navmenu.png');
        } else {
            $(this).addClass('open');
            $(this).attr('src','http://upload.wikimedia.org/wikipedia/commons/0/01/Arrow-up-navmenu.png');
        }
        $(this).siblings('ul.children').toggle();
    });
});