Magic line navigation

[grimski]

I’m trying to use the ‘magic line’ effect on my navigation. I’ve used the article (https://css-tricks.com/jquery-magicline-navigation/) posted on this website as a guide and I have it working.

https://codepen.io/moy/pen/Yjqrqo

However, the problem is when the sites currently page is the homepage, there’s no menu item. So the class current-menu-item has nowhere to go and so the line renders like this:

https://codepen.io/moy/pen/qyNQaW

Is there away so when there is no ‘current’ nav link in the menu, the line is hidden until an nav link is hovered over? Then the line fades/slides in (slightly) and then slides along when you hover over the other menu items?

The only other way I thought about solving this was to add the logo into the nav so that also has a ‘current’ state. It works (hacked CodePen below) but I’m not sure if a line sliding from one side of the screen to the other is a bit OTT.

https://codepen.io/moy/pen/PBzxQK

Thoughts? Thanks in advance! :)

[chris_2080]

If I understand you correctly. Is that what you need?
https://codepen.io/chris3000/pen/oMLQKB

[grimski]

Hey, thanks for the reply!

As a general effect I think it’d be better if the line faded in on the item you’re hovering over. Then moved when you hover over another item. It could then fade out again if you move the mouse away.

I wonder if that could be achieved by if the class is not present add it to an item when it’s hovered over.

The problem I see with the example is that if you add the class of current-menu-item to a li, for example when you’ve navigated from the homepage to ‘about’ the line doesn’t work.

[chris_2080]

Take a look at the modified example, I commented out the unnecessary code. You can easily experiment with the position and so on.
https://codepen.io/chris3000/pen/oMLQKB

[grimski]

Thanks again! I think that’s closer, I’ll see if I can have a play around with it over the weekend. I think It’d be better if it just faded in on hover rather than slide into view. Then only slide around when you hover over the other elements.

Looks like when a page is selected (for example if you’re on the About page), the selected style doesn’t work now: https://codepen.io/moy/pen/vayzze

[chris_2080]

ah i see ;)

 if ($mainNav.children().hasClass('current-menu-item')){
      $magicLine
        .width($(".current-menu-item").width())
        .css("left", $(".current-menu-item a").position().left)
      $magicLine.show();
}else{
    $magicLine.hide();
}

[grimski]

I think it’s nearly there! I’ve had a play around with it this morning but I’m struggling a bit! Here it is so far:

https://codepen.io/moy/pen/NBdXVO

The issues I’m having is…

1. When an item has a class of current-menu-item and you hover over other items and then leave the nav the selected style doesn’t return to the ‘selected’ item. It just disappears :(

2. If there is no selected item (if you remove the class), is there a way to made the line fade in/out on hover rather than slide in from the left? So I think it would instantly have the correct size and just fade in on over above the text. Is that possible or quite complex?

[Author]

Posts