Jump to content


Photo

Estilizar Link Tag Anterior


  • Faça o login para participar
1 reply to this topic

#1 nick171

nick171

    <? if => erro ?>

  • Usuários
  • 612 posts
  • Sexo:Não informado

Posted 14/09/2007, 17:58

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 blz 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:

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;
}

Nícolas Vieira Rossett


"O maior segredo da vida é que a mesma não é um processo de descoberta, mas sim de criação.
Você não está se descobrindo, mas se recriando.
Por isso não tente descobrir quem você é, mas busque determinar... "Quem você quer ser"!!!

#2 dddj

dddj

    Normal

  • Usuários
  • 112 posts
  • Sexo:Masculino
  • Localidade:Campo Grande

Posted 15/09/2007, 12:11

Valeu camarada resolveu
Djavan Loureiro - SEO Marketing - Search Engine Optimization - Otimização de Sites
Coloque seu site no topo dos sistemas de busca - Projeto SEM - Visitem o site.




2 user(s) are reading this topic

0 membro(s), 2 visitante(s) e 0 membros anônimo(s)

IPB Skin By Virteq