Menu ativo

[marcelrizzo 0]

Galera, eu olhei um pouco aqui no fórum, e não vi nada que fale disso.

 

Eu fiz um menu que está funcionando normalmente, mas eu quero que ele fique inativo quando eu entro em determinada página:

 

Eu coloquei em negrito a solução que eu dei, mas ela só funciona enquanto eu estou na tela do FrontPage, nos navegadores não dá certo. Alguém sabe o problema?

 

O css é

/* MENU XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */ul#menu{	width:200px;	border-top:1px solid #003399;	border-bottom:1px solid #003399;	border-right:1px solid #003399;	background-color: rgb(255,209,123);	margin:0;	padding:0;	list-style-type:none;	}ul#menu li{	border-bottom:1px solid #A4A0F5;	}ul#menu li a:link, ul#menu li a:visited{	display:block;	height:1%;	text-decoration:none;	font-family: Geneva, Arial, Helvetica, sans-serif;	font-size:18px;	color:#5E0F50;	border-left:10px solid #EEC591;	padding-left:5px;	}ul#menu li a:hover{	background-color: #FFE4B5;	color:#DAA520;	border-left:10px solid #FFD39B;	} #meuselect {  width:120px;}<strong class='bbc'>li.click a:hover, ul#menu li.click a:link{  /* MENU INATIVO XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */	background-color: #FFE4B5;	color:#DAA520;	border-left: #FFD39B;	}</strong>

O html é :

<li class="click"><a href="#">History</a></li>

<li><a href="eng_customer.htm">Customer Feedback</a></li>

<li><a href="eng_products.htm">Products</a></li>

<li><a href="eng_newproducts.htm">New Products</a></li>

<li><a href="eng_projects.htm">Projects</a></li>

<li><a href="eng_register.htm">Register</a></li>

<li><a href="eng_samplerequest.htm">Sample Request</a></li>

<li><a href="eng_contact.htm">Contact Us</a></li>

<li><a href="eng_warranty.htm">Warranty</a></li>

</ul>

_linenums:0'><ul id="menu"> <li><a href="eng_introduction.htm">Introduction</a></li> <strong class='bbc'><li class="click"><a href="#">History</a></li></strong> <li><a href="eng_customer.htm">Customer Feedback</a></li> <li><a href="eng_products.htm">Products</a></li> <li><a href="eng_newproducts.htm">New Products</a></li> <li><a href="eng_projects.htm">Projects</a></li> <li><a href="eng_register.htm">Register</a></li> <li><a href="eng_samplerequest.htm">Sample Request</a></li> <li><a href="eng_contact.htm">Contact Us</a></li> <li><a href="eng_warranty.htm">Warranty</a></li> </ul>

Obrigado.

[.:: Pegasus ::. 0]

Olá marcelrizzo..Eu vi em um outro post seu uma indicação do que quer fazer nesse menu aqui... e mesmo assim não entendi muito bem..Você não teria como hospedar o menu em algum host grátis para podermos ve-lo em ação.. pode ser um dos motivos pelo qual ninguém ainda te respondeu...Abraços.

[marcelrizzo 0]

Bem, está ai.

 

http://www.questsystems.co.uk/eng_introduction.htm

 

Valeu

[Giovani 104]

Inativo == não funcionar???

 

Se for isso tire o link de dentro da <li></li>.

 

Disto:

<li class="click"><a href="eng_customer.htm">Customer Feedback</a></li>

 

Para isso:

<li>Customer Feedback</li>

[marcelrizzo 0]

Acho que me expressei mal.Eu quero que o menu fique como se funcionasse, entretanto, ao entrar na página introduction por exemplo, o menu introduction fique com as mesmas características de quando o mouse está em cima dele (a:hover), para ele ficar detacado.A solução CSS que eu dei não funciona, e eu não sei o porque.Alguém sabe o que está errado, ou alguma solução melhor?

[Guilherme Rambo 4]

Coloca um ID no body da página, e um ID pra cada li.Aeh eh soh personalizar[]'s

[.:: Pegasus ::. 0]

Acho que eu entendi o que você quer fazer marcelrizzo...

Você quer um estado do link como se estivesse o mouse sobre ele para mostrar que ele está naquela área...

Se for isso é simples..

Construa o menu normalmente..

Logo embaixo construa uma class chamada .selecionado.

Nela você colocará toda as propriedades do estado a:hover do seu menu...

Assim cada link que a pessoa estiver visitando você apenas altera no código adcionando essa class:

vou dar um exemplo abaixo.

 

CSS

ul li a {        background:#CCC;}ul li a:hover {	background:#FFF;	display:block;}.selecionado {	background:#FFF;}

HTML

<div id"menu">	<ul>		<li><a href="#" class="selecionado">Home</a></li>		<li><a href="#">Contato</a></li>		<li><a href="#">Pessoas</a></li>		<li><a href="#">Teste</a></li>		<li><a href="#">Imagens</a></li>	</ul></div>

No meu exemplo eu coloquei a unica coisa é simplesmente mudar o background.

No caso a área que a pessoa está visitando é a home.

No caso se ela visitar a página Contato, é só colocar a class .selecionado no contato e tirar o da home. e assim por diante.

[Giovani 104]

A solução do .:: Pegasus ::. ficou show de bola.

 

Vou alterar o título do seu tópico, por que não é menu inativo e sim ativo.

 

[]´s http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[marcelrizzo 0]

Galera. valeu a ajuda, mas essa solução não funcionou para mim, meu menu já tinha algumas especificações e tive que fazer uns ajustes, mas eu dei uma solução e estou postando ela aqui para quem quiser:

 

Está em negrito a parte que tive que mudar.

 

 

HTML

<li class="click"><a href="#">Introduction</a></li>

<li><a href="eng_history.htm">History</a></li>

<li><a href="eng_customer.htm">Customer Feedback</a></li>

<li><a href="eng_products.htm">Products</a></li>

<li><a href="eng_newproducts.htm">New Products</a></li>

<li><a href="eng_projects.htm">Projects</a></li>

<li><a href="eng_register.htm">Register</a></li>

<li><a href="eng_samplerequest.htm">Sample Request</a></li>

<li><a href="eng_contact.htm">Contact Us</a></li>

<li><a href="eng_warranty.htm">Warranty</a></li>

</ul>

_linenums:0'><ul id="menu"> <strong class='bbc'><li class="click"></strong><a href="#">Introduction</a></li> <li><a href="eng_history.htm">History</a></li> <li><a href="eng_customer.htm">Customer Feedback</a></li> <li><a href="eng_products.htm">Products</a></li> <li><a href="eng_newproducts.htm">New Products</a></li> <li><a href="eng_projects.htm">Projects</a></li> <li><a href="eng_register.htm">Register</a></li> <li><a href="eng_samplerequest.htm">Sample Request</a></li> <li><a href="eng_contact.htm">Contact Us</a></li> <li><a href="eng_warranty.htm">Warranty</a></li> </ul>

CSS

/* MENU XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */ul#menu{	width:180px;	border-top:1px solid #003399; /* Azul escuro */	border-bottom:1px solid #003399;	border-right:1px solid #003399;	background-color: rgb(255,209,123); /* Laranja */	margin:0;	padding:0;	list-style-type:none;	}ul#menu li{	border-bottom:1px solid #A4A0F5; /* Azul Claro */	}ul#menu li a:link, ul#menu li a:visited{	display:block;	height:1%;	text-decoration:none;	font-family: Geneva, Arial, Helvetica, sans-serif;	font-size:18px;	color:#5e0f50; /* Quase preto */	border-left:10px solid #eec591; /* Mostarda - Borda esquerda do Menu */	padding-left:5px;	}ul#menu li a:hover{	background-color: #ffe4b5; /* Amarelo claro - Menu hover */	color:#daa520; /* Marrom médio */	border-left:10px solid #ffd39b; /* Mostarda claro - Menu fundo */	}	<strong class='bbc'>ul#menu li.click a:link, ul#menu li.click a:visited{	background-color: #ffe4b5; /* Amarelo claro - Menu hover */	color:#daa520; /* Marrom médio */	border-left:10px solid #ffd39b; /* Mostarda claro - Menu fundo */

[.:: Pegasus ::. 0]

Fico feliz que tenha conseguido.. sobre o meu código.. se é isso que queria mesmo está funcionando sim.. se não funcionou é porque pode ter alguma coisa no seu código que está tirando a propriedade que eu coloquei.. experimente fazer somente o menu em uma página a parte..

E Obrigado por voltar aqui e dizer que conseguiu juntamente com a sua solução.

Abraços.

[Giovani 104]

No link a seguir tem uma solução parecida com a do .:: Pegasus ::.:

http://www.imasters.com.br/artigo/4224/css...bas_sem_imagens

 

É link aqui do fórum mesmo.

 

[]´s http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif