Menu

[pe.leal]

Pessoal,

Como faço para mudar a cor de um menu quando clicar em um item do menu ?

Exemplo:

Tenho o menu:

Cidade Bairro CEP

Quero que quando clicar em Cidade o TD de cidade mude de cor, ai quando clicar em CEP, Cidade volta para a cor original e o TD do CEP fica de outra cor.

alguém pode me ajudar ?

Tks

[PERNAMBUCO_FJV]

se o menu for link normal

<a href...

<style type="text/css">

  a:link { text-decoration: none; color: #ffffff }
  a:visited { text-decoration: none; color: #ffffff }
  a:active { text-decoration: none; color: #ffffff }
  a:hover { color: #0000ff; text-decoration:underline }

</style>

[pe.leal]

Pernambuco,

Não é um link esta dessa forma:

<td valign='middle' align='center' width='152' onClick="menucid(this)" style="cursor: hand; background-color:3399ff; font-family:verdana; font-size:10pt; font-weight:bold"><input type="hidden" name="cid" value='1'><font color='white'><b>Cidade</b></font></td>

<td valign='middle' align='center' width='152' onClick="menucid(this)" style="cursor: hand; background-color:3399ff; font-family:verdana; font-size:10pt; font-weight:bold"><input type="hidden" name="bair" value='2'><font color='white'><b>Bairro</b></font></td>

E assim para todos os outros itens do menu

valeu

[PERNAMBUCO_FJV]

esta tudo em branco aqui

[pe.leal]

É que a fonte do meu menu é branca, mas pode mudar para qualquer coisa ai.

Tks

[Guest - Daniel -]

esta tudo em branco aqui

Copia o código fonte de alguém que tenha isso seu paraguay

[PERNAMBUCO_FJV]

não entendi seu cod!!

aparece apenas o nome

quando aperta,faz nada,enm é link isso

o que você quer realmente??

[pe.leal]

Estou enviando o codigo, so que sem o ASP, lógico:

Agora é so copiar e salvar como HTML

Espero que dessa vez de certo.

Nesse codigo estou usando o OnBlur, mas não quero usa-lo

valeu

<script language="JavaScript">

<!--

var cid1 = document.frmMain.cid.value;

var ba1 = document.frmMain.ba.value;

var ce1 = document.frmMain.ce.value;

var en1 = document.frmMain.en.value;

var co1 = document.frmMain.co.value;

function menucid(what)

{

what.style.background='silver';

if (cid1 != "") {

layer1.style.visibility='visible'; layer1a.style.visibility='visible'; layer1b.style.visibility='visible'; layer2.style.visibility='hidden'; layer2a.style.visibility='hidden'; layer2b.style.visibility='hidden'; layer2c.style.visibility='hidden'; layer3.style.visibility='hidden'; layer3a.style.visibility='hidden'; layer4.style.visibility='hidden'; layer4a.style.visibility='hidden'; layer4b.style.visibility='hidden'; layer4c.style.visibility='hidden'; layer5.style.visibility='hidden'; layer5a.style.visibility='hidden'; layer6.style.visibility='hidden';

}

}

function menuba(what)

{

what.style.background='silver';

if (ba1 != "") {

layer2.style.visibility='visible'; layer2a.style.visibility='visible'; layer2b.style.visibility='visible'; layer2c.style.visibility='visible'; layer1.style.visibility='hidden'; layer1a.style.visibility='hidden'; layer1b.style.visibility='hidden'; layer3.style.visibility='hidden'; layer3a.style.visibility='hidden'; layer4.style.visibility='hidden'; layer4a.style.visibility='hidden'; layer4b.style.visibility='hidden'; layer4c.style.visibility='hidden'; layer5.style.visibility='hidden'; layer5a.style.visibility='hidden'; layer6.style.visibility='hidden';

}

}

function menuce(what)

{

what.style.background='silver';

if (ce1 != "") {

layer3.style.visibility='visible'; layer3a.style.visibility='visible'; layer1.style.visibility='hidden'; layer1a.style.visibility='hidden'; layer1b.style.visibility='hidden'; layer2.style.visibility='hidden'; layer2a.style.visibility='hidden'; layer2b.style.visibility='hidden'; layer2c.style.visibility='hidden'; layer4.style.visibility='hidden'; layer4a.style.visibility='hidden'; layer4b.style.visibility='hidden'; layer4c.style.visibility='hidden'; layer5.style.visibility='hidden'; layer5a.style.visibility='hidden'; layer6.style.visibility='hidden';

}

}

function menuen(what)

{

what.style.background='silver';

if (en1 != "") {

layer4.style.visibility='visible'; layer4a.style.visibility='visible'; layer4b.style.visibility='visible'; layer4c.style.visibility='visible'; layer1.style.visibility='hidden'; layer1a.style.visibility='hidden'; layer1b.style.visibility='hidden'; layer2.style.visibility='hidden'; layer2a.style.visibility='hidden'; layer2b.style.visibility='hidden'; layer2c.style.visibility='hidden'; layer3.style.visibility='hidden'; layer3a.style.visibility='hidden'; layer5.style.visibility='hidden'; layer5a.style.visibility='hidden'; layer6.style.visibility='hidden';

}

}

function menuco(what)

{

what.style.background='silver';

if (co1 != "") {

layer5.style.visibility='visible'; layer5a.style.visibility='visible'; layer1.style.visibility='hidden'; layer1a.style.visibility='hidden'; layer1b.style.visibility='hidden'; layer2.style.visibility='hidden'; layer2a.style.visibility='hidden'; layer2b.style.visibility='hidden'; layer2c.style.visibility='hidden'; layer3.style.visibility='hidden'; layer3a.style.visibility='hidden'; layer4.style.visibility='hidden'; layer4a.style.visibility='hidden'; layer4b.style.visibility='hidden'; layer4c.style.visibility='hidden'; layer6.style.visibility='hidden';

}

}

function menuescolher()

{

var esco = document.frmMain.escolher.value;

var es = document.frmMain.estado.value;

var es2 = document.frmMain.estado2.value;

var ci3 = document.frmMain.cidade3.value;

var bar = document.frmMain.bairro.value;

var ce2 = document.frmMain.cep.value;

var es3 = document.frmMain.estado3.value;

var ci4 = document.frmMain.cidade4.value;

var en2 = document.frmMain.endereco.value;

var co2 = document.frmMain.cod.value;

if (esco != ""){

layer6.style.visibility='visible';

}

if (es != "todos")

{

layer1.style.visibility='visible'; layer1a.style.visibility='visible'; layer1b.style.visibility='visible'; layer2.style.visibility='hidden'; layer2a.style.visibility='hidden'; layer2b.style.visibility='hidden'; layer2c.style.visibility='hidden'; layer3.style.visibility='hidden'; layer3a.style.visibility='hidden'; layer4.style.visibility='hidden'; layer4a.style.visibility='hidden'; layer4b.style.visibility='hidden'; layer4c.style.visibility='hidden'; layer5.style.visibility='hidden'; layer5a.style.visibility='hidden'; layer6.style.visibility='hidden';

}

if (es2 != "todos") //|| (ci3 != "todas"))|| (bar != "todos"))

{

layer2.style.visibility='visible'; layer2a.style.visibility='visible'; layer2b.style.visibility='visible'; layer2c.style.visibility='visible'; layer1.style.visibility='hidden'; layer1a.style.visibility='hidden'; layer1b.style.visibility='hidden'; layer3.style.visibility='hidden'; layer3a.style.visibility='hidden'; layer4.style.visibility='hidden'; layer4a.style.visibility='hidden'; layer4b.style.visibility='hidden'; layer4c.style.visibility='hidden'; layer5.style.visibility='hidden'; layer5a.style.visibility='hidden'; layer6.style.visibility='hidden';

}

if ((ci3 != "todas") && (ci3 != "todas"))

{

layer2.style.visibility='visible'; layer2a.style.visibility='visible'; layer2b.style.visibility='visible'; layer2c.style.visibility='visible'; layer1.style.visibility='hidden'; layer1a.style.visibility='hidden'; layer1b.style.visibility='hidden'; layer3.style.visibility='hidden'; layer3a.style.visibility='hidden'; layer4.style.visibility='hidden'; layer4a.style.visibility='hidden'; layer4b.style.visibility='hidden'; layer4c.style.visibility='hidden'; layer5.style.visibility='hidden'; layer5a.style.visibility='hidden'; layer6.style.visibility='hidden';

}

if (ce2 != "")

{

layer3.style.visibility='visible'; layer3a.style.visibility='visible'; layer1.style.visibility='hidden'; layer1a.style.visibility='hidden'; layer1b.style.visibility='hidden'; layer2.style.visibility='hidden'; layer2a.style.visibility='hidden'; layer2b.style.visibility='hidden'; layer2c.style.visibility='hidden'; layer4.style.visibility='hidden'; layer4a.style.visibility='hidden'; layer4b.style.visibility='hidden'; layer4c.style.visibility='hidden'; layer5.style.visibility='hidden'; layer5a.style.visibility='hidden'; layer6.style.visibility='hidden';

}

if ((es3 != "todos") || (ci4 != "todas") || (en2 != ""))

{

layer4.style.visibility='visible'; layer4a.style.visibility='visible'; layer4b.style.visibility='visible'; layer4c.style.visibility='visible'; layer1.style.visibility='hidden'; layer1a.style.visibility='hidden'; layer1b.style.visibility='hidden'; layer2.style.visibility='hidden'; layer2a.style.visibility='hidden'; layer2b.style.visibility='hidden'; layer2c.style.visibility='hidden'; layer3.style.visibility='hidden'; layer3a.style.visibility='hidden'; layer5.style.visibility='hidden'; layer5a.style.visibility='hidden'; layer6.style.visibility='hidden';

}

if (co2 != "")

{

layer5.style.visibility='visible'; layer5a.style.visibility='visible'; layer1.style.visibility='hidden'; layer1a.style.visibility='hidden'; layer1b.style.visibility='hidden'; layer2.style.visibility='hidden'; layer2a.style.visibility='hidden'; layer2b.style.visibility='hidden'; layer2c.style.visibility='hidden'; layer3.style.visibility='hidden'; layer3a.style.visibility='hidden'; layer4.style.visibility='hidden'; layer4a.style.visibility='hidden'; layer4b.style.visibility='hidden'; layer4c.style.visibility='hidden'; layer6.style.visibility='hidden';

}

}

function volta(what)

{

what.style.background='99ccff';

}

//-->

</script>

<body onLoad="menuescolher()">

<STYLE type=text/css>

.menu {background-color:99ccff; cursor:hand; font-family:Verdana; font-size:10pt; font-weight:bold}

</STYLE>

<TABLE border="0" colspan='5' frameborder="0" cellpadding="0" cellspacing="0" width='760'>

<tr bgcolor='99ccff'>

<td align='center' width='152' onBlur="volta(this)" onClick="menucid(this)" style="cursor: hand; background-color:99ccff; font-family:Verdana; font-size:10pt; font-weight:bold"><input type="hidden" name="cid" value='1'><font color='0000dd'><b><u>Cidade</u></b></font></a></td></p>

<td align='center' width='152' onBlur="volta(this)" onclick="menuba(this)" style="cursor: hand; background-color:99ccff; font-family:Verdana; font-size:10pt; font-weight:bold"><input type="hidden" name="ba" value='2'><font color='0000dd'><b><u>Bairro</u></b></font></a></td></p>

<td align='center' width='152' onBlur="volta(this)" onClick="menuce(this)" style="cursor: hand; background-color:99ccff; font-family:Verdana; font-size:10pt; font-weight:bold"><input type="hidden" name="ce" value='3'><font color='0000dd'><b><u>CEP</u></b></font></a></td>

<td align='center' width='152' onBlur="volta(this)" onClick="menuen(this)" style="cursor: hand; background-color:99ccff; font-family:Verdana; font-size:10pt; font-weight:bold"><input type="hidden" name="en" value='4'><font color='0000dd'><b><u>Endereço</u></b></font></a></td>

<td align='center' width='152' onBlur="volta(this)" onClick="menuco(this)" style="cursor: hand; background-color:99ccff; font-family:Verdana; font-size:10pt; font-weight:bold"><input type="hidden" name="co" value='5'><font color='0000dd'><b><u>Código da loja</u></b></font></a></td>

</tr></table>

<table border='0' colspan='5'>

<tr><td colspan='5'><div id="layer6" STYLE="visibility: visible">

<input type="hidden" name="escolher">Escolha o tipo de pesquisa e entre com as informações solicitadas </div></td></tr>

<!-- ****************************** CIDADE ***************** -->

<tr><td width='250'><div id="layer1" STYLE="position:absolute; top:90; left:10; visibility: hidden">Localize lojas em uma cidade: <br>

<select name='estado' value='' style='WIDTH: 170' onChange='atualiza(this.value)'>

<option value='todos'>Selecione o Estado</option></div>

</select></td>

<td><div id='layer1a' STYLE='position:absolute; top:90; left:230; visibility: hidden'><br>

<select name='cidade2' value='' style='WIDTH: 210'>

<option value='todas'>Selecione a cidade</option></div>

</select></td>

<td><div id="layer1b" STYLE="position:absolute; top:105; left:450; visibility: hidden">

<input type='submit' value='Localizar' name='ok'></div></td></tr>

<!-- ****************************** BAIRRO *************** -->

<tr><td><div id='layer2' STYLE='position:absolute; top:90; left:10; visibility: hidden'>

Localize lojas em um bairro: <br>

<select name='estado2' value='' style='WIDTH: 170' onChange='atualiza2(this.value)'>

<option value='todos'>Selecione o Estado</option></div>

</select></td>

<td><div id='layer2a' STYLE='position:absolute; top:90; left:230; visibility: hidden'><br>

<select name='cidade3' value='' style='WIDTH: 210' onChange='atualiza3(this.value)'>

<option value='todas'>Selecione a cidade</option></div>

</select></td>

<td><div id='layer2b' STYLE='position:absolute; top:90; left:450; visibility: hidden'><br>

<select name='bairro' value='' style='WIDTH: 210'>

<option value='todos'>Selecione o bairro</option></div>

</select></td>

<td><div id='layer2c' STYLE='position:absolute; top:105; left:670; visibility: hidden'>

<input type='submit' value='Localizar' name='ok'></div></td></tr>

<!-- ****************************** CEP ******************** -->

<tr><td><div id='layer3' STYLE='position:absolute; top:90; left:10; visibility: hidden'>Localize lojas em um CEP:<br>

<input type='text' name='cep' value=''></div></td>

<td valign='bottom'><div id='layer3a' STYLE='position:absolute; top:105; left:200; visibility: hidden'><input type='submit' value='Localizar' name='ok'></div></tr>

<!-- ****************************** ENDEREÇO *************** -->

<tr><td><div id='layer4' STYLE='position:absolute; top:90; left:10; visibility: hidden'>Localize lojas em um endereço:<br>

<select name='estado3' value='' style='WIDTH: 170' onChange='atualiza4(this.value)'>

<option value='todos'>Selecione o Estado</option></div>

</select></td><td><br><div id='layer4a' STYLE='position:absolute; top:107; left:230; visibility: hidden'>

<select name='cidade4' value='' style='WIDTH: 210' onChange='atualiza5(this.value)'>

<option value='todas'>Selecione a cidade</option></div>

%>

</select></td>

<td><div id='layer4b' STYLE='position:absolute; top:107; left:450; visibility: hidden'><input type='text' name='endereco' value=''></div></td>

<td valign='bottom'><div id='layer4c' STYLE='position:absolute; top:105; left:600; visibility: hidden'><input type='submit' value='Localizar' name='ok'></div></td></tr>

<!-- ****************************** CODIGO ***************** -->

<tr><td colspan='2'><div id='layer5' STYLE='position:absolute; top:90; left:10; visibility: hidden'>Localize lojas pelo código da loja:<br>

<input type='text' name='cod'></div></td>

<td colspan='2' valign='bottom'><div id='layer5a' STYLE='position:absolute; top:105; left:250; visibility: hidden'>

<input type='submit' value='Localizar' name='ok'></div></tr>

</TABLE>

</body>

[PERNAMBUCO_FJV]

perae ae

vamos com calma!!

aquele se primeiro codigo

não esse enorme ae

hehehehe

tem la:

cidade,bairro

o que você quer aconteça com eles??

quando passar o mouse,ficar de outra cor??

tem algum site que você queira mostrar um exemplo??

[pe.leal]

Seguinte, esse codigo enorme é o menu que estou fazendo.

Quero que quando clicar em um dos itens desse menu ele mude de cor, não quando passar o mouse sobre ele, quando realmente clica-lo, e se clicar em um outro item do menu o anterior volta para a cor original e o item clicado muda de cor.

Não achei nenhum exemplo desse menu por isso estou pedindo ajuda.

Faço o que te falei, salve o codigo enorme como htm e você vai ver o que quero fazer.

Tks