[Resolvido] Link ativo em outra cor.

mhqmelo · Março 11, 2011

Boa noite a todos!

Alguem sabe como eu faco pra quando eu estiver na "Home" o link mudasse de cor, depois quando eu estivesse em "contact" ele tambem mudasse de cor para indicar em qual pagina a pessoa esta??

Ja agradeco a ajuda!! Obrigado.

Lucas Peperaio · Março 11, 2011

Basicamente pode ser feito de duas formas:

1 - Você cria uma classe em CSS com a cor diferente, e aplica no link correspondente em cada página. (Esse é o modo mais simples)

2 - Você descobre qual página o usuário está com javascript ou php, e atribui a classe CSS ao link correspondente (Este requer programação)

Eu até faria pra você o script da 2ª opção, mas estou com muuuuuuito sono, olha a hora que eu estou postando isto? talvez amanha, alias, hoje eu crie algo e poste. (Isso se ninguém vier aqui primeiro e postar)

;)

Guilherme Müller · Março 11, 2011

Uma maneira interessante de fazer isso é colocar uma id no <body>, exemplo:

<body id="bd-home">

E por exemplo na página de contato você colocaria "bd-contato" como id e etc. Desde que você consiga identificar cada item do menu por id ou classe também, você pode fazer o seguinte no CSS:

#bd-home a.bt-home {
 /* regras para o visual do botão ativo */
}

Se você trabalhar com um site de poucas páginas, esta técnica funciona. Você também pode apenas colocar uma classe "ativo" no botão que estiver ativo em cada página, como o Lucas disse.

mhqmelo · Março 11, 2011

Obrigado pelas respostas,

Eu consegui fazer assim:

html:

<body id="home-active">
    <div id="nav">
       	<ul>
           	<li><a href="#" class="active">Home</a></li>
           	<li><a href="#">What we do</a></li>
           	<li><a href="#">View Gallery</a></li>
           	<li><a href="#">Contact</a></li>
           </ul>

e no CSS

#home-active a.active{
color:#900;
}

So que neste exemplo eu perco a chance de usar as paginas como modelo (pelo dreamweaver). Tem algum jeito de fazer isso mais que aproveitam as paginas de modelo, pq senao quando eu for mudar por exemplo a cor de um link eu tenho que fazer isso em 4-5 paginas diferentes (ate ae tudo bem pq eh um site pequeno) mais e quando eu tiver q mudar 20 paginas. Eu vi uma outra forma como o Lucas disse, mais nao funcionou.

Guilherme Müller · Março 11, 2011

Para um site de mais páginas, eu já recomendaria utilizar uma linguagem como PHP ou Javascript. Faz tempo que não uso templates do Dreamweaver (não sei se você está usando isso ou algo semelhante), nesse caso teria que ver.

Nos meus sites utilizo PHP para fazer isso.

Lucas Peperaio · Março 12, 2011

Está ai amigo, conforme prometi, um script que automaticamente muda a cor dos link ativo na página (detalhe, com 1 linha de código):

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("li a[href='"+location.href.substring(location.href.lastIndexOf("/")+1,255)+"']").addClass("diferente");
});
</script>

E aqui vem o CSS:

.diferente{
color:#F00;
}

Ou seja, quando entrar em qualque página, automaticamente o meu código vai reconhecer qual é a página, e vai atribuir a classe "diferente" ao link. Claro, isso só vai funcionar se o seu menu foi feito a partir de Listas Não Ordenadas, ou seja, UL e LI. Ah, e funciona com templates do dreamweaver!

Espero que seja util

mhqmelo · Março 12, 2011

Para um site de mais páginas, eu já recomendaria utilizar uma linguagem como PHP ou Javascript. Faz tempo que não uso templates do Dreamweaver (não sei se você está usando isso ou algo semelhante), nesse caso teria que ver.

Nos meus sites utilizo PHP para fazer isso.

você esta falando de fazer isso atraves de "include", o header e footer.. e editar somente o conteudo ?

Está ai amigo, conforme prometi, um script que automaticamente muda a cor dos link ativo na página (detalhe, com 1 linha de código):
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("li a[href='"+location.href.substring(location.href.lastIndexOf("/")+1,255)+"']").addClass("diferente");
});
</script>
E aqui vem o CSS:
.diferente{
color:#F00;
}
Ou seja, quando entrar em qualque página, automaticamente o meu código vai reconhecer qual é a página, e vai atribuir a classe "diferente" ao link. Claro, isso só vai funcionar se o seu menu foi feito a partir de Listas Não Ordenadas, ou seja, UL e LI. Ah, e funciona com templates do dreamweaver!

Espero que seja util

Obrigado,

Mais não funcionou! Eu copiei e colei exatamente como você fez. Eu tenho que mudar alguma coisa no html e css?

Lucas Peperaio · Março 12, 2011

Obrigado,

Mais não funcionou! Eu copiei e colei exatamente como você fez. Eu tenho que mudar alguma coisa no html e css?

Verifique se o "script" está dentro da tag head, o CSS num arquivo CSS ou na propria página. Como está trabalhando com templates, você colocou o código no template? Além disso, os links "<a>" dentro dos li precisa estar com links, senão não irá funcionar

Ex:

      <div id="nav">
               <ul>
                   <li><a href="home.html">Home</a></li>
                   <li><a href="what.html">What we do</a></li>
                   <li><a href="gallery.html">View Gallery</a></li>
                   <li><a href="contact.html">Contact</a></li>
           </ul>

mhqmelo · Março 12, 2011

HTML:

<link href="css/main.css" rel="stylesheet" type="text/css">
<script src="scripts/DD_belatedPNG_0.0.7a.js" type="text/javascript"></script> 
<!--[if lte IE 6]>
<script type="text/javascript">
 DD_belatedPNG.fix('img, #wrap-header, #quick-contact, #right, ul');
</script>
<![endif]-->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
       $("li a[href='"+location.href.substring(location.href.lastIndexOf("/")+1,255)+"']").addClass("diferente");
});
</script>
</head>

<div id="nav">
       	<ul>
           	<li><a href="index.html" class="diferente">Home</a></li>
           	<li><a href="#">What we do</a></li>
           	<li><a href="#">View Gallery</a></li>
           	<li><a href="#">Contact</a></li>
           </ul>

CSS:

.diferente{
       color:#FFF;
}

Ate agora nao consegui fazer funcionar..

Lucas Peperaio · Março 12, 2011

Eu testei aqui amigo o meu script, está funcionando.

Veja um exemplo online:

http://teste.lucaspe...r/Link%20ativo/

perceba que todas as páginas do menu existem, por isso deu certo

Só um detalhe, você não precisa atribuir a classe "diferente" a nenhum link, o meu script faz isso automaticamente

mhqmelo · Março 12, 2011

Eu testei o seu exemplo aqui e tambem funcionou. Sera que é alguma coisa com o meu CSS:

#nav ul{
position:absolute;
width:349px;
left:23px;
top:149px;
background:url(../images/nav.png);
background-repeat:no-repeat;
list-style:none;
padding-left:15px;
}
#nav li{
display:inline;
}
#nav li a{
font-family:Verdana, Geneva, sans-serif;
font-size:10px;
text-transform:uppercase;
color:#333;
text-decoration:none;
padding-right:20px;
font-weight:bold;
}
#nav li a:hover{
color: #FFF;
}
.diferente{
color:#F00;
text-decoration:none;
font-weight:bold;
font-variant:small-caps;
}

PS: Consegui fazer funcionar! Mais eu tive que tirar o "color:#333;" de dentro do "nav li a{color:#333;}"

agora como eu coloco cor nos links, ja tentei dentro de tudo(#nav li, #nav ul) e nada funciona..

Lucas Peperaio · Março 12, 2011

Faz o seguinte, coloque todas as chamadas para os seus arquivos CSS acima do script que eu te passei. Então, você formata a vontade o seu link lá no "diferente".

mhqmelo · Março 12, 2011

<link href="css/main.css" rel="stylesheet" type="text/css">
<script src="scripts/DD_belatedPNG_0.0.7a.js" type="text/javascript"></script> 
<!--[if lte IE 6]>
<script type="text/javascript">
 DD_belatedPNG.fix('img, #wrap-header, #quick-contact, #right, ul');
</script>
<![endif]-->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){
$("li a[href='"+location.href.substring(location.href.lastIndexOf("/")+1,255)+"']").addClass("active");
});
</script> 
</head>

você esta falando

<link href="css/main.css" rel="stylesheet" type="text/css">

Ja esta acima dos scripts.

olha como fica:

Lembrando que a cor do link "inativo" é grafite, e do link "ativo" é branco.

O ideal:

OBS: Obrigado pelas repostas, especialmente hj por ser sabado a noite..

Lucas Peperaio · Março 12, 2011

Falha minha, usa este script

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("li a[href='"+location.href.substring(location.href.lastIndexOf("/")+1,255)+"']").css("color","#FFF");
});
</script>

Ele vai automaticamente colocar uma cor branca no link atual.

mhqmelo · Março 13, 2011

Exatamente! Muito Obrigado!! Funcionou exatamente como eu queria.

Lucas Peperaio · Março 17, 2011

Só para atualizar o código, caso o usuário esteje na home page, sem o "index.php", por exemplo, use este código:

	pagina = location.href.substring(location.href.lastIndexOf("/")+1,255);

$("#menu ul li a[href='"+pagina+"']").attr("id","selected");
if(pagina.lastIndexOf("/")+1 == ""){
	$("#menu ul li a[href='/']").attr("id","selected");
}

Neste caso, eu estou inserindo uma ID no link ativo, no caso ali, a ID "selected".

mhqmelo · Março 22, 2011

Eu iria redirecionar o endereco do site para www.site.com/index.html

O que "pagina" faz? Posso substituir por qualquer nome?

Obrigado!

Lucas Peperaio · Março 23, 2011

pagina é o nome de uma variavel que eu criei, deixe-a como está mesmo...para que funcione isto que eu fiz, você irá precisar criar uma ID no css com o nome selected, ou seja:

#selected{
  //aqui você coloca a formatacao do link ativo
}

mhqmelo · Março 23, 2011

Exato! Obrigado Novamente.

mhqmelo · Março 28, 2011

Lucas, desculpe eu não havia testado antes. Não consegui fazer ele funcionar do novo jeito.

<script type="text/javascript">
pagina = location.href.substring(location.href.lastIndexOf("/")+1,255);

$("#nav ul li a[href='"+pagina+"']").attr("id","selected");
if(pagina.lastIndexOf("/")+1 == ""){
$("#nav ul li a[href='/']").attr("id","selected");
}
</script>

Eu só mudei o #menu para #nav e coloquei no CSS o #selected..

Outra coisa, eu coloquei o script antes da </head>

Eu tenho que colocar no caso o CSS dentro do arquivo html?

Obrigado!!!

Arquivado

[Resolvido] Link ativo em outra cor.

Recommended Posts

mhqmelo 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Lucas Peperaio 20

Compartilhar este post

Link para o post

Compartilhar em outros sites

Guilherme Müller 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

mhqmelo 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Guilherme Müller 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Lucas Peperaio 20

Compartilhar este post

Link para o post

Compartilhar em outros sites

mhqmelo 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Lucas Peperaio 20

Compartilhar este post

Link para o post

Compartilhar em outros sites

mhqmelo 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Lucas Peperaio 20

Compartilhar este post

Link para o post

Compartilhar em outros sites

mhqmelo 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Lucas Peperaio 20

Compartilhar este post

Link para o post

Compartilhar em outros sites

mhqmelo 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Lucas Peperaio 20

Compartilhar este post

Link para o post

Compartilhar em outros sites

mhqmelo 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Lucas Peperaio 20

Compartilhar este post

Link para o post

Compartilhar em outros sites

mhqmelo 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Lucas Peperaio 20

Compartilhar este post

Link para o post

Compartilhar em outros sites

mhqmelo 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

mhqmelo 0