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