I'm new to jQuery and want to add the hoverIntent plugin to my site as my navigation menu. I have been referred to Brian Cherne's site and see the code to download, but I'm not quite sure how to put it all together to make it work.
Can someone post a sample of what the HTML code should look like with the appropriate hoverIntent plugin code added in? Or refer me to a reference?
I'd be most appreciative! Thanks!
hoverIntent is a plug-in that attempts to determine the user's intent... like a crystal ball, only with mouse movement! It is similar to jQuery's hover method. However, instead of calling the handlerIn function immediately, hoverIntent waits until the user's mouse slows down enough before making the call.
if you wish to use hoverIntent functionality without being dependent to jQuery, you can use the Pure JavaScript ES6 version of it (or convert it to es5 with ease).
const hoverIntent = (el, onOver, onOut) => {
let x;
let y;
let pX;
let pY;
const h = {};
let state = 0;
let timer = 0;
let options = {
sensitivity: 7,
interval: 100,
timeout: 0,
handleFocus: false,
overClass: 'hovered'
};
const delay = e => {
if (timer) timer = clearTimeout(timer);
state = 0;
if (onOut) {
return onOut.call(el, e);
}
el.classList.remove(options.overClass);
return false;
};
const tracker = e => {
x = e.clientX;
y = e.clientY;
};
const compare = e => {
if (timer) timer = clearTimeout(timer);
if (Math.abs(pX - x) + Math.abs(pY - y) < options.sensitivity) {
state = 1;
if (onOver) {
return onOver.call(el, e);
}
el.classList.add(options.overClass);
return false;
}
pX = x;
pY = y;
timer = setTimeout(() => {
compare(e);
}, options.interval);
return false;
};
// Public methods
const dispatchOver = e => {
if (timer) timer = clearTimeout(timer);
el.removeEventListener('mousemove', tracker, false);
if (state !== 1) {
pX = e.clientX;
pY = e.clientY;
el.addEventListener('mousemove', tracker, false);
timer = setTimeout(() => {
compare(e);
}, options.interval);
}
return this;
};
const dispatchOut = e => {
if (timer) timer = clearTimeout(timer);
el.removeEventListener('mousemove', tracker, false);
if (state === 1) {
timer = setTimeout(() => {
delay(e);
}, options.timeout);
}
return this;
};
if (el) {
el.addEventListener('mouseover', dispatchOver, false);
el.addEventListener('mouseout', dispatchOut, false);
}
h.options = opt => {
options = { ...options, ...opt };
return h;
};
h.remove = () => {
if (!el) return;
el.removeEventListener('mouseover', dispatchOver, false);
el.removeEventListener('mouseout', dispatchOut, false);
};
return h;
};
usage:
const menuEl = document.querySelector('.menu');
hoverIntent(menuEl);
this will add "hovered" class to menu element, then you can use plain CSS to enable/disable child-dropdown-boxes when parent-menu-item is hovered
The css will be something similar to;
.menu.hovered .parent-li:hover {
background-color: #f4f4f4;
}
.menu.hovered .parent-li:hover .child {
display: block;
}
I created a playground, see the live demo:
https://codepen.io/mcakir/full/OJVJmdV
Advanced usage: hoverIntent
method accepts onOver
and onOut
as well as to be extended options
.
example:
const onOverHandler = () => {
console.log('mouse in!');
// do something
}
const onOutHandler = () => {
console.log('mouse out!');
// do something
}
const customOptions = () => {
sensitivity: 7,
interval: 300,
timeout: 200,
}
const menuEl = document.querySelector('.menu');
hoverIntent(menuEl, onOverHandler, onOutHandler).options(customOptions);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With