I am implementing this “Magic Line” code into my navigation menu, but I seem to be having troubles when adding a sub menu. When you hover over any sub menu items, the magic line shoots all the way to the left side of the page. I would like it to stay on the menu item that the submenus are under.

You can view my site here: http://www.christmaslightsinstallation.ca/

Original script (without sub nav): http://css-tricks.com/examples/MagicLine/

(I tried a fiddle for this, but since it’s in wordpress it wasn’t translating very well)

My javascript is as follows:

$(function() {
var $el, leftPos, newWidth,
    $mainNav = $("#menu-main-menu");
$testing = $(".menu-header");
$testing.append("<span id='magic-line'></span>");
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-menu 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")
    });    
});
});

I tried creating a second hover function using “#menu-main-menu li li a”, and trying to use a “preventdefault();” event. Which just caused a ton of errors.

I’m fairly new to javascript, so limited on things I can think of/know how to do, to try a fix for this.

Read more here: Magic Line CSS/Javascript code - Adding sub navigation


Solution:

If you know the solution of this issue, please leave us a reply in Comment section, to update the question.

Related Wordpress search:

, , , , ,

Wordpress related questions and answers: