Magic Dropdown Nav Menu?

问题描述 投票:0回答:1

请在此站点上查看桌面悬停下拉动画/样式:

https://weworkremotely.com/

最近,我在一些网站上看到了这种导航栏菜单;下拉列表随光标移动的位置。有谁知道这是什么框架的一部分?或任何指向教程/指南的链接以获得类似的效果?我曾尝试查看源代码并在Magic Nav上四处搜寻,但无济于事!

干杯,

凯尔

javascript html css navbar dropdown
1个回答
1
投票

在这种情况下,它看起来像是在Prototype Framework之后制作的自定义JavaScript,但与它没有真正的关系。这是加载到主体末端的最后一个脚本之一,这是与魔术菜单相关的一段代码,您可以对其进行分析以了解其工作原理。

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";
    }
  });
}
;
© www.soinside.com 2019 - 2024. All rights reserved.