Ajustando submenu Drop Down

cristhianofonseca · Julho 27, 2006

Fala galera!

Seguinte, estou queimando a "mufa" aqui para conseguir ajustar a posição que cada submenu deve assumir ao ser aberto. Estou usando tamanho da tabela com 100% e a única forma que "sei" de ajustar a posição que o submenu desce é o "left:????px", que dependendo da resolução da tela do usuário destorce o ajuste.

Na verdade precisaria ajustar de uma forma que mesmo o usuário mudando a resoluçao dele, os submenus descecem em baixo do menu correspondente.

Dê uma testada com o código abaixo e entenderá o q estou querendo.

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

<html>

<head>

<style>

body,p,table,td.input,textarea{

font-family:Verdana, Arial, Helvetica, sans-serif;

font-size:11px;

color:#000033;

}

a{

text-decoration:none;

color:#000000;

}

.special {

position:relative;

top:0px;

left:0px;

background-color:#ffffff;

}

</style>

function menu(){

submenu = [];

for(i=0; i<7; i++) submenu = [];

textmenu = [];

for(i=0; i<7; i++) textmenu = [];

textmenu[0][0] = ["Novo","Abrir","Abrir Como...","Salvar","Salvar Como..."]

textmenu[0][1] = ["www.abusiva.com.br","","","",""];

textmenu[1][0] = ["Recortar","Copiar","Colar","Colar Especial","Limpar tudo","Options","Customize"]

textmenu[1][1] = ["","","","","","",""];

textmenu[2][0] = ["Barras de ferramentas","Barra de Status","Barras do Explorer","Mostrar Imagem","Codigo Fonte","Tela Inteira"]

textmenu[2][1] = ["","","","","",""];

textmenu[3][0] = ["Adicionar a Favoritos","Configurar","Excluir Favoritos"]

textmenu[3][1] = ["","",""];

textmenu[4][0] = ["Sincronizar","Windows Update","Messenger","Opcoes de Internet"]

textmenu[4][1] = ["","","",""];

textmenu[5][0] = ["Conteudo e Indice","Dica do Dia","Suporte On-line","Enviar Comentarios","Sobre o Internet Explorer"]

textmenu[5][1] = ["","","","",""];

textmenu[6][0] = ["Conteudo e Indice","Dica do Dia","Suporte On-line","Enviar Comentarios","Sobre o Internet Explorer"]

textmenu[6][1] = ["","","","",""];

menus = [];

if(document.getElementById){

menus[0] = document.getElementById("Layer1");

menus[1] = document.getElementById("Layer2");

menus[2] = document.getElementById("Layer3");

menus[3] = document.getElementById("Layer4");

menus[4] = document.getElementById("Layer5");

menus[5] = document.getElementById("Layer6");

menus[6] = document.getElementById("Layer7");

menuinterno = document.getElementById("menu");

//menu.setAttribute("position","absolute")

function over(){ this.style.backgroundColor = '#B2B4BF'; }

function out(){ this.style.backgroundColor = '#ffffff'; }

function show(){ this.style.visibility='visible'; }

function hide(){ this.style.visibility='hidden'; }

for(j=0; j<textmenu.length; j++){

for (i=0; i<textmenu[j][0].length; i++){

//alert(textmenu[j][0])

textmenu[j][0] = "<a href='"+textmenu[j][1]+"' target='_blank'>" + textmenu[j][0] + "</a>";

submenu[j] = document.createElement("DIV");

submenu[j].setAttribute("className", "special");

submenu[j].innerHTML = textmenu[j][0];

submenu[j].style.padding = "5px";

submenu[j].onmouseover = over;

submenu[j].onmouseout = out;

menus[j].appendChild(submenu[j]);

}

menus[j].style.top = (parseInt(menuinterno.style.top)+parseInt(menuinterno.style.height));

menus[j].onmouseover = show;

menus[j].onmouseout = hide;

}

window.onload = menu;

</script>

</head>

<body>

<div id="Layer1" style="position:absolute; left:10px; top:37px; width:170px; padding:2px; z-index:1; background-color:#ffffff; border:1px solid #999999; visibility:hidden"></div>

<div id="Layer2" style="position:absolute; left:180px; top:37px; width:170px; padding:2px; z-index:1; background-color:#ffffff; border:1px solid #999999; visibility:hidden"></div>

<div id="Layer3" style="position:absolute; left:250px; top:37px; width:170px; padding:2px; z-index:1; background-color:#ffffff; border:1px solid #999999; visibility:hidden"></div>

<div id="Layer4" style="position:absolute; left:340px; top:37px; width:170px; padding:2px; z-index:1; background-color:#ffffff; border:1px solid #999999; visibility:hidden"></div>

<div id="Layer5" style="position:absolute; left:430px; top:37px; width:170px; padding:2px; z-index:1; background-color:#ffffff; border:1px solid #999999; visibility:hidden"></div>

<div id="Layer6" style="position:absolute; left:530px; top:37px; width:170px; padding:2px; z-index:1; background-color:#ffffff; border:1px solid #999999; visibility:hidden"></div>

<div id="Layer7" style="position:absolute; left:700px; top:37px; width:170px; padding:2px; z-index:1; background-color:#ffffff; border:1px solid #999999; visibility:hidden"></div>

<div id="menu" style="position:absolute; top:10px; left:10px; width:100%; height:23px; z-index:1000;" align="center">

<center><table width="100%" border="0" bgcolor="#FFCC99" cellpadding="0" cellspacing="0">

<tr>

<td width="14,30%" height="23px"><a href="java script:void(null)" onMouseOver="menus[0].onmouseover()" onMouseOut="menus[0].onmouseout()">Menu_Teste1</a></td>

<td width="14,28%"><a href="java script:void(null)" onMouseOver="menus[1].onmouseover()" onMouseOut="menus[1].onmouseout()">Menu_Teste2</a></td>

<td width="14,28%"><a href="java script:void(null)" onMouseOver="menus[2].onmouseover()" onMouseOut="menus[2].onmouseout()">Menu_Teste3</a></td>

<td width="14,28%"><a href="java script:void(null)" onMouseOver="menus[3].onmouseover()" onMouseOut="menus[3].onmouseout()">Menu_Teste4</a></td>

<td width="14,28%"><a href="java script:void(null)" onMouseOver="menus[4].onmouseover()" onMouseOut="menus[4].onmouseout()">Menu_Teste5</a></td>

<td width="14,28%"><a href="java script:void(null)" onMouseOver="menus[5].onmouseover()" onMouseOut="menus[5].onmouseout()">Menu_Teste6</a></td>

<td width="14,30%"><a href="java script:void(null)" onMouseOver="menus[6].onmouseover()" onMouseOut="menus[6].onmouseout()">Menu_Teste7</a></td>

</tr>

</table>

</center>

</div>

</body>

</html>

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

Quem puder ajudar ficarei grato.

Valeu!

Morpheus#2005 · Julho 27, 2006

Vê ai se te ajuda a pensar um pouqinho.

<html>

<head>

<style>

body,p,table,td.input,textarea{

font-family:Verdana, Arial, Helvetica, sans-serif;

font-size:11px;

color:#000033;

}

a{

text-decoration:none;

color:#000000;

}

.special {

position:relative;

top:0px;

left:0px;

background-color:#ffffff;

}

</style>

function menu(){

submenu = [];

for(i=0; i<7; i++) submenu = [];

textmenu = [];

for(i=0; i<7; i++) textmenu = [];

textmenu[0][0] = ["Novo","Abrir","Abrir Como...","Salvar","Salvar Como..."]

textmenu[0][1] = ["www.abusiva.com.br","","","",""];

textmenu[1][0] = ["Recortar","Copiar","Colar","Colar Especial","Limpar tudo","Options","Customize"]

textmenu[1][1] = ["","","","","","",""];

textmenu[2][0] = ["Barras de ferramentas","Barra de Status","Barras do Explorer","Mostrar Imagem","Codigo Fonte","Tela Inteira"]

textmenu[2][1] = ["","","","","",""];

textmenu[3][0] = ["Adicionar a Favoritos","Configurar","Excluir Favoritos"]

textmenu[3][1] = ["","",""];

textmenu[4][0] = ["Sincronizar","Windows Update","Messenger","Opcoes de Internet"]

textmenu[4][1] = ["","","",""];

textmenu[5][0] = ["Conteudo e Indice","Dica do Dia","Suporte On-line","Enviar Comentarios","Sobre o Internet Explorer"]

textmenu[5][1] = ["","","","",""];

textmenu[6][0] = ["Conteudo e Indice","Dica do Dia","Suporte On-line","Enviar Comentarios","Sobre o Internet Explorer"]

textmenu[6][1] = ["","","","",""];

menus = [];

if(document.getElementById){

menus[0] = document.getElementById("Layer1");

menus[1] = document.getElementById("Layer2");

menus[2] = document.getElementById("Layer3");

menus[3] = document.getElementById("Layer4");

menus[4] = document.getElementById("Layer5");

menus[5] = document.getElementById("Layer6");

menus[6] = document.getElementById("Layer7");

menuinterno = document.getElementById("menu");

//menu.setAttribute("position","absolute")

function over(){ this.style.backgroundColor = '#B2B4BF'; }

function out(){ this.style.backgroundColor = '#ffffff'; }

function show(){ this.style.visibility='visible'; }

function hide(){ this.style.visibility='hidden'; }

for(j=0; j<textmenu.length; j++){

for (i=0; i<textmenu[j][0].length; i++){

//alert(textmenu[j][0])

textmenu[j][0] = "<a href='"+textmenu[j][1]+"' target='_blank'>" + textmenu[j][0] + "</a>";

submenu[j] = document.createElement("DIV");

submenu[j].setAttribute("className", "special");

submenu[j].innerHTML = textmenu[j][0];

submenu[j].style.padding = "5px";

submenu[j].onmouseover = over;

submenu[j].onmouseout = out;

menus[j].appendChild(submenu[j]);

}

menus[j].style.top = (parseInt(menuinterno.style.top)+parseInt(menuinterno.style.height));

menus[j].onmouseover = show;

menus[j].onmouseout = hide;

}

window.onload = menu;

</script>

</head>

<body>

<div id="Layer1" style="position:absolute; left:18%; top:37px; width:170px; padding:2px; z-index:1; background-color:#CCCCCC; border:1px solid #999999; visibility:hidden"></div>

<div id="Layer2" style="position:absolute; left:26%; top:37px; width:170px; padding:2px; z-index:1; background-color:#ffffff; border:1px solid #999999; visibility:hidden"></div>

<div id="Layer3" style="position:absolute; left:34%; top:37px; width:170px; padding:2px; z-index:1; background-color:#ffffff; border:1px solid #999999; visibility:hidden"></div>

<div id="Layer4" style="position:absolute; left:42%; top:37px; width:170px; padding:2px; z-index:1; background-color:#ffffff; border:1px solid #999999; visibility:hidden"></div>

<div id="Layer5" style="position:absolute; left:50%; top:37px; width:170px; padding:2px; z-index:1; background-color:#ffffff; border:1px solid #999999; visibility:hidden"></div>

<div id="Layer6" style="position:absolute; left:58%; top:37px; width:170px; padding:2px; z-index:1; background-color:#ffffff; border:1px solid #999999; visibility:hidden"></div>

<div id="Layer7" style="position:absolute; left:66%; top:37px; width:170px; padding:2px; z-index:1; background-color:#ffffff; border:1px solid #999999; visibility:hidden"></div>

<div id="menu" style="position:absolute; top:152px; left:197px; width:644px; height:23px; z-index:1000;" align="center">

<center><table width="98%" border="1" cellpadding="0" cellspacing="0" bordercolor="#000000" bgcolor="#FFCC99">

<tr>

<td width="10%" height="50%"><div align="center"><a href="java script:void(null)" onMouseOver="menus[0].onmouseover()" onMouseOut="menus[0].onmouseout()">Menu_Teste1</a></div></td>

<td width="10%" height="20%"><div align="center"><a href="java script:void(null)" onMouseOver="menus[1].onmouseover()" onMouseOut="menus[1].onmouseout()">Menu_Teste2</a></div></td>

<td width="10%" height="25%"><div align="center"><a href="java script:void(null)" onMouseOver="menus[2].onmouseover()" onMouseOut="menus[2].onmouseout()">Menu_Teste3</a></div></td>

<td width="10%" height="50%"><div align="center"><a href="java script:void(null)" onMouseOver="menus[3].onmouseover()" onMouseOut="menus[3].onmouseout()">Menu_Teste4</a></div></td>

<td width="10%" height="23px"><div align="center"><a href="java script:void(null)" onMouseOver="menus[4].onmouseover()" onMouseOut="menus[4].onmouseout()">Menu_Teste5</a></div></td>

<td width="10%" height="23px"><div align="center"><a href="java script:void(null)" onMouseOver="menus[5].onmouseover()" onMouseOut="menus[5].onmouseout()">Menu_Teste6</a></div></td>

<td width="10%" height="23px"><div align="center"><a href="java script:void(null)" onMouseOver="menus[6].onmouseover()" onMouseOut="menus[6].onmouseout()">Menu_Teste7</a></div></td>

</tr>

</table>

</center>

</div>

</body>

</html>

cristhianofonseca · Julho 27, 2006

Funcionou a parte do posicionamento dos submenus, só não estou conseguindo clicar nos submenus.Verifique só!Valeu!

Morpheus#2005 · Julho 27, 2006