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
  • #26967


    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:


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

  • ");

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

    .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();

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

    Here is the styling of the menu:

    CSS-Tricks Example
    by Chris Coyier

    #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!


    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.