CODEWITHSUNDEEP
jqueryclassdrop-down-menumenuparent
glennyboy
glennyboy

Reputation: 163

Change Class of Parent in Menu Dropdown

I have a menu that as the user scrolls down a current class called 'w--current' is automatically added to the single level-top level and sub-menu items, but it is not automatically added to the top-level/parent item for the submenu itself. I want to ensure that as the user scrolls down if they are on a menu item that the menu parent link is also highlighted via CSS.

Menu HTML

<nav class="nav-menu w-nav-menu" role="navigation">
<a class="nav-link w-nav-link w--current" href="#home" style="max-width: 1100px;">Home</a><div class="dropdown w-dropdown" data-delay="0" style="max-width: 1100px;"><div class="nav-link nav-link-dropdown w-dropdown-toggle"><div class="nav-dropdown-arrow w-icon-dropdown-toggle"></div><div>Our Home</div></div><nav class="dropdown-list w-clearfix w-dropdown-list">
<a class="nav-dropdown-link w-dropdown-link" href="#history">History</a><a class="nav-dropdown-link w-dropdown-link" href="#facilities">Facilities &amp; Care</a><a class="nav-dropdown-link w-dropdown-link" href="#activities">Activities at the heart of care</a>
<a class="nav-dropdown-link w-dropdown-link" href="#food">Food Glorious Food</a></nav></div>
<a class="nav-link w-nav-link" href="#gallery" style="max-width: 1100px;">Gallery</a>
<a class="nav-link w-nav-link" href="#family" style="max-width: 1100px;">Our Family</a>
<a class="nav-link w-nav-link" href="#reviews" style="max-width: 1100px;">Reviews</a>
<a class="nav-link w-nav-link" href="#news" style="max-width: 1100px;">News</a>
<a class="highlight nav-link w-nav-link" href="#contact" style="max-width: 1100px;">Contact</a>
</nav>

I actually have this partially working with a demo here:-

http://silveroaks.webflow.io/

... but only if there is only one submenu and moving forwards I'm going to have more than one.

This is the existing code:-

<script>
jQuery(window).on("focus load resize scroll",function(e){
jQuery(document).ready(function($){
if ($('.dropdown .nav-dropdown-link.w--current').length > 0) { 
 $(".nav-dropdown-link.w--current").parents(".dropdown").addClass("dcurrent");
 }
 else {
 // this bit currently removes the class from all submenus
$(".dropdown").removeClass("dcurrent");
 }
 });
 });
  </script>

CSS

.dcurrent > .nav-link {
color: white;
background: #005b2f;
}

You will note that the if statement universally removes the class 'dcurrent' from any .dropdown which will not work if there is more than one dropdown. So how can I rework the code so that it works with multiple dropdowns - so it removes the class as the user scrolls beyond each submenu if more than one exists.

Upvotes: 0

Views: 411

Answers (1)

SilverSurfer
SilverSurfer

Reputation: 4365

You could iterate over each class element and check if has childs, like this:

$('.dropdown .nav-dropdown-link.w--current').each(function() {
        if ($(this).length) {
            $(this).parents(".dropdown").addClass("dcurrent");
        } else {
            // this bit currently removes the class from all submenus
            $(this).parents(".dropdown").removeClass("dcurrent");
        }
})

Upvotes: 0

Related Questions