Forums

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

Home Forums CSS Magic Line Navigation Again…

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #26967
    dclardy
    Member

    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
    https://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!

    #76182
    cybershot
    Participant

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

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