Expanding Split-Screen Grid Navigation

This Expanding Split-Screen Grid Navigation transforms standard menu items into an immersive, interactive gallery experience. It organizes content into a responsive grid where hovering over an item reveals a contextual background image, and clicking expands the section into a full-screen detailed view. This component is ideal for portfolios, featured article selections, or high-end agency landing pages where visual storytelling is key.

Core Technique

The component relies on a combination of SCSS layouts and JavaScript state management to handle the transitions between the grid view and the expanded tab view.

1. Responsive Layout: The CSS uses Flexbox to handle the grid. At mobile sizes, items are stacked. Media queries adjust the width of .fancy-nav__item to 50% (tablets) and 25% (desktops) to create the grid effect without Grid Layout, ensuring compatibility.
2. Hover Interaction: JavaScript listens for mouseover events on the list. It uses event.target.closest(DOM.item) to identify which item is hovered and then toggles the opacity of the corresponding full-screen background image (.fancy-nav__img).
3. Staggered Reveal: When an item is clicked, the openFancyTab function adds the .is-visible class to the container. Crucially, it also calls addAnimationClassesOnTabOpen, which adds classes to child elements (close button, image, description) individually. This allows CSS transitions to fire with different transition-delay values (defined in SCSS), creating a smooth, staggered entrance animation.

Customization

The component makes extensive use of SCSS variables for colors and mixins for transitions, making it easy to style.

/* Color Variables */
$bg-color--accent1: #304949; /* Slate Grey */
$bg-color--accent2: #954722; /* Saddle Brown */
$bg-color--accent3: #ca4985; /* Magenta Pink */
$bg-color--accent4: #5c7450; /* Moss Green */

/* Changing the staggered animation speed */
.fancy-nav__tab-description.is-visible {
  /* Increase delay for a slower sequence */
  @include transition-mix($delay: 0.4s); 
}

To modify the responsiveness (e.g., stay 2 columns on desktop), adjust the media queries:

/* Currently switches to 4 columns at 1400px */
@media (min-width: 1400px) {
  .fancy-nav__item {
    /* width: 25%; -> Change to 50% for 2x2 grid */
    width: 25%; 
  }
}

Tips

1. Accessibility (A11y) Enhancement: The current implementation uses div elements for the interactive grid items (.fancy-nav__item). This is not accessible to keyboard users. To fix this, change the div tags to <button> tags or add role="button" and tabindex="0". You will also need to add a keydown event listener in JavaScript to trigger the click logic when the “Enter” key is pressed.

2. Image Optimization: Since this component loads multiple full-screen images (one for each background + one inside each tab), the page weight can get heavy quickly. Use lazy-loading for the images inside the tabs (loading="lazy") since they are initially hidden. For the background images, ensure they are compressed and consider using responsive srcset attributes.