Jump to content

Customizing Navigation Item Behavior Based on Specific Pages

Go to solution Solved by tuanphan,

Recommended Posts

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 by mindofalexander
Formatting
Link to comment
  • mindofalexander changed the title to Customizing Navigation Item Behavior Based on Specific Pages
  • Replies 3
  • Views 1.3k
  • Created
  • Last Reply

Top Posters In This Topic

  • Solution

Use CSS will be easier to exclude pages

To make "My Work" gray + remove underline + change cursor to arrow + disable click on all pages (except 4 pages above), use this CSS code

body:not(#item-64dd2003f0a4be3998c1f3d1):not(#item-64f2346506390a2bf9baab2d):not(#item-64f344a9c9f6115989c219a6):not(#item-64f46cbb72389701db63100e) {
div.header-nav-item:nth-child(1):hover>a {
    color: gray !important;
    pointer-events: none;
}
div.header-nav-item:nth-child(1):hover a:before {
    opacity: 0;
}}

 

 

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.