Magicline and superfish navigation menu aren't playing well together - CSS-Tricks

This topic is empty.

Viewing 1 post (of 1 total)

Author

Posts
October 31, 2012 at 11:04 am #40544

Robbiegod
Member

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”);

});