Home/ Questions/Q 8625141
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T07:42:31+00:00

I have a vertical accordion menu that opens on hover, stays open and closes

  • 0

I have a vertical accordion menu that opens on hover, stays open and closes when other items are hovered. I had great help from @JDandChips on getting this working.

What I really need now though is to be able to select a particular menu item (virtual-tour) to open the nested list. Then when navigating through each link in this nested list it loads a new page (already does this as it’s Joomla!) and the nested list stays open on these pages only. Then when another link is clicked it closed again. Here’s what I have working…

 <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">
<li class="item-108"><a href="#">Home</a></li>
<li class="item-111 deeper parent"><a href="#">History and Restoration</a>
<ul>
<li class="item-125"><a href="#">History</a></li>
<li class="item-126"><a href="#">The Connection</a></li>
<li class="item-127"><a href="#">Previous Residents</a></li>
<li class="item-128"><a href="#">Restoration</a></li>
<li class="item-129"><a href="#">Sidmouth / Heritage Coast</a></li>
</ul>
</li>
<li class="item-112"><a href="#">Wedding Venue</a></li>
<li class="item-113"><a href="#">Hiring Rooms</a>       </li>
<li class="item-114 deeper parent"><a href="#/virtual-tour"     >Virtual Tour</a><ul><li class="item-132"><a href="#/virtual-tour/entrance-hall" >Entrance Hall</a></li>
<li class="item-133"><a href="#/virtual-tour/amyatt-room-one" >Amyatt Room One</a></li>
<li class="item-134"><a href="#/virtual-tour/amyatt-room-two" >Amyatt Room Two</a></li>
<li class="item-135"><a href="#/virtual-tour/board-room" >Board Room</a></li><li class="item-136"><a href="#/virtual-tour/captain-phillips-room" >Captain Phillips Room</a></li>
<li class="item-137"><a href="#/virtual-tour/function-room" >Function Room</a></li>
<li class="item-138"><a href="#/virtual-tour/gordon-langford-room" >Gordon Langford Room</a></li>
<li class="item-139"><a href="#/virtual-tour/hatton-wood-room" >Hatton Wood Room</a></li>
<li class="item-140"><a href="#/virtual-tour/meeting-room" >Meeting Room</a></li>
<li class="item-141"><a href="#/virtual-tour/rw-sampson-room" >RW Sampson Room</a></li>
<li class="item-142"><a href="#/virtual-tour/first-floor-reception-hallway" >First Floor Reception Hallway</a></li></ul></li>
<li class="item-115"><a href="#">Art and Exhibitions</a></li>
<li class="item-116"><a href="#">Learning</a></li>
<li class="item-117 deeper parent"><a href="#">How Can I help</a>
<ul>
<li class="item-130"><a href="#">Friends of Kennaway House</a></li>
<li class="item-131"><a href="#">Volunteer Opportunities</a></li></ul></li>
<li class="item-118"><a href="#">Gallery</a></li>
<li class="item-119"><a href="#">Contact</a></li>
</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 ?>;
}

nav:before {
content:'';
position:absolute;
top:-10px;
right:0;
width:0;
border-top:10px solid transparent; /* height of right point */
border-right:200px solid #570C2A;
z-index:2;
}

nav:after {
content:'';
position:absolute;
top:0;
left:135px;
width:50px;
height:500px;
background:transparent;
-webkit-transform:rotate(2deg);
-moz-transform:rotate(2deg);
-ms-transform:rotate(2deg);
transform:rotate(2deg);
-webkit-box-shadow:<?php echo $boxshadownav ?>;
-moz-box-shadow:<?php echo $boxshadownav ?>;
box-shadow:<?php echo $boxshadownav ?>;
z-index:-1;
}

.menu-main,
.menu-main ul {
max-height:900px;
margin:0;
padding:0;
list-style:none;
text-align:center;
font-size:1.2em;
background:#570C2A;
}

.menu-main li {
line-height:70px;
margin:0;
padding:0;
   }

.menu-main a {
display:block;
color:beige;
text-decoration:none;
    }

.menu-main a:hover, a:focus {
color:darkslategray;
 text-decoration:none;
text-shadow:none;
outline:0 none;
-webkit-transition:250ms linear 0s;
-moz-transition:250ms linear 0s;
-o-transition:250ms linear 0s;
transition:250ms linear 0s;
}

.menu-main a:hover, a:focus {
color:beige;
text-shadow:1px -1px 14px beige;
}

.menu-main ul {
height:auto;
display:none;
}

.menu-main ul li {
font-size:0.6em;
line-height:30px;
}

.menu-main ul a {
background:transparent;
}

li.item-111.parent {
background:#486060;
line-height:22px;
padding:12px 3%;
}

/* -- sub menu styles for History and Restoration  -- */
.item-125, .item-126, .item-127, .item-128, .item-129 {
background:#486060;
}

.item-125 {
border-top:2px dotted <?php echo $listborders ?>;
}

.item-129 {
    border-bottom:2px dotted <?php echo $listborders ?>;
}

/* -- ===end=== -- */

.item-112 {
background:#557171;
}

.item-113 {
background:#663366;
}

.item-114 {
background:#86ACA8;
}

.item-115 {
background:#CD7F72;
}

.item-116 {
background:#BD8A16;
}

li.item-117.parent {
background:#C59F92;
line-height:50px;
padding:12px 3%;
}

/* -- sub menu styles for How Can I Help -- */
.item-130, .item-131 {
background:#C59F92;
}

.item-130 {
border-top:2px dotted <?php echo $listborders ?>;
}

.item-131 {
border-bottom:2px dotted <?php echo $listborders ?>;
}

/* -- ===end=== -- */

.item-118 {
background:#869175;
}

.item-119 {
background:<?php echo $contactscheme ?>;
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You may notice that after you click an item in the menu, that menu item will load with the class “active”. You can then target this menu item via active and show the item.

    Here is the code:

    if($('.active.parent > ul').length > 0)
{
    $('.active.parent > ul').show();
}

    The first line just checks that there is an active element, otherwise we might get a script error. Within the bracers the code simply shows the element. Give this a go and let me know how you get on.

    Also, it’s a good idea to utilize your developer toolbar (F12) in cases like this, so you can monitor the DOM and spot things like the active class.

    • 0