-1

Magic Line é um plugin jQuery que tem a função de acrescentar uma linha em baixo da li do menu de navegação para representar qual página o usuário se encontra. Se a URL coincidir com um elemento do menu, uma classe .active será adicionada a li, e a linha ficará abaixo dela. O diferencial desse plugin, é que ao dar :hover em outro elemento do menu, a linha vai de maneira animada até o elemento do :hover, voltando assim que se tira o cursor de cima.

Esse plugin funciona bem em sites de várias páginas, onde cada página tem URL única, porém sites de página única, são divididos em várias seções. Cada uma dessas seções altera está ligada ao menu, para poder fazer a rolagem automática. Eu preciso implementar um esquema parecido com o da MagicLine em uma página única, onde conforme a rolagem, a #url é alterada e a posição da linha sob o menu também.

Código final:

HTML

<div id="page">
    <div class="nav-wrap">
        <ul class="group" id="example-one">
            <li class="current_page_item"><a href="#box1">Box1</a>
            </li>
            <li><a href="#box2">Box2</a>
            </li>
            <li><a href="#box3">Box3</a>
            </li>
            <li><a href="#box4">Box4</a>
            </li>
        </ul>
    </div>
    <div class="boxes" id="box1">
        <a>Box1</a> 
    </div>
    <div class="boxes" id="box2">
        <a>Box2</a> 
    </div>
    <div class="boxes" id="box3">
        <a>Box3</a> 
    </div>
    <div class="boxes" id="box4">
        <a>Box4</a> 
   </div>
</div>

CSS

#page {
    width:960px;
    height:3000px;
}
.nav-wrap {
    margin: 5px auto;
    background-color:black;
    border-top: 2px solid white;
    border-bottom: 2px solid white;
}
#example-one {
    margin: 0 auto;
    list-style: none;
    position:fixed;
    width: 960px;
    z-index:1;
}
#example-one li {
    display: inline;
    float: left;
}
#example-one li a {
    color: #bbb;
    font-size: 14px;
    display: block;
    padding: 6px 10px 4px 10px;
    text-decoration: none;
}
#example-one li a:hover {
    color: white;
}
#magic-line {
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100px;
    height: 2px;
    background: #fe4902;
}
.boxes {
    height:300;
    padding-bottom:500px;
    width:100%;
    position:relative;
    float:left;
    z-index:0;
}

jQuery

$(document).ready(function () {
    magicline();
});

function magicline() {
    var $el, leftPos, newWidth,
    $mainNav = $("#example-one");
    $("#magic-line").remove();
    $mainNav.append("<li id='magic-line'></li>");
    var $magicLine = $("#magic-line");

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

    $("#example-one li 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")
        });
    });
}

$('li a').on('click', function () {
    $('li').each(function () {
        $(this).removeClass('current_page_item');

    });
    $(this).parent().addClass('current_page_item');
    magicline();
});

var loc = window.location.pathname.split('/')[1];
$('.group a[href='+ loc +']').parent().addClass('current_page_item')

JSFiddle

4
  • 2
    E qual problema está ocorrendo?
    – Caputo
    15/09/2014 às 16:48
  • 1
    Com base nesse link, ao dar o hover sobre os elementos do menu, a linha que está sob o primeiro elemento, vai até o elemento que o cursor está. Funciona para sites de várias páginas, ele pega a URL da página, e compara com o menu. O elemento do menu que coincide com a URL, estará com a linha embaixo ao carregar a página. Em site de página única é diferente, pois ao invés de cada elemento do menu coincidir com a página, coincide com uma seção dela, trocando conforme o scroll. Preciso fazer com que a linha troque conforme a página é rolada. 15/09/2014 às 17:09
  • 1
    Não consigo dar uma resposta completa, mas veja este componente JavaScript do Bootstrap (se bootstrap for uma opção)
    – Caputo
    15/09/2014 às 17:12
  • 1
    Obrigado Caputo, mas infelizmente não funciona para o que estou precisando. Mas agradeço por ter respondido. 15/09/2014 às 18:26

1 Resposta 1

1

Tem que calcular se o scroll está passando por um dos <div class="boxes" id="ID">, pegar essa ID e acionar o estado de mouseover do <a href="#ID"> correspondente.

O plugin Waypoints ajuda a detectar que o scroll está passando por certos elementos. E só com este código resolve:

$('.boxes').waypoint(function(direction) {
    $id = '#' + $(this).attr('id');
    $('a[href="'+$id+'"]').trigger('mouseover');
});

JSFiddle.

2
  • Obrigado pela resposta, brasofilo. Deu certo. Era exatamente a funcionalidade que eu precisava. Muito obrigado. 15/09/2014 às 21:22
  • @Mauro, tudo de bom o Waypoints esse. Procurei por "jquery detect anchors on scroll" e pimba. Gostei do exercício, valeu!
    – brasofilo
    15/09/2014 às 21:39

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .