I have integrated a CSS Vertical menu with submenus into an ASP.Net application on the master page. Clicking on each menu item directs to different aspx pages. However, when clicking on a submenu within an expanded parent menu, the page redirects as expected but collapses the parent menu and does not retain the submenu highlight. I am seeking a solution where the parent menu remains expanded and the selected submenu stays highlighted.
(function($) {
$(document).ready(function() {
$('#cssmenu li.has-sub>a').on('click', function() {
$(this).removeAttr('href');
var element = $(this).parent('li');
if (element.hasClass('open')) {
element.removeClass('open');
element.find('li').removeClass('open');
element.find('ul').slideUp();
}
else {
element.addClass('open');
element.children('ul').slideDown();
element.siblings('li').children('ul').slideUp();
element.siblings('li').removeClass('open');
element.siblings('li').find('li').removeClass('open');
element.siblings('li').find('ul').slideUp();
}
});
});
})(jQuery);
HTML
<div id="cssmenu" >
<ul >
<li class="highlight">
<a id="upload" href="Upload.aspx" ><span>Upload</span></a>
</li>
... (content continues)
</ul>
</div>
CSS
#cssmenu {
position: relative;
margin: 0;
font-family: 'Roboto Condensed';
line-height: 1;
width: 250px;
}
.align-right {
float: right;
}
#cssmenu ul {
margin: 0;
padding: 0;
list-style: none;
display: block;
}
... (CSS styling continues)