Customizing Navigation Item Behavior Based on Specific Pages

Hello everyone,

I'm currently in the process of enhancing the navigation experience on my Squarespace website. My website's navigation already has several dynamic animations, and now I would like to introduce an additional feature.

My Website: https://mindofalexander.squarespace.com

The Problem:

I have a specific navigation item (`nav-item id="yui_3_17_2_1_1694084768474_515"`) or the "My Work" button that I want to behave differently based on certain pages in the website. When the page is active but NOT one of these 4 specific pages, hovering over the navigation item should display the default arrow cursor, and clicking should do nothing (like it currently does right now).

However, when the user is inside one of these four pages:

- `#item-64dd2003f0a4be3998c1f3d1`              
https://mindofalexander.squarespace.com/my-work/jlove-tv
- `#item-64f2346506390a2bf9baab2d`             
https://mindofalexander.squarespace.com/my-work/trimark
- `#item-64f344a9c9f6115989c219a6`                
https://mindofalexander.squarespace.com/my-work/odd-fellows-barber-co
- `#item-64f46cbb72389701db63100e`              
https://mindofalexander.squarespace.com/my-work/simple-haven

I want the cursor to show a finger pointer and clicking on it should take the user to the specific page. Also, the style should remain grey when hovered.

Thanks For the Help:

I would really appreciate any guidance or sample code to solve this issue. Thank you for your time and expertise!

What I've Done So Far:

Here's a snippet of the CSS and JavaScript I have for handling navigation styles and animations:

CSS:

/* Header nav buttons */

.header-nav-item--active a {
  background-image: none !important;
  color: blue !important;
}

.header-nav-item--active a::before {
  width: 100%;
  height: 4px; /* Making it thicker */
  background-color: blue; /* or any color that indicates it's the active page */
  visibility: visible; /* <--- Add this line */
}

/* THIS HIDES THE ACTIVE UNDERLINE */

.hide-active-underline::before {
  visibility: hidden; /* <--- Add this line */
}

/* Position and styles */

.header-nav-item a {
  position: relative;
  overflow: hidden;
  transition: color 0.3s ease-in-out;
}

/* Header nav colors and animations */

.header-nav-item a::before {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: blue;
  transition: all 0.3s ease-in-out;
}

.header-nav-item a:hover {
  color: blue;
}

.header-nav-item a.my-custom-exit::before {
  left: 100%;
  background-color: black;
}

.header-nav-item a.my-custom-enter::before {
  width: 100%;
}

.header-nav-item--active a::before {
  width: 100%;
  height: 2px;
  background-color: blue;
  visibility: visible;
}

.header-nav-item--active a.hide-active-underline::before {
  left: 50%;
  right: 50%;
  width: 0%;
}

.header-nav-item--active a.hide-active-underline::before {
  left: 50%;
  right: 50%;
  width: 0%;
  background-color: blue;
}

.header-nav-item--active a.hover-active {
  color: #C0C0C0 !important;
}

.header-nav-item--active.quick-transition a,
.header-nav-item--active.quick-transition a::before {
  transition-duration: 0.2s !important;
  transition-timing-function: ease-in-out !important;
}

/* Sets cursor to a default arrow for active navigation items */
.header-nav-item--active a {
  cursor: default;  /* Add this line */
  background-image: none !important;
  color: blue !important;
}

/* Sets the cursor to a hand (pointer) for non-active navigation items */
.header-nav-item a {
  cursor: pointer;  /* Add this line */
  position: relative;
  overflow: hidden;
  transition: color 0.3s ease-in-out;
}

/* Makes the My Work item clickable and shows pointer cursor when on a sub-page */
.header-nav-item a.sub-page-active {
  cursor: pointer !important;
}


Javascript:

<script>
// Dynamic Underline Animation on Navigation Buttons
document.addEventListener('DOMContentLoaded', function () {
  // Select all nav items
  const navItems = document.querySelectorAll('.header-nav-item a');

  navItems.forEach(function (navItem) {
    // Check if the nav item is active
    const isNavItemActive = navItem.parentElement.classList.contains('header-nav-item--active');

    // Set the cursor type based on the active state
    navItem.style.cursor = isNavItemActive ? 'default' : 'pointer';

    // Add click event listener to prevent clicks on active items
    navItem.addEventListener('click', function (event) {
      if (isNavItemActive) {
        // Prevent the click event if this is the active item
        event.preventDefault();
      }
    });

    // Mouse enter event
    navItem.addEventListener('mouseenter', function () {
      // Add classes for enter animation
      this.classList.add('my-custom-enter');
      this.classList.remove('my-custom-exit');
      if (isNavItemActive) {
        // Hide the active underline only for the active item
        this.classList.add('hide-active-underline');
        this.classList.add('hover-active');
      }
    });

    // Mouse leave event
    navItem.addEventListener('mouseleave', function () {
      // Remove hover-active and enter classes
      this.classList.remove('my-custom-enter', 'hover-active');
      
      if (isNavItemActive) {
        // For the active item, grow the underline back from the center
        this.parentElement.classList.add('quick-transition');  // Add quick transition class
        this.classList.remove('hide-active-underline');
        this.classList.add('hide-active-underline');
      } else {
        this.classList.add('my-custom-exit');
      }

      // Remove classes after the transition ends
      setTimeout(() => {
        this.classList.remove('my-custom-exit', 'hide-active-underline');
        this.style.transition = 'none';
        const beforeEl = window.getComputedStyle(this, ':before');
        this.style.setProperty('--before-left', beforeEl.left);
        this.style.transition = '';
        if (isNavItemActive) {
          // Remove quick transition class for the active item
          this.parentElement.classList.remove('quick-transition');
        }
      }, isNavItemActive ? 200 : 300);  // Timing based on whether the item is active
    });
  });
});
</script>

Edited September 7, 2023 by mindofalexander
Formatting

Bump

@tuanphan  Hey there! I was able to find a solution. 

Thanks!

Edited September 9, 2023 by mindofalexander