Drop Down Menu Variant
Submenu's with group item still active link
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" />');
});
$('.parent img, .parent a').on("click", function () {
var img = $(this);
if ($(this).next('img').length) {
var img = $(this).next('img');
}
if (img.hasClass('open')) {
img.removeClass('open');
img.attr('src', 'http://upload.wikimedia.org/wikipedia/commons/f/f7/Arrow-down-navmenu.png');
} else {
img.addClass('open');
img.attr('src', 'http://upload.wikimedia.org/wikipedia/commons/0/01/Arrow-up-navmenu.png');
}
img.siblings('ul.children').toggle();
});
});