Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

godoy89

Menu + submenu no onMouseOver

Por , em Javascript

Recommended Posts

godoy89    0

godoy89
Postado

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á.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Bruno_Ferreira    1

Bruno_Ferreira
Postado

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.

Compartilhar este post

Link para o post
Compartilhar em outros sites

godoy89    0

godoy89
Postado

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.

Compartilhar este post

Link para o post
Compartilhar em outros sites

berkowitz    2

berkowitz
Postado

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!

Compartilhar este post

Link para o post
Compartilhar em outros sites

godoy89    0

godoy89
Postado

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.

Compartilhar este post

Link para o post
Compartilhar em outros sites

berkowitz    2

berkowitz
Postado

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

godoy89    0

godoy89
Postado

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?

Compartilhar este post

Link para o post
Compartilhar em outros sites

klonder    14

klonder
Postado 

<html>

<head>

<title></title>

<script type="text/javascript">

//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>

 

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

 

</body>

</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

godoy89    0

godoy89
Postado

Imagem Postada

 

Imagem Postada

 

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

klonder    14

klonder
Postado

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;

Compartilhar este post

Link para o post
Compartilhar em outros sites

godoy89    0

godoy89
Postado

tive um pequeno problema de layout agora:

 

Imagem Postada

 

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?

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

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.

Compartilhar este post

Link para o post
Compartilhar em outros sites

godoy89    0

godoy89
Postado

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?

Compartilhar este post

Link para o post
Compartilhar em outros sites

klonder    14

klonder
Postado

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>

Compartilhar este post

Link para o post
Compartilhar em outros sites

godoy89    0

godoy89
Postado

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.

 

;)

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito