A menu bar featuring dual color schemes for visual differentiation

Question

A menu bar featuring dual color schemes for visual differentiation

I am currently designing a navigation bar where one category stands out with a different color (blue) compared to the rest (green). The functionality I'm aiming for is that when the cursor moves away from the blue HOME category, it should change back to green. Conversely, when hovering over any category, including HOME, it should turn blue, and revert to green once not hovered over. Here are some visual references:

Default/Home state: Users begin on the Home page with the Home category highlighted in blue.

Employer state: Users have navigated to the Employer Page, causing the Home category to switch to green.

Since I am using SFMC, all HTML, CSS, and JavaScript code must be contained separately. Below is the code snippet that I've implemented:

function myFunction() {
  var x = document.getElementById("myTopnav");
  if (x.className === "topnav") {
    x.className += " responsive";
  } else {
    x.className = "topnav";
  }
}

.body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.topnav {
  overflow: hidden;
  background-color: #47a23f;
}
/* Rest of the CSS code remains unchanged */

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="topnav" id="myTopnav">
  <a href="#home" class="active">Home</a>
  <div class="dropdown">
    <button class="dropbtn">Workforce 
      <i class="fa fa-caret-down"></i>
    </button>
    /* Remaining HTML code untouched */
  </div>
  // Closing tags omitted for brevity

javascript html css navigation

Answer 1

Answer №1

If you desire to revert active elements back to their normal color when hovering over other elements, simply include the following CSS code at the end of your stylesheet:

.topnav > .active {
  background-color: #005da6;
}

.topnav:hover > .active {
  background-color: inherit;
}

.topnav > .active:hover {
  background-color: #005da6;
}

.dropdown-content > .active {
  background-color: #003150;
}

.dropdown-content:hover > .active {
  background-color: inherit;
}

.dropdown-content > .active:hover {
  background-color: #003150;
}

For handling active elements in a more simplified manner, refer to the snippet below:

(Note: The navigation bar below operates using only HTML and CSS without any JavaScript. JS is solely utilized for automatically updating active elements according to changes in the browser URL.)

// * THIS IS ONLY A DEMONSTRATIVE EXAMPLE *

const links = Array.from(document.querySelectorAll('.topnav a'));

const addActive = (elem) => {
  let current = elem;
  
  while (current && !current.classList.contains('topnav')) {
    if (current.classList.contains('dropdown')) {
      current.classList.add('active');
      break;
    }
    current = current.parentElement;
  }
  
  elem.classList.add('active');
};

const handler = (e) => {
  const previousA = document.querySelector('.topnav .active');
  const previousB = document.querySelector('.dropdown-content .active');
  
  if (previousA) {
    previousA.classList.remove('active');
  }
  
  if (previousB) {
    previousB.classList.remove('active');
  }
  
  const next = links.find((link) => location.href === link.href) || links[0];
  
  if (next) {
    addActive(next);
  }
};

window.addEventListener('popstate', handler);
document.addEventListener('DOMContentLoaded', handler);

.body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

/* Rest of the CSS styles here */

.topnav > .active {
  background-color: #005da6;
}

.topnav:hover > .active {
  background-color: inherit;
}

.topnav > .active:hover {
  background-color: #005da6;
}

.dropdown-content > .active {
  background-color: #003150;
}

.dropdown-content:hover > .active {
  background-color: inherit;
}

.dropdown-content > .active:hover {
  background-color: #003150;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="topnav">
  <a href="#home">Home</a>
  
  /* Sample HTML content structure here */
</div>

Answer 2

If you desire to revert active elements back to their normal color when hovering over other elements, simply include the following CSS code at the end of your stylesheet:

.topnav > .active {
  background-color: #005da6;
}

.topnav:hover > .active {
  background-color: inherit;
}

.topnav > .active:hover {
  background-color: #005da6;
}

.dropdown-content > .active {
  background-color: #003150;
}

.dropdown-content:hover > .active {
  background-color: inherit;
}

.dropdown-content > .active:hover {
  background-color: #003150;
}

For handling active elements in a more simplified manner, refer to the snippet below:

(Note: The navigation bar below operates using only HTML and CSS without any JavaScript. JS is solely utilized for automatically updating active elements according to changes in the browser URL.)

// * THIS IS ONLY A DEMONSTRATIVE EXAMPLE *

const links = Array.from(document.querySelectorAll('.topnav a'));

const addActive = (elem) => {
  let current = elem;
  
  while (current && !current.classList.contains('topnav')) {
    if (current.classList.contains('dropdown')) {
      current.classList.add('active');
      break;
    }
    current = current.parentElement;
  }
  
  elem.classList.add('active');
};

const handler = (e) => {
  const previousA = document.querySelector('.topnav .active');
  const previousB = document.querySelector('.dropdown-content .active');
  
  if (previousA) {
    previousA.classList.remove('active');
  }
  
  if (previousB) {
    previousB.classList.remove('active');
  }
  
  const next = links.find((link) => location.href === link.href) || links[0];
  
  if (next) {
    addActive(next);
  }
};

window.addEventListener('popstate', handler);
document.addEventListener('DOMContentLoaded', handler);

.body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

/* Rest of the CSS styles here */

.topnav > .active {
  background-color: #005da6;
}

.topnav:hover > .active {
  background-color: inherit;
}

.topnav > .active:hover {
  background-color: #005da6;
}

.dropdown-content > .active {
  background-color: #003150;
}

.dropdown-content:hover > .active {
  background-color: inherit;
}

.dropdown-content > .active:hover {
  background-color: #003150;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="topnav">
  <a href="#home">Home</a>
  
  /* Sample HTML content structure here */
</div>

A menu bar featuring dual color schemes for visual differentiation

Answer №1

Similar questions

Received a syntax error from the DOM parser even after successfully downloading it through NPM

When attempting to choose two dates within this application, an error is encountered stating that the datepicker function is not recognized

Netbeans fails to detect Jquery

Reduce the line length for better readability

Express receiving undefined data in Ajax POST request

Is it possible to have two unique keys in a single MongoDB schema?

Firebase Storage Metadata Disappearing Act

Implementing an Ajax function for handling multiple button clicks

Executing Child Validators when moving to the next step in an Angular MatStepper from the Parent Component

Having the same name for multiple query parameters does not result in an array being returned

Include an external JavaScript file within a component to display pictures in a web browser using Angular 2

Tips for transforming a JSON response into an array with JavaScript

Experiencing difficulties with NPM installation

Invoke an array in PHP

Issues arise when trying to render text within Javascript as "NOTICE", however PHP is able to display it seamlessly without any hiccups

Issue with Struts 2 tag causing malfunction in validating the collection

The curly braces in AngularJS are failing to display the values on the HTML page

Dealing with lag in Kendo Grid (Utilizing Kendo Grid, Angular JS, and Web API)

Error: A property called 'node' is undefined and cannot be read

JavaScript - Monitoring changes to a node before they occur