Magic Line in WordPress with pages not in the menu

[Etabeeta]

Hi, I’m building a wordpress site with the magic line trick, and so far it looks pretty awesome, I love jQuery.
https://css-tricks.com/jquery-magicline-navigation/

I hate to be a pain but on my site there are some pages that are not available in the menu (such as blog posts, shop pages, etc) and when I’m on one of those the magic line just sticks off to the left side of the window.

I was wondering if there is any way that I can get the line to still work and maybe stick under one of the other pages while surfing these non-main-menu pages? Because the red line looks for the current_page_item, and that is not always the case. I’m looking for some way to either make the magic line understand that a news post is under the News-page, or do some dirty fix where the news posts have the line under News.

Example:
If I navigate to News, the red line moves under news and sticks there. However, if I then click on one of the blog posts to view it as a single post, the red line just sticks to the left side of the window.

Im sorry if this was formulated poorly, here is the link to my page.
http://www.uma-i.net/wp-shop/

[Damion]

Try adding this code just below the ‘$(function() {‘

if ( $('.current_page_item').length() < 0 ) {

$('#menu-main li:first').addClass('current_page_item');

}

Hope this helps,
Damion.

[Etabeeta]

Hi, thanks for the help but it doesn’t work. Instead it makes all jQuery (including the magic line) to break. This is my code:

$(function(){



/*if ( $('.current_page_item').length() < 0 ) {

$('#menu-main li:first').addClass('current_page_item');

}*/



var $el, leftPos, newWidth,

$mainNav = $("#menu-main"),

$mainNav2 = $("#example-two");



/*

EXAMPLE ONE

*/

$mainNav.append("
");



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").find("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")

});

});



});

[Etabeeta]

Bump? Anyone?

[jkkenzie]

This post is too old for this reply BUT — I had to use two functions
on functions.php of my theme

function add_classes_on_li($classes, $item, $args) {
    if(!in_array('current-menu-item', $classes)){
          add_filter('wp_nav_menu', 'add_first_and_last');
    }
  return $classes;
}
add_filter('nav_menu_css_class','add_classes_on_li',1,3);
function add_first_and_last($output) {
  $output = preg_replace('/class="menu-item/', 'class="current-menu-item menu-item', $output, 1);
  return $output;
}

I hope it helps.. My problem came when the magic line refused to move on hover… :)

[Author]

Posts