The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript Magic line Navigation issue

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #38289

    I have a navigation on my web page taken from Chris’s Magic Line Navigation and the list items should have (but they don’t accurately have, read on to know) a sort of underline image on the current item (

    like this image

    and when a user hovers over any anchor of list item in the navigation, the line animates itself towards the hovered anchor. The problem is that when the current menu item is clicked on, the line gets settled below the current menu item but the line’s position from left is not what it should be. The image below will illustrate what i mean.

    This image

    I am using the following code for this purpose:

    function magicNav() {

    $(function() {
    var $el, leftPos, newWidth;
    $mainNav2 = $("#main-nav");

  • ");

    var $magicNav = $("#magic-nav");

    .css("left", $(".current-menu-item a").position().left)
    .data("origLeft", $(".current-menu-item a").position().left)
    .data("origWidth", $(".current-menu-item a").width());

    $("#main-nav li a").hover(function() {
    $el = $(this);
    leftPos = $el.position().left;
    newWidth = $el.parent().width();

    left: leftPos,
    width: newWidth
    }, function() {
    left: $"origLeft"),
    width: $"origWidth")

    Following is my CSS for the #magic-nav
    Copy code

    #main-nav #magic-nav {
    position: absolute;
    left: 0;
    width: 100px;
    background: url(images/nav-link-bg.png) no-repeat;
    z-index: 100;
    margin: 5px 0;


    How do i fix this? If you people need more information like css of navigation list, anchors, etc… please let me know.




    i’m having the same problem. did you end up figuring this out?

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.