Jump to content
cheires

highlight de menu

Recommended Posts

cheires

Olá a todos,

Tenho um menu simples, só mesmo texto (nada de imagens nem nada disso) que pretendo que fique com cor diferente quando seleccionado.

Tipo, se entro na página notícias do menu, queria que a palavra notícias no menu ficasse com cor diferente, para o utilizador se poder situar dentro do site.

A pergunta é, como posso coneguir isso?

O hover funciona bem, o active funciona apenas quando se dá o click do rato.

Alguém me pode dar umas dicas sobre a forma de conseguir isto?

Abraço a todos

Share this post


Link to post
Share on other sites
fil79

Podes criar uma classe e aplicá-la ao texto/link quando estiver na página correspondente:

/*CSS*/
.destaque{
color:#ffffff;
}
<!-- HTML -->
<a href="" class="destaque">


MCITP-MCTS-MCP

Share this post


Link to post
Share on other sites
cheires

Obrigado pela tua sugestão, mas essa forma não é a mais correcta, principalmente da forma como tenho estruturada a minha pagina web.

Cada pedaço está dentro de um DIV e assim teria que criar sempre uma página nova para cada item do menu.

O que eu uso é, um DIV para o menu, cabecalho, rodapé, etc, e só muda a parte do coneteúdo.

Share this post


Link to post
Share on other sites
fil79

E vai ao servidor para alterar o conteúdo? OU o mesmo é carregado todo de uma vez ficando uma parte invisivel?


MCITP-MCTS-MCP

Share this post


Link to post
Share on other sites
cheires

Vai ao servidor para alterar o conteúdo. Só carrega o necessário.

Exemplo, se um menu qualquer admite um sub-menu, esse sub-menu só é carregado quando for seleccionado o menu correspondente.

O mesmo para o restante conteúdo.

Mas o Menu é sempre o mesmo, o cabeçalho e o rodapé também.

Share this post


Link to post
Share on other sites
pmg

Acho que o que queres fazer não é possível sem recurso a uma linguagem de programação a sério (HTML e CSS não são linguages de programação a sério).

Ou usas JavaScript (ou outra linguagem local) se não precisas/queres aceder ao servidor,

ou usas PHP, Ruby, Python, C, (ou outra linguagem no servidor).

Escrevi um exemplo com JavaScript, mas não sei JavaScript :-)

Este programeta faz (mais ou menos) o que queres.

Vê lá se o consegues adaptar às tuas necessidades ...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><title>tm</title><script type="text/javascript">
function menumark() {
  document.getElementById('ma').style.color = 'blue';
  document.getElementById('mb').style.color = 'blue';
  document.getElementById('mc').style.color = 'blue';
  this.style.color = 'red';
}
function initmenu() {
  document.getElementById('ma').onclick = menumark;
  document.getElementById('mb').onclick = menumark;
  document.getElementById('mc').onclick = menumark;
}
</script></head><body onload="initmenu()">
Menu<br>
<a id="ma" href="#">menua</a><br>
<a id="mb" href="#">menub</a><br>
<a id="mc" href="#">menuc</a><br>
</body></html>


What have you tried?

Não respondo a dúvidas por PM

A minha bola de cristal está para compor; deve ficar pronta para a semana.

Torna os teus tópicos mais atractivos e legíveis usando a tag CODE para colorir o código!

Share this post


Link to post
Share on other sites
fil79

Conforme a tua estrutura (que desconheço), até pode ser utilizada uma linguagem server side.

Recorrendo ao GET, podes fazer um ciclo que defina a classe a ser aplicada a cada menu:

por exemplo


$classe="semDestaque";
switch ($_GET['cor']){
  case 1:
     $classe="destaque";
  break;
  case 2:
     $classe="destaque";
  break;
}

e no HTML:

<a href="xpto?cor=1" class="<?=$classe?>">


MCITP-MCTS-MCP

Share this post


Link to post
Share on other sites
cheires

Acho que o que queres fazer não é possível sem recurso a uma linguagem de programação a sério (HTML e CSS não são linguages de programação a sério).

Ou usas JavaScript (ou outra linguagem local) se não precisas/queres aceder ao servidor,

ou usas PHP, Ruby, Python, C, (ou outra linguagem no servidor).

Escrevi um exemplo com JavaScript, mas não sei JavaScript :-)

Este programeta faz (mais ou menos) o que queres.

Vê lá se o consegues adaptar às tuas necessidades ...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><title>tm</title><script type="text/javascript">
function menumark() {
  document.getElementById('ma').style.color = 'blue';
  document.getElementById('mb').style.color = 'blue';
  document.getElementById('mc').style.color = 'blue';
  this.style.color = 'red';
}
function initmenu() {
  document.getElementById('ma').onclick = menumark;
  document.getElementById('mb').onclick = menumark;
  document.getElementById('mc').onclick = menumark;
}
</script></head><body onload="initmenu()">
Menu<br>
<a id="ma" href="#">menua</a><br>
<a id="mb" href="#">menub</a><br>
<a id="mc" href="#">menuc</a><br>
</body></html>

É isso mesmo. Obrigado amigo.

Já testei e funciona.

Pensei que daria para fazer a mesma coisa usando apenas CSS, sem usar a táctica das 3 imagens, como é apenas texto.

Mas com o teu código funciona perfeitamente.

Mais uma vez, obrigado pela ajuda.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.