Menu + submenu no onMouseOver

godoy89 · Fevereiro 10, 2009

Boa tarde, estou com um probleminha sobre menu.

Tenho esta imagem (Imagem1) e gostaria que, ao colocar o mouse em cima do "MILITARES", abrisse (via onMouseOver) um submenu (Imagem2) e, ao tirar o mouse essa segunda imagem desaparecesse.

Imagem1

Imagem Postada

Imagem2

Imagem Postada

O mesmo vale para o "CIVIS" (só que com outro submenu).

Obrigado desde já.

Bruno_Ferreira · Fevereiro 11, 2009

Utilize os eventos OnMouseOver e OnMouseOut para exibir as imagens e esconder as imagens.

o primeiro executa um código definido por voce quando o mouse fica sobre o elemento, e o outro executa quando o ponteiro do mouse sai do elemento.

Coloque uma função que exiba a imagem no evento onMouseOver e outra função para esconder a imagem quando o mouse sair do elemento.

godoy89 · Fevereiro 11, 2009

Utilize os eventos OnMouseOver e OnMouseOut para exibir as imagens e esconder as imagens.

o primeiro executa um código definido por voce quando o mouse fica sobre o elemento, e o outro executa quando o ponteiro do mouse sai do elemento.

Coloque uma função que exiba a imagem no evento onMouseOver e outra função para esconder a imagem quando o mouse sair do elemento.

Obrigado pela ajuda, mas poderia me dizer como fazê-lo? Os jeitos que eu tentei não deram certo.

Obrigado.

berkowitz · Fevereiro 11, 2009

A forma que o Bruno explicou está correta.

Quais foram as formas que você tentou? Coloca teu código aí pra gente ver o q você ta errando...

Abrax!

godoy89 · Fevereiro 11, 2009

Subi um link com o que eu consegui fazer.

http://www.casabronline.com.br/test.html

Só que, quando eu ponho o mouse em cima do "MILITARES" ou o "CIVIS" o submenu (que aparece) some.

E quando eu colocar o mouse em cima do "CIVIS" eu preciso que outra imagem apareça.

Ou seja, "MILITARES" tem um submenu e "CIVIS" tem outro submenu.

berkowitz · Fevereiro 11, 2009

As imagens dos submenus não estão aparecendo, mas parece q ta funcionando sim cara.

godoy89 · Fevereiro 11, 2009

mas não como um submenu..

tente colocar o mouse na imagem que aparece quando você põe o mouse em cima de "MILITARES" e/ou "CIVIS"

eu preciso fazer da imagem que aparece embaixo um submenu (ou seja, a imagem não pode sumir quando eu tentar colocar o mouse em cima dela)

e está aprecendo a mesma imagem para "MILITARES" e "CIVIS" eu preciso que pra "MILITARES" apareça uma e para "CIVIS" outra!

entende?

klonder · Fevereiro 18, 2009

<html>

<head>

//Script by Klonder

function mostrar(numMenu) {

//Apagando todos que estejam abertos:

for (var i = 1; i <= 2; i++) {

document.getElementById("sub"+i).style.display = "none";;

}

var subMenu = document.getElementById("sub"+numMenu);

var Menu = document.getElementById("menu"+numMenu);

subMenu.style.top = Menu.offsetTop + 30;

subMenu.style.marginLeft = Menu.offsetLeft + 5;

subMenu.style.display = "block";

}

function ocultar(numMenu) {

var subMenu = document.getElementById("sub"+numMenu);

subMenu.style.display = "none";

}

</script>

</head>

<body>

</tr>

</table>

<tr><td style="cursor:hand">SubMenu11</td><td style="cursor:hand">SubMenu12</td><td style="cursor:hand">SubMenu13</td></tr>

</table>

<tr><td style="cursor:hand">SubMenu21</td><td style="cursor:hand">SubMenu22</td><td style="cursor:hand">SubMenu23</td></tr>

</table>

</body>

</html>

godoy89 · Fevereiro 19, 2009

Imagem Postada

Tem como fazer o submenu2 começar no mesmo lugar que o submenu1?

klonder · Fevereiro 19, 2009

Basta retirar a parte do código a seguir (ou colocar duas barras no início de cada linha):

//subMenu.style.top = Menu.offsetTop + 30;
//subMenu.style.marginLeft = Menu.offsetLeft + 5;

ou substituir o trecho de código acima apenas por:

subMenu.style.marginLeft = 10;

godoy89 · Fevereiro 19, 2009

tive um pequeno problema de layout agora:

Imagem Postada

rapare no espaço entre o título acima e as duas fotos logo abaixo

tem como deixar um espaço "reservado" ali pro submenu? sem que quebre as linhas?

William Bruno · Fevereiro 19, 2009

use a propriedade visibility no lugar do display...

em vez de display: none, use visibility: hidden...

Assim, o elemento continua no fluxo do documento, mas apenas não aparece. Diferente do none, que retira até o espaço ocupado pelo objeto.

godoy89 · Fevereiro 19, 2009

editei no javascript e nas tables.

NÃO FUNCIONOU!

uma coisa que me chamou a atenção no javascript foi isso:

//Apagando todos que estejam abertos:
	 for (var i = 1; i <= 2; i++) {
	 document.getElementById("sub"+i).style.display = "none";;

tem 2 ; dps do "none", ta certo ou tiro um deles?

klonder · Fevereiro 19, 2009

Pode tirar o ponto-e-vírgula.

Novo código:

<html>
<head>
<title></title>
<script type="text/javascript">
//Script by Klonder
function mostrar(numMenu) {
//Digite a quantidade total de submenus;
var qtdeDeSubMenus = 2;

	//Apagando todos itens que estejam abertos:
	for (var i = 1; i <= qtdeDeSubMenus; i++) {
	 document.getElementById("sub"+i).style.display = "none";
	}
	
	var subMenu = document.getElementById("sub"+numMenu);
	var Menu = document.getElementById("menu"+numMenu);

	subMenu.style.top = Menu.offsetTop + 30;
	subMenu.style.marginLeft = Menu.offsetLeft + 5;
	subMenu.style.display = "block";
}

function ocultar(numMenu) {
var subMenu = document.getElementById("sub"+numMenu);
subMenu.style.display = "none";
}

</script>
</head>
<body>
<div id="menu" style="height:80px; border:#DFDFDF 1px solid;">
<table border="1" width="400px" height="">
<tr><td id="menu1" valign="top" onmouseover="mostrar(1)">Menu 1</td>
<td id="menu2" valign="top" onmouseover="mostrar(2)">Menu 2</td>
<td>Menu 3</td>
</tr>
</table>

<table id="sub1" border="1" width="200" height="" onMouseOver="mostrar(1)" onMouseOut="ocultar(1)" style="background-color:#FFFFFF; display: none;">
<tr><td style="cursor:hand">SubMenu11</td><td style="cursor:hand">SubMenu12</td><td style="cursor:hand">SubMenu13</td></tr>
</table>

<table id="sub2" border="1" width="200" height="" onMouseOver="mostrar(2)" onMouseOut="ocultar(2)" style="background-color:#FFFFFF; display: none;">
<tr><td style="cursor:hand">SubMenu21</td><td style="cursor:hand">SubMenu22</td><td style="cursor:hand">SubMenu23</td></tr>
</table>
</div>

<table>
<tr>
	<td><img src="imagem1.jpg"></td><td><img src="imagem2.jpg"></td>
</tr>
</table>
</body>
</html>

godoy89 · Março 2, 2009

klonder, primeiramente me desculpe pelo tempo em que não respondi ao tópico. estava viajando e minha Internet (3G) fez o favor de não funcionar.

não consegui entender esse novo código também.

vou te mandar em PM o link com o submenu funcionando, apenas com o problema de quebra de linha.

;)

Arquivado

Menu + submenu no onMouseOver

Recommended Posts

godoy89 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Bruno_Ferreira 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

godoy89 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

berkowitz 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

godoy89 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

berkowitz 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

godoy89 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

klonder 14

Compartilhar este post

Link para o post

Compartilhar em outros sites

godoy89 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

klonder 14

Compartilhar este post

Link para o post

Compartilhar em outros sites

godoy89 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

godoy89 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

klonder 14

Compartilhar este post

Link para o post

Compartilhar em outros sites

godoy89 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fixar div até atingir uma certa altura

Ajuda com Extends e envio para o banco

PHP+Codeginiter - Orientação para Impressão

Fóruns

Tempo Real

Informação importante