The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript jQuery MagicLine with Drop Down Menu

  • This topic is empty.
Viewing 1 post (of 1 total)
  • Author
  • #195129


    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: $"origLeft"), width: $"origWidth") }); }); });
Viewing 1 post (of 1 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.