I am currently working on a vertical accordion menu that opens on hover, stays open, and closes when other items are hovered. The great assistance I received from @JDandChips has been instrumental in getting this feature up and running.
Now, my main focus is to enable the selection of a specific menu item (virtual-tour) to open the nested list. As users navigate through each link in this nested list, a new page is loaded (as it's Joomla!), and the nested list remains open only on these pages. Subsequently, when another link is clicked, it closes again. Here's what I have implemented so far...
<script type="text/javascript">
$(function () {
$("ul.menu-main > li").hover(function () {
//Don't do this again if the same menu is hovered
if (!$(this).hasClass('selected')) {
//Ensure any open sub-menu is closed.
$("li.selected").children("ul").stop(true, true).slideUp(1000);
$("li.selected").removeClass('selected');
//Open sub-menu
$(this).addClass('selected');
$(this).children("ul").slideDown(1000);
}
});
});
</script>
<nav>
<ul class="menu-main">
...
/* Continued code */
...
</ul>
</nav><!-- #nav -->
nav {
position:absolute;
top:190px;
left:0;
width:200px;
min-width:200px;
height:900px;
background:transparent;
z-index:9999;
}
#nav-bg {
position:absolute;
top:200px;
left:0;
width:200px;
height:80%;
background:<?php echo $contactscheme ?>;
}
/* More CSS styles */