Magic Dropdown Nav Menu?

Question

Please see the desktop hover dropdown animation/style at this site:

https://weworkremotely.com/

I've seen this style of navbar menu on a few sites recently; where the dropdown moves with the cursor. Does anyone have an idea of what framework this is a part of? Or any link to a tutorial/guide to get something like this working? I've tried viewing the source code and googling around for Magic Nav's but to no avail!

Cheers,

Kyle

Answer 1

In this case, it looks like a custom JavaScript made after Prototype Framework, but not really related to it.
It is one of the last scripts loaded on the end of the body and here is a piece of the code related to the magic menu that you can analyse to understand how it works.

var triggers = document.querySelectorAll(".wwr__nav > li.magic__nav");
var background = document.querySelector(".dropdownBackground");
var nav = document.querySelector(".top");
var search_bar = document.getElementById("index-search-bar");
var search_term = document.getElementById("search_term")

function searchDropdown() {
  if (search_bar.classList.contains('hidden')) {
    search_bar.classList.remove('hidden')
    search_bar.classList.add('toggle-slidein')
    setTimeout(function(){
      search_term.focus()
    }, 30);
    // Hide search bar if not targeted
    document.addEventListener('mouseup', function (e) {
      if (!search_bar.contains(e.target)) {
          search_bar.classList.add('hidden')
      }
    }.bind(this));
  } else {
    search_bar.classList.add('hidden')
  }
}

function handleEnter() {
  this.classList.add("trigger-enter");
  setTimeout(
    () =>
    this.classList.contains("trigger-enter") &&
    this.classList.add("trigger-enter-active"),
    150
  );
  background.classList.add("open");

  var dropdown = this.querySelector(".dropdown");
  var dropdownCoords = dropdown.getBoundingClientRect();
  var navCoords = nav.getBoundingClientRect();

  var coords = {
    height: dropdownCoords.height,
    width: dropdownCoords.width,
    top: dropdownCoords.top - navCoords.top,
    left: dropdownCoords.left - navCoords.left
  };

  background.style.setProperty("width", `${coords.width}px`);
  background.style.setProperty("height", `${coords.height}px`);
  background.style.setProperty(
    "transform",
    `translate(${coords.left}px, ${coords.top}px)`
  );
}

function handleLeave() {
  this.classList.remove("trigger-enter", "trigger-enter-active");
  background.classList.remove("open");
}

triggers.forEach(trigger =>
  trigger.addEventListener("mouseenter", handleEnter)
);
triggers.forEach(trigger =>
  trigger.addEventListener("mouseleave", handleLeave)
);

/* Toggle between showing and hiding the navigation menu links when the user clicks on the hamburger menu / bar icon */
function myFunction() {
  var x = document.getElementById("myLinks");

  if (x.style.display === "block") {
    x.style.display = "none";
  } else {
    x.style.display = "block";
  }
}

/* Accordian within nav */
var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function () {
    this.classList.toggle("active-options");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight) {
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    }
  });
}
;