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