Волхвы c Выпадающее меню Nav?

Question

Пожалуйста, посмотрите анимацию / стиль выпадающего списка рабочего стола на этом сайте:

https://weworkremotely.com/

Я видел этот стиль меню навигационной панели на нескольких сайтах недавно; где раскрывающийся список перемещается с курсором. У кого-нибудь есть представление о том, в какую структуру он входит? Или любая ссылка на учебник / руководство, чтобы получить что-то вроде этого работает? Я пытался просмотреть исходный код и поискать в Magi c Nav, но безрезультатно!

Cheers,

Kyle

Answer 1

В данном случае это выглядит как пользовательский JavaScript, созданный после Prototype Framework, но не имеющий к нему отношения.
Это один из последних скриптов, загруженных в конец тела и вот фрагмент кода, относящийся к меню magi c, который вы можете проанализировать, чтобы понять, как он работает.

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";
    }
  });
}
;