Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Nícolas

Estilizar link tag anterior

Por , em Javascript

Recommended Posts

Nícolas    4

Nícolas
Postado

Bom gente.. seguinte..

 

Tô com um projeto muito grande pra fazer aqui para um cliente também grande da empresa que trabalho...

 

O problema é que o site todo deve ser feito em html...

 

Não pode ser utilizado php, asp nem nenhuma linguagem de sistema.

 

 

Por isso estou utilizando o javascript para salvar a minha pele.

 

Antes de iniciar o projeto estou fazendo varios testes de como facilitar e agilizar o trabalho.

 

Eu to quase resolvendo um dos problemas que seriam no menu.

 

 

O negocio vai ser o seguinte

 

Por exemplo... o menu tem 4 links

 

E o link 1 tem 3 sublinks (que abre abaixo dele)

 

A pagina que esta atualmente sendo vista deve ficar com a opção marcada (até aee beleza eu ja fiz)

 

O problema é que esse submenu precisa permanecer aberto quando o link dele estiver ativo.

 

Só que como ele recarrega a pagina ele recarrega os estilos sendo assim ele da um display: none no link ativo... e pra ver que ele ta ativo eu preciso clicar no (link pai) dele sacou.

 

A única coisa que preciso é voltar uma (ou duas) tag(s) para dar um display block nela

 

 

tipo...

 

this.parent.style.display = "block";
Alguma coisa assim.

 

Bom o código ta aqui.

 

Como eu quero usar um unico arquivo para o menu e ficar habilitada a opção de ativo naquele que ta aberto eu faço uma comparação dos links que tem a mesma url do arquivo aberto atualmente e estilizo ele e só são estilizados os links que tem o atributo rev="menu" para evitar que afete outros links iguais da pagina.

 

Sendo assim só criar varias copias da index com o endereço dos arquivos dos links que você ja vai ver funcionando.

index.htm, sublink_1.htm, sublink_2.htm, sublink_3.htm, link_2.htm, sublink_01.htm, sublink_02.htm, sublink_03.htm, link_4.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Teste de Menu</title><link href="padrao.css" rel="stylesheet" type="text/css" /><script src="script.js" type="text/javascript"></script></head><body onload="menu();pagina_atual();"><div id="menu"></div>Pagina 1</body></html>
script.js

function pagina_atual (){		// VERIFICA SE O NAVEGADOR SUPORTA O COMANDO getElementsByTagName	if (!document.getElementsByTagName == false)   		//	PEGA TODOS OS LINKS DO SITE E ARMAZENA NUMA ARRAY   		var links = document.getElementsByTagName("a");		for (var i=0; i<links.length; i++) {		  var anchor = links[i];						//	FAZ A LISTAGEM DE TODOS OS ITENS QUE PERTENCEM AO MENU			var links_menu = anchor.rev;								//	SE O LINK TIVER O ATRIBUTO REV SETADO COMO MENU ELE FAZ A COMPARAÇÃO				if (links_menu == "menu"){													var niveis = anchor.rel;										var listagem_link = anchor.href;		// LISTA OS LINKS COM REV == MENU					var pagina_atual = document.location;	// PEGA O ENDEREÇO ATUAL DO SITE															 if (listagem_link == pagina_atual){												//	CASO A PAGINA ATUAL FOR IGUAL A DO LINK SETADO ELE JOGA O ESTILO												anchor.style.backgroundColor = "#E5E5E5";						anchor.style.color = "#000";																			anchor.style.color = "#FFF"											 }					 					 				}				}	}function menu(){	menu = ''+	'<ul>'+				//	MENU 1			'<li><a href="java script:submenu(\'submenu_01\');" rev="menu">Link 1</a>'+			'<ul id="submenu_01" class="sublinks">'+				'<li><a href="sublink_1.htm" rev="menu" rel="sub_nivel_1">Sub Link 1</a></li>'+				'<li><a href="sublink_2.htm" rev="menu" rel="sub_nivel_1">Sub Link 2</a></li>'+				'<li><a href="sublink_3.htm" rev="menu" rel="sub_nivel_1">Sub Link 3</a></li>'+			'</ul>'+					'</li>'+				//	MENU 2				'<li><a href="link_2.htm" rev="menu">Link 2</a></li>'+				//	MENU 3				'<li><a href="java script:submenu(\'submenu_03\');" rev="menu">Link 3</a>'+					'<ul id="submenu_03"  class="sublinks">'+				'<li><a href="sublink_01.htm" rev="menu" rel="sub_nivel_1">Sub Link 1</a></li>'+				'<li><a href="sublink_02.htm" rev="menu" rel="sub_nivel_1">Sub Link 2</a></li>'+				'<li><a href="sublink_03.htm" rev="menu" rel="sub_nivel_1">Sub Link 3</a></li>'+			'</ul>'+					'</li>'+				//	MENU 4				'<li><a href="link_4.htm" rev="menu">Link 4</a></li>'+			'</ul>'+	'';		document.getElementById('menu').innerHTML = menu;}function submenu(id){		document.getElementById(id).style.display = 'block';		}
padrao.css

/* CSS Document */* {	list-style: none;	margin: 0px;	padding: 0px;	}#menu ul li {	margin-bottom: 1px;}#menu ul li a {	border: 1px solid #CCC;	background-color: #F7F7F7;	padding: 3px 6px;		display:block;		width: 250px;	height: 21px;	line-height: 21px;		font: 11px Arial, Helvetica, sans-serif;	color: #777;		text-decoration: none;}#menu ul li .sublinks {	display: none;}#menu ul li .sublinks li a {	background-color: #D7F2FF;	color: #000;}#menu ul li a:hover, .pagina_atual {	background-color: #E5E5E5;	color: #000;}

Então...

 

E como o submenu esta contido na li do menu principal...

 

Eu só preciso voltar os itens do link do submenu até a ul com a class sublinks

(a > li > ul.sublinks)

 

E dar um display: block nela

 

Tem como alguém aee me dar uma força nisso?

:unsure:

 

------------------------------------------------------------------------------------

Post Mesclado

------------------------------------------------------------------------------------

 

Aeee gente não precisa mais não depois de muita luta finalmente consegui

 

function pagina_atual (){		// VERIFICA SE O NAVEGADOR SUPORTA O COMANDO getElementsByTagName	if (!document.getElementsByTagName == false)   		//	PEGA TODOS OS LINKS DO SITE E ARMAZENA NUMA ARRAY   		var links = document.getElementsByTagName("a");		for (var i=0; i<links.length; i++) {		  var anchor = links[i];						//	FAZ A LISTAGEM DE TODOS OS ITENS QUE PERTENCEM AO MENU			var links_menu = anchor.rev;								//	SE O LINK TIVER O ATRIBUTO REV SETADO COMO MENU ELE FAZ A COMPARAÇÃO				if (links_menu == "menu"){													var niveis = anchor.rel;										var listagem_link = anchor.href;		// LISTA OS LINKS COM REV == MENU					var pagina_atual = document.location;	// PEGA O ENDEREÇO ATUAL DO SITE															if (listagem_link == pagina_atual){												//	CASO A PAGINA ATUAL FOR IGUAL A DO LINK SETADO ELE JOGA O ESTILO												anchor.style.backgroundColor = "#E5E5E5";						anchor.style.color = "#000";												if (niveis != ""){							document.getElementById(niveis).style.display = 'block';								}					 }										 					 				}				}	}function submenu(id){		document.getElementById(id).style.display = 'block';		}function menu(){	menu = ''+	'<ul>'+				//	MENU 1			'<li><a href="java script:submenu(\'submenu_01\');" rev="menu">Link 1</a>'+			'<ul id="submenu_01" class="sublinks">'+				'<li><a href="sublink_1.htm" rev="menu" rel="submenu_01">Sub Link 1</a></li>'+				'<li><a href="sublink_2.htm" rev="menu" rel="submenu_01">Sub Link 2</a></li>'+				'<li><a href="sublink_3.htm" rev="menu" rel="submenu_01">Sub Link 3</a></li>'+			'</ul>'+					'</li>'+				//	MENU 2				'<li><a href="link_2.htm" rev="menu">Link 2</a></li>'+				//	MENU 3				'<li><a href="java script:submenu(\'submenu_03\');" rev="menu">Link 3</a>'+					'<ul id="submenu_03" class="sublinks">'+				'<li><a href="sublink_01.htm" rev="menu" rel="submenu_03">Sub Link 1</a></li>'+				'<li><a href="sublink_02.htm" rev="menu" rel="submenu_03">Sub Link 2</a></li>'+				'<li><a href="sublink_03.htm" rev="menu" rel="submenu_03">Sub Link 3</a></li>'+			'</ul>'+					'</li>'+				//	MENU 4				'<li><a href="link_4.htm" rev="menu">Link 4</a></li>'+			'</ul>'+	'';		document.getElementById('menu').innerHTML = menu;}

Compartilhar este post

Link para o post
Compartilhar em outros sites

mateus_bernardo    0

mateus_bernardo
Postado

Amigo você pode me pasasr o código deste menu , estou precisando resolver um problema igual.

 

www.exposec.tmp.br

 

 

 

 

Bom gente.. seguinte..

 

Tô com um projeto muito grande pra fazer aqui para um cliente também grande da empresa que trabalho...

 

O problema é que o site todo deve ser feito em html...

 

Não pode ser utilizado php, asp nem nenhuma linguagem de sistema.

 

 

Por isso estou utilizando o javascript para salvar a minha pele.

 

Antes de iniciar o projeto estou fazendo varios testes de como facilitar e agilizar o trabalho.

 

Eu to quase resolvendo um dos problemas que seriam no menu.

 

 

O negocio vai ser o seguinte

 

Por exemplo... o menu tem 4 links

 

E o link 1 tem 3 sublinks (que abre abaixo dele)

 

A pagina que esta atualmente sendo vista deve ficar com a opção marcada (até aee beleza eu ja fiz)

 

O problema é que esse submenu precisa permanecer aberto quando o link dele estiver ativo.

 

Só que como ele recarrega a pagina ele recarrega os estilos sendo assim ele da um display: none no link ativo... e pra ver que ele ta ativo eu preciso clicar no (link pai) dele sacou.

 

A única coisa que preciso é voltar uma (ou duas) tag(s) para dar um display block nela

 

 

tipo...

 

this.parent.style.display = "block";

Alguma coisa assim.

 

Bom o código ta aqui.

 

Como eu quero usar um unico arquivo para o menu e ficar habilitada a opção de ativo naquele que ta aberto eu faço uma comparação dos links que tem a mesma url do arquivo aberto atualmente e estilizo ele e só são estilizados os links que tem o atributo rev="menu" para evitar que afete outros links iguais da pagina.

 

Sendo assim só criar varias copias da index com o endereço dos arquivos dos links que você ja vai ver funcionando.

index.htm, sublink_1.htm, sublink_2.htm, sublink_3.htm, link_2.htm, sublink_01.htm, sublink_02.htm, sublink_03.htm, link_4.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Teste de Menu</title>
<link href="padrao.css" rel="stylesheet" type="text/css" />
<script src="script.js" type="text/javascript"></script>
</head>


<body onload="menu();pagina_atual();">
<div id="menu"></div>

Pagina 1

</body>
</html>

script.js

function pagina_atual (){
	
	// VERIFICA SE O NAVEGADOR SUPORTA O COMANDO getElementsByTagName
	if (!document.getElementsByTagName == false)
   
		//	PEGA TODOS OS LINKS DO SITE E ARMAZENA NUMA ARRAY   
		var links = document.getElementsByTagName("a");

		for (var i=0; i<links.length; i++) {
		  var anchor = links[i];
			
			//	FAZ A LISTAGEM DE TODOS OS ITENS QUE PERTENCEM AO MENU
			var links_menu = anchor.rev;
				
				//	SE O LINK TIVER O ATRIBUTO REV SETADO COMO MENU ELE FAZ A COMPARAÇÃO
				if (links_menu == "menu"){			
					
					var niveis = anchor.rel;
					
					var listagem_link = anchor.href;		// LISTA OS LINKS COM REV == MENU
					var pagina_atual = document.location;	// PEGA O ENDEREÇO ATUAL DO SITE						
				
					 if (listagem_link == pagina_atual){						
						//	CASO A PAGINA ATUAL FOR IGUAL A DO LINK SETADO ELE JOGA O ESTILO						
						anchor.style.backgroundColor = "#E5E5E5";
						anchor.style.color = "#000";	
						
					
							anchor.style.color = "#FFF"
						
					 }
					 					 
				}
			
	}	

}

function menu(){
	menu = ''+
	'<ul>'+
		
		//	MENU 1	
		'<li><a href="java script:submenu(\'submenu_01\');" rev="menu">Link 1</a>'+

			'<ul id="submenu_01" class="sublinks">'+
				'<li><a href="sublink_1.htm" rev="menu" rel="sub_nivel_1">Sub Link 1</a></li>'+
				'<li><a href="sublink_2.htm" rev="menu" rel="sub_nivel_1">Sub Link 2</a></li>'+
				'<li><a href="sublink_3.htm" rev="menu" rel="sub_nivel_1">Sub Link 3</a></li>'+
			'</ul>'+
			
		'</li>'+
		
		//	MENU 2		
		'<li><a href="link_2.htm" rev="menu">Link 2</a></li>'+
		
		//	MENU 3		
		'<li><a href="java script:submenu(\'submenu_03\');" rev="menu">Link 3</a>'+
		
			'<ul id="submenu_03"  class="sublinks">'+
				'<li><a href="sublink_01.htm" rev="menu" rel="sub_nivel_1">Sub Link 1</a></li>'+
				'<li><a href="sublink_02.htm" rev="menu" rel="sub_nivel_1">Sub Link 2</a></li>'+
				'<li><a href="sublink_03.htm" rev="menu" rel="sub_nivel_1">Sub Link 3</a></li>'+
			'</ul>'+
			
		'</li>'+
		
		//	MENU 4		
		'<li><a href="link_4.htm" rev="menu">Link 4</a></li>'+
		
	'</ul>'+
	'';
	
	document.getElementById('menu').innerHTML = menu;
}



function submenu(id){
		document.getElementById(id).style.display = 'block';		
}

padrao.css

/* CSS Document */
* {
	list-style: none;
	margin: 0px;
	padding: 0px;
	
}

#menu ul li {
	margin-bottom: 1px;
}

#menu ul li a {
	border: 1px solid #CCC;
	background-color: #F7F7F7;
	padding: 3px 6px;
	
	display:block;
	
	width: 250px;
	height: 21px;
	line-height: 21px;
	
	font: 11px Arial, Helvetica, sans-serif;
	color: #777;
	
	text-decoration: none;
}

#menu ul li .sublinks {
	display: none;
}

#menu ul li .sublinks li a {
	background-color: #D7F2FF;
	color: #000;
}

#menu ul li a:hover, .pagina_atual {
	background-color: #E5E5E5;
	color: #000;
}

 

Então...

 

E como o submenu esta contido na li do menu principal...

 

Eu só preciso voltar os itens do link do submenu até a ul com a class sublinks

(a > li > ul.sublinks)

 

E dar um display: block nela

 

Tem como alguém aee me dar uma força nisso?

:unsure:

 

------------------------------------------------------------------------------------

Post Mesclado

------------------------------------------------------------------------------------

 

Aeee gente não precisa mais não depois de muita luta finalmente consegui

 

function pagina_atual (){
	
	// VERIFICA SE O NAVEGADOR SUPORTA O COMANDO getElementsByTagName
	if (!document.getElementsByTagName == false)
   
		//	PEGA TODOS OS LINKS DO SITE E ARMAZENA NUMA ARRAY   
		var links = document.getElementsByTagName("a");

		for (var i=0; i<links.length; i++) {
		  var anchor = links[i];
			
			//	FAZ A LISTAGEM DE TODOS OS ITENS QUE PERTENCEM AO MENU
			var links_menu = anchor.rev;
				
				//	SE O LINK TIVER O ATRIBUTO REV SETADO COMO MENU ELE FAZ A COMPARAÇÃO
				if (links_menu == "menu"){			
					
					var niveis = anchor.rel;
					
					var listagem_link = anchor.href;		// LISTA OS LINKS COM REV == MENU
					var pagina_atual = document.location;	// PEGA O ENDEREÇO ATUAL DO SITE						
				
					if (listagem_link == pagina_atual){						
						//	CASO A PAGINA ATUAL FOR IGUAL A DO LINK SETADO ELE JOGA O ESTILO						
						anchor.style.backgroundColor = "#E5E5E5";
						anchor.style.color = "#000";
						
						if (niveis != ""){
							document.getElementById(niveis).style.display = 'block';		
						}
					 }
					
					 					 
				}
			
	}	

}




function submenu(id){
		document.getElementById(id).style.display = 'block';		
}



function menu(){
	menu = ''+
	'<ul>'+
		
		//	MENU 1	
		'<li><a href="java script:submenu(\'submenu_01\');" rev="menu">Link 1</a>'+

			'<ul id="submenu_01" class="sublinks">'+
				'<li><a href="sublink_1.htm" rev="menu" rel="submenu_01">Sub Link 1</a></li>'+
				'<li><a href="sublink_2.htm" rev="menu" rel="submenu_01">Sub Link 2</a></li>'+
				'<li><a href="sublink_3.htm" rev="menu" rel="submenu_01">Sub Link 3</a></li>'+
			'</ul>'+
			
		'</li>'+
		
		//	MENU 2		
		'<li><a href="link_2.htm" rev="menu">Link 2</a></li>'+
		
		//	MENU 3		
		'<li><a href="java script:submenu(\'submenu_03\');" rev="menu">Link 3</a>'+
		
			'<ul id="submenu_03" class="sublinks">'+
				'<li><a href="sublink_01.htm" rev="menu" rel="submenu_03">Sub Link 1</a></li>'+
				'<li><a href="sublink_02.htm" rev="menu" rel="submenu_03">Sub Link 2</a></li>'+
				'<li><a href="sublink_03.htm" rev="menu" rel="submenu_03">Sub Link 3</a></li>'+
			'</ul>'+
			
		'</li>'+
		
		//	MENU 4		
		'<li><a href="link_4.htm" rev="menu">Link 4</a></li>'+
		
	'</ul>'+
	'';
	
	document.getElementById('menu').innerHTML = menu;
}

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito