Grow your CSS skills. Land your dream job.

Magicline and superfish navigation menu aren’t playing well together

  • # October 31, 2012 at 11:04 am

    I’m using a superfish menu in wordpress for the primary navigation of my website. I’m building an interactive tool that has a navigation menu inside of it seperate from the main navigation. Basically, the interactive tool is inside of the page that has the superfish menu.

    The problem is when I click the navigation in the tool the height of the line is reset to “0″ for some reason. So, I’m searching for a way to make it so my interactive tool menu and the superfish menu don’t collide. They don’t seem to be playing together nicely.

    So effectively what happens is when I click the link in the interactive tool navigation the line disappears. The line appears and it will follow my mouse until the point that I click it. That’s when everything falls apart.

    I’ve tried a few things like jquery noconflict, but that didn’t help. I would love to send a link, but I can’t share it right now because its client work.

    If anyone knows of a trick to make it so they dont collide that would great news for me. Here is part of my jquery that I’m using for the magic line.

    jQuery(function() {

    var $el, topPos, newHeight;
    $mainNav = jQuery(“#example-one”);

    /*
    EXAMPLE ONE
    */

    /* Add Magic Line markup via JavaScript, because it ain’t gonna work without */
    jQuery(“#example-one”).append(“

  • “);

    /* Cache it */
    var $magicLine = jQuery(“#magic-line”);

    $magicLine
    .height(jQuery(“.current_page_item”).height())
    .css(“top”, jQuery(“.current_page_item a”).position().top)
    .data(“origTop”, $magicLine.position().top)
    .data(“origHeight”, $magicLine.height());

    jQuery(“#example-one li”).find(“a”).hover(function() {
    $el = jQuery(this);
    topPos = $el.position().top;
    newHeight = $el.parent().height();

    $magicLine.stop().animate({
    top: topPos,
    height: newHeight
    });
    }, function() {
    $magicLine.stop().animate({
    top: $magicLine.data(“origTop”),
    height: $magicLine.data(“origHeight”)
    });
    });

    jQuery(“#example-one li a”).dequeue().click(function() {
    /* Cache it */
    var $magicLine = jQuery(“#magic-line”);

    jQuery(this).parent().siblings().removeClass(“current_page_item”);
    jQuery(this).parent().addClass(“current_page_item”);

    $magicLine
    .height(jQuery(“.current_page_item”).height())
    .css(“top”, jQuery(“.current_page_item a”).position().top)
    .data(“origTop”, $magicLine.position().top)
    .data(“origHeight”, $magicLine.height());
    console.log(“click”)
    });

    });

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".