Grow your CSS skills. Land your dream job.

Magic Line Navigation Again…

  • # November 10, 2010 at 11:39 am

    All:

    I have only gotten this to work on a WordPress site once, and I thought that I could do it again. Man, I was crazy for thinking that copying and pasting would make it work!

    Here is the js:

    $(function(){

    var $el, leftPos, newWidth,
    $mainNav = $("#page-nav");

    /*
    EXAMPLE ONE
    */
    $mainNav.append("
  • ");

    var $magicLine = $("#magic-line");

    $magicLine
    .width($(".current_page_item").width())
    .css("left", $(".current_page_item").position().left)
    .data("origLeft", $magicLine.position().left)
    .data("origWidth", $magicLine.width());

    $("#page-nav 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")
    });
    });
    });

    Here is the styling of the menu:

    /*
    CSS-Tricks Example
    by Chris Coyier
    http://css-tricks.com
    */

    #navigation { margin-bottom: 15px; }

    #page-nav { height: 24px; background-color: #807d7d; border-top: 3px solid #f8ba4f; border-bottom: 3px solid #f8ba4f; }

    .group:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0;}

    #page-nav { margin: 0 auto; list-style: none; position: relative; width: 960px; padding-bottom: }
    #page-nav li { display: inline;}
    #page-nav li a { color: #f8ba4f; font-size: 14px; display: block; float: left; padding: 6px 20px 6px 20px;
    text-decoration: none; text-transform: uppercase; margin: 0 auto;}
    #page-nav li a:hover { color: white; background: #f8ba4f;}
    #magic-line { position: absolute; bottom: -25px; left: 0; width: 100px; height: 3px; background: #FF0000; }

    .current_page_item a { color: white !important; background: #f8ba4f; }

    I have made the line red so that it can be seen easily. The thing moves and changes sizes, but it does not start in the correct position. Any help here would be great!

    # November 10, 2010 at 11:45 am

    Never mind. Got it fixed by removing some of Hybrid’s default theming.

    # November 10, 2010 at 1:03 pm

    when you solve a problem. mark the thread solved. I helps when people are searching to know there is an answer

    # November 10, 2010 at 1:22 pm

    How do you do that?

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

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