请在此站点上查看桌面悬停下拉动画/样式:
最近,我在一些网站上看到了这种导航栏菜单;下拉列表随光标移动的位置。有谁知道这是什么框架的一部分?或任何指向教程/指南的链接以获得类似的效果?我曾尝试查看源代码并在Magic Nav上四处搜寻,但无济于事!
干杯,
凯尔
在这种情况下,它看起来像是在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";
}
});
}
;