(Pergunta e código alterado)
O meu código pode resumir-se ao seguinte:
Código (HTML):
Isto está funcional no Chrome, o submenu fica invisivel ou é mostrado quando se clica no botão menu3. mas a div onde está o submenu não muda de posição, ficando à esquerda no local onde aparece inicialmente no código.
Aparentemente as funções .style.top e .style.left não funcionam.
Por outro lado, se eu meter a div do submenu dentro da td onde está o botão menu3 (aí não precisava de reposicionar o left e o top do submenu), o submenu vai aparecer por debaixo da div seguinte (<div class="content">).
Será que o facto de estarem ambas as div do menu e submenu dentro de uma div geral do site inibe as funções de posicionamento?
Estarei a escrever mal o código Javascript?
Agradeço desde já a ajuda que me puderem dar.
O meu código pode resumir-se ao seguinte:
Código (HTML):
<body>
<center>
<div class="site">
<div class="menu">
<table style="width: 100%">
<tr>
<td><input type="button" value="menu1" onclick="window.location.href='menu1.php'" /></td>
<td><input type="button" value="menu2" onclick="window.location.href='menu2.php'" /></td>
<td><input type="button" value="menu3" onclick="MostraSubMenu()" id="menu3" /></td>
<td><input type="button" value="menu4" onclick="window.location.href='menu4.php'" /></td>
</tr>
</table>
</div>
<div id="submenu" style="width: auto; display: none; position: absolute; z-index: 9999;">
<input type="button" value="submenu1" /><br />
<input type="button" value="submenu2" /><br />
<input type="button" value="submenu3" /><br />
<input type="button" value="submenu4" />
</div>
<script type="text/javascript">
function MostraSubMenu() {
var divbot = document.getElementById('menu3');
if(document.getElementById('submenu').style.display == 'none') {
document.getElementById('submenu').style.left = divbot.style.left;
document.getElementById('submenu').style.top = divbot.style.top + 30;
document.getElementById('submenu').style.display = 'block';}
else {
document.getElementById('submenu').style.display = 'none';
};
};
</script>
<div class="content">
(conteúdo do site)
</div>
</div>
</center>
</body>
<center>
<div class="site">
<div class="menu">
<table style="width: 100%">
<tr>
<td><input type="button" value="menu1" onclick="window.location.href='menu1.php'" /></td>
<td><input type="button" value="menu2" onclick="window.location.href='menu2.php'" /></td>
<td><input type="button" value="menu3" onclick="MostraSubMenu()" id="menu3" /></td>
<td><input type="button" value="menu4" onclick="window.location.href='menu4.php'" /></td>
</tr>
</table>
</div>
<div id="submenu" style="width: auto; display: none; position: absolute; z-index: 9999;">
<input type="button" value="submenu1" /><br />
<input type="button" value="submenu2" /><br />
<input type="button" value="submenu3" /><br />
<input type="button" value="submenu4" />
</div>
<script type="text/javascript">
function MostraSubMenu() {
var divbot = document.getElementById('menu3');
if(document.getElementById('submenu').style.display == 'none') {
document.getElementById('submenu').style.left = divbot.style.left;
document.getElementById('submenu').style.top = divbot.style.top + 30;
document.getElementById('submenu').style.display = 'block';}
else {
document.getElementById('submenu').style.display = 'none';
};
};
</script>
<div class="content">
(conteúdo do site)
</div>
</div>
</center>
</body>
Isto está funcional no Chrome, o submenu fica invisivel ou é mostrado quando se clica no botão menu3. mas a div onde está o submenu não muda de posição, ficando à esquerda no local onde aparece inicialmente no código.
Aparentemente as funções .style.top e .style.left não funcionam.
Por outro lado, se eu meter a div do submenu dentro da td onde está o botão menu3 (aí não precisava de reposicionar o left e o top do submenu), o submenu vai aparecer por debaixo da div seguinte (<div class="content">).
Será que o facto de estarem ambas as div do menu e submenu dentro de uma div geral do site inibe as funções de posicionamento?
Estarei a escrever mal o código Javascript?
Agradeço desde já a ajuda que me puderem dar.