Hello,
First time posting here.
I’ve successfully implemented MagicLine.js into my WordPress website. However, when I hover over items in the dropdown sub-menu, the line reverts back to its original state.
My goal is to have the line remain over the parent menu item as I hover its sub-menu children. I saw another post that seemed to pertain to this, but I wasn’t able to adapt it to my site.
Any help would be GREATLY appreciated!!
Here is my JavaScript:
$(function() {
var $el, leftPos, newWidth,
$mainNav = $("#menu-main");
$mainNav.append("<li id='magic-line'></li>");
var $magicLine = $("#magic-line");
$($magicLine)
.width($(".current_page_item").width())
.css("left", $(".current_page_item a").position().left)
.data("origLeft", $magicLine.position().left)
.data("origWidth", $magicLine.width());
$("#menu-main li a").hover(function() {
$el = $(this);
leftPos = $el.position().left;
newWidth = $el.parent().width();
$magicLine.stop().animate({
left: leftPos,
width: newWidth
});
}, function() {
$magicLine.stop().animate({
left: $magicLine.data("origLeft"),
width: $magicLine.data("origWidth")
});
});
});