1

Criei um menu lateral usando widget de texto no wordpress

<ul style="list-style:none">
<li style="margin-bottom: -15px !important;"><a href="http://www.nespi.com.br/pesquisadores/andre-gambier-campos/">André Gambier Campos</li></a>
<li style="margin-bottom: -15px !important;"><a href="http://www.nespi.com.br/pesquisadores/eduardo-luiz-cury/">Eduardo Luiz Cury</li>   </a>
<li style="margin-bottom: -15px !important;"><a href="http://www.nespi.com.br/pesquisadores/fabio-tatei/">Fábio Tatei</li></a>
<li style="margin-bottom: -15px !important;"><a href="http://www.nespi.com.br/pesquisadores/franco-de-matos/">Franco de Matos</li></a>
<li style="margin-bottom: -15px !important;"><a href="http://www.nespi.com.br/pesquisadores/genaro-aguilar-gutierrez/">Genaro Aguilar Gutierrez</li></a>
<li style="margin-bottom: -15px !important;"><a href="http://www.nespi.com.br/pesquisadores/marcos-antonio-favaro-martins/">Marcos Antônio Fávaro Martins</li></a>
<li style="margin-bottom: -15px !important;"><a href="http://www.nespi.com.br/pesquisadores/maria-cristina-cacciamali/">Maria Cristina Cacciamali</li></a>
<li style="margin-bottom: -15px !important;"><a href="http://www.nespi.com.br/pesquisadores/maria-de-fatima-jose-silva/">Maria de Fátima José-Silva</li></a>
<li style="margin-bottom: -15px !important;"><a href="http://www.nespi.com.br/pesquisadores/natalia-nunes-ferreira-batista/">Natalia Nunes Ferreira Batista</li></a>
<li style="margin-bottom: -15px !important;"><a href="http://www.nespi.com.br/pesquisadores/rosana-aparecida-ribeiro/">Rosana Aparecida Ribeiro</li></a>
<li style="margin-bottom: -15px !important;"><a href="http://www.nespi.com.br/pesquisadores/tania-de-toledo-lima/">Tânia de Toledo Lima</li></a>
<li style="margin-bottom: -15px !important;"><a href="http://www.nespi.com.br/pesquisadores/thais-virga-passos/">Thaís Virga Passos</li></a>
<li style="margin-bottom: -15px !important;"><a href="http://www.nespi.com.br/pesquisadores/umberto-celli-junior/">Umberto Celli Junior</li></a>

inserir a descrição da imagem aqui

O que eu queria é que ao clicar no nome fosse adicionada uma classe "active" no link, para mostrar para o usuário onde ele está, do mesmo jeito que funciona no menu horizontal:

inserir a descrição da imagem aqui

Tentei fazer assim

<li <?php if($verifica['André Gambier Campos']==true) echo "class='active'" ?> 
<a href="http://www.nespi.com.br/pesquisadores/andre-gambier-campos/">Início</a>
 </li>

Porém não dá certo.

3

1 Resposta 1

2

O meu exemplo, FUNCIONA, faz um item de menu ativo com base na URL atual com jQuery:

Jquery:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script type="text/javascript">
    jQuery(document).ready(function($){
        // Get current url
        // Select an a element that has the matching href and apply a class of 'active'. Also prepend a - to the content of the link
        var url = window.location.href;
        $('.menu a[href="'+url+'"]').addClass('current_page_item');
    });
</script>

Style:

<style type="text/css">
a {
    color:#000;
    text-decoration:none;
}
a:hover {
    text-decoration:underline;
}
a:visited {
    color:#000;
}
.nav {
    padding:10px;
    border:solid 1px #c0c0c0;
    border-radius:5px;
    float:left;
}
.nav li {
    list-style-type:none;
    float:left;
    margin:0 10px;
}
.nav li a {
    text-align:center;
    width:AUTO;
    float:left;
}


</style>

HTML

<header>
<div class="menu">
    <ul class="nav">
        <li><a href="#">INÍCIO</a>
        </li>
        <li>|</li>
        <li><a href="#">MISSÃO</a>
        </li>
        <li>|</li>
        <li><a href="#">QUEM SOMOS</a>
        </li>
        <li>|</li>
        <li><a href="#">PESQUISADORES</a>
        </li>
    </ul>
</div>    
</header>

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 .