Ir para conteúdo

POWERED BY:

Arquivado

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

Bruno_Ferreira

Menu Drop down aparece atrás de outro objeto

Por , em Javascript

Recommended Posts

Bruno_Ferreira    1

Bruno_Ferreira
Postado

Boa tarde amigos.

 

Montei uma página que consiste no seguinte: ela possui um menu em cima do tipo drop down, ou seja, quando você passa o cursor do mouse sobre o item do menu aparece embaixo um submenu. de início tinha montado o menu com um iframe embaixo que iria exibir os conteúdos. só que o submenu estava aparecendo atrás do iframe.

Posteriormente me sugeriram colocar no código html o iframe antes e o menu embaixo e depois posicionar com css conforme o código aí embaixo, aí deu certo.

<html>
	<head>
		<title>Portal</title>
		<script src="script/script.js"></script>
		<style>
		body{
			font-family: arial;
		}

		#logo{
			position: absolute;
			width: 100%;
			height:85;
			left:10;
			top:0;
		}

		table.menu{
			position: absolute;
			left: 10px;
			top: 85px;
			text-align: center;	
			width: 100%;
			text-transform: uppercase;
			font-size: small;
		}

		td{
			text-align: center;
			background: url("../img/menu1.png");
			font-size: small;
			text-transform: uppercase;
		}

		td:hover{
			background-color: green;
			background: url("../img/menu2.png");
			color: grey;
		}

		table.submenu{
			visibility: hidden;
			position: absolute;
			font-size: small;
		}

		iframe{
			position: absolute;
			left: 10px;
			top: 107px;
			width: 100%;
			background-color: silver;
		}
		</style>
	</head>
	<body>
		<!--logomarca-->
		<a href="index.htm"><img id="logo" src="img/logo.png" border=0></a>
		
		<!--frame de conteudo-->
		<iframe name="conteudo" id="conteudo" width="100%" height="80%"></iframe>
		
		<!--tabela usada como menu-->
		<table class="menu" name="menu">
			<tr>
				<td onmouseover="showmenu('conteudo')" onmouseout="hidemenu('conteudo')" width="20%">
					Conteúdo<br/>
					<table class="submenu" id="conteudo" width="190">
						<tr><td class="menu">
							<a href="include/pagina1.htm" target="conteudo">pagina1</a>
						</td></tr>
						<tr><td class="menu">
							<a href="include/pagina2.htm" target="conteudo">pagina2</a>
						</td></tr>
						<tr><td class="menu">
							<a href="include/pagina3.htm" target="conteudo">pagina3</a>
						</td></tr>
						<tr><td class="menu">
							<a href="include/pagina4.htm" target="conteudo">pagina4</a>
						</td></tr>
						<tr><td class="menu">
							<a href="include/pagina6.htm" target="conteudo">pagina5</a>
						</td></tr>
						<tr><td class="menu">
							<a href="include/pagina6.htm" target="conteudo">pagina6</a>
						</td></tr>
					</table>
				</td>
			</tr>
		</table>
	</body>
</html>
Só que eu coloquei um link no menu para carregar uma apresentação de slides em flash no iframe, só que quando a apresentação está em exibição o submenu volta a aparecer apenas atrás do iframe, escondido.

Alguém tem alguma sugestão de como fazer isso? preciso disso urgente, já tentei várias coisas e nada.

 

Valeu!!! http://forum.imasters.com.br/public/style_emoticons/default/natal_laugh.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

Carutcho    0

Carutcho
Postado

Tem como postar o código javascript do menu tb ?Caso preferir pode tb postar em algum ambiênte de testes essa pagina e mandar o link para gente poder dar uma olhadinha pra você..

 

 

abssss

Compartilhar este post

Link para o post
Compartilhar em outros sites

Buongiorno    0

Buongiorno
Postado

Olá Bruno.

 

Utilize a propriedade "z-index" do css para fazer a correta sobreposição dos elementos da página.

 

Até mais.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Bruno_Ferreira    1

Bruno_Ferreira
Postado

Desculpem a demora....

 

Carutcho, segue aí o código javascript pra você dar uma olhada.

 

function showmenu(elemento)
{
	document.getElementById(elemento).style.visibility="visible";
}
function hidemenu(elemento)
{
	document.getElementById(elemento).style.visibility="hidden";
}

esse código é simples, apenas altera a visibilidade dele de hidden pra visible e vice-versa.

 

 

 

Buongiorno, nunca ouvi falar dessa propriedade não, você poderia mandar um código como exemplo, e como eu aplico essa propriedade?

 

Valeu meus caros!!!

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

o z-index usado juntamente com algum position(relative, absolute), controla a ordem de exibição no eixo Z!

Ou seja, o perpendicular à tela..

 

Para deixar um elemento mais próximo de você, na frente de outro, basta colocar para ele, um z-index maior doque o outro.

algo como:

elementoAtras {
 position: relative/absolute;
 z-index: 1;
}
elementoNaFrente {
 position: relative/absolute;
 z-index: 2;
}
Pseudo código.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Bruno_Ferreira    1

Bruno_Ferreira
Postado

o z-index usado juntamente com algum position(relative, absolute), controla a ordem de exibição no eixo Z!

Ou seja, o perpendicular à tela..

 

Para deixar um elemento mais próximo de você, na frente de outro, basta colocar para ele, um z-index maior doque o outro.

algo como:

elementoAtras {
 position: relative/absolute;
 z-index: 1;
}
elementoNaFrente {
 position: relative/absolute;
 z-index: 2;
}
Pseudo código.

William,

 

Usei o z-index da seguinte forma no código acima:

<style>
		body{
			font-family: arial;
		}

		#logo{
			position: absolute;
			width: 100%;
			height:85;
			left:10;
			top:0;
		}

		table.menu{
			position: absolute;
			left: 10px;
			top: 85px;
			text-align: center;	
			width: 100%;
			text-transform: uppercase;
			font-size: small;
			[b]z-index: 3;[/b]
		}

		td{
			text-align: center;
			background: url("../img/menu1.png");
			font-size: small;
			text-transform: uppercase;
		}

		td:hover{
			background-color: green;
			background: url("../img/menu2.png");
			color: grey;
		}

		table.submenu{
			visibility: hidden;
			position: absolute;
			font-size: small;
		}

		iframe{
			position: absolute;
			left: 10px;
			top: 107px;
			width: 100%;
			background-color: silver;
		}
		</style>

Só que não deu em nada, ou seja, a tabela que está como submenu coloquei o z-index maior que os outros elementos, mas nada, continua aparecendo atrás da apresentação.

Só lembrando, no iframe que fica embaixo do menu, está sendo carragada uma apresentação de slides em flash, mas quando carrego alguma outra página html qualquer funciona perfeitamente.

Também tenho mais um problema que descobri agora, ao adicionar a propriedade z-index, a propriedade visibility, pára de funcionar no Internet Explorer.

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Para o flash aceitar z-index, você precisa definir wmode transparente nele.

Estranho, coloca um link para vermos online, mas eu prefiro usar display: block/none, em vez de visibility.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Bruno_Ferreira    1

Bruno_Ferreira
Postado

Para o flash aceitar z-index, você precisa definir wmode transparente nele.

Estranho, coloca um link para vermos online, mas eu prefiro usar display: block/none, em vez de visibility.

William,

 

O f*** é que o site está em um servidor do trabalho que é fechado(só intranet), então vai ser difícil colocar online de lá, mas vou pegar um pedaço do site e colocar online pra vocês verem.

 

Não tenho muita experiencia em flash não, poderia postar um exemplo aí por favor? Na verdade o que eu faço é converter um power point para flash usando um aplicativo, mas posso tentar editá-lo posteriormente.

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