Ir para conteúdo

POWERED BY:

Arquivado

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

Erik

Fechar layer pelo tempo

Por , em Javascript

Recommended Posts

Erik    2

Erik
Postado

Boa tarde pessoal,

 

To com um a dúvida aqui, parece simples, mas num to conceguindo.

 

To fazendo um menu com css e javascript (não sei se é bom usar javascript se quiser fazer um site nos padrões, se alguem poder me ajudar nessa dúvida também) com o intuito de que quando a pessoa passar o mouse sobre um determinado item ele abre uma nova camada com submenus, algo bem parecido com um menu drop down, mas a coisa complica quando o submenu não é tão proximo do menu principal.

 

Bom ai vai um resumo do que já fiz:

 

- To usando Dreamweaver

- Criei as camadas e coloquei bahaviors (ou código javascript) para que quando eu passar o mouse sobre uma área ele exiba a camada correpondente ao submenu

- Criei as camadas e o conteúdo

 

Agora o que preciso:

 

- Que quando eu tire o mouse do link o submenu que está exibido fique um tempo aparecendo e feche em seguida caso o mouse não esteja sobre ele (tipo uns 3 segundos +ou-, tenho que ver ainda)

- Que me informem se isso é compativel com as normas da W3C (Web Standards)

- Que me perdoem se aqui não for o lugar pra esse post

- Que movam esse post pro local correto se tiverem que me perdoar no item acima

 

Por favor pessoal me ajudem, estou precisando muito disso

 

Abraços, Erik

Webdesign/Design gráfico

Compartilhar este post

Link para o post
Compartilhar em outros sites

Guilherme Rambo    4

Guilherme Rambo
Postado

Movendo para javascript...

 

[]'s

Compartilhar este post

Link para o post
Compartilhar em outros sites

Erik    2

Erik
Postado

Pocha pessoal, da uma força ai.

 

Será que é possível isso?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Daniel-DF    0

Daniel-DF
Postado

testa e adapta:

 

<script type="text/javascript" src="jquery.js"></script>
	<script type="text/javascript" src="interface.js"></script>
	<style type="text/css">
	#tooltip
	{
		background-color: #444;
		border: 1px solid #fff;
		padding: 10px;
		color: #ccc;
		width: 200px;
		display: none;
	}
	</style>
</head>
<body>
	<a href="#">hover to see the tooltip with a delay of 1 second</a>
	<div id="tooltip">This tooltip will not flicker anymore</div>
	<script type="text/javascript">
		$(document).ready(
			function()
			{
				$('#tooltip').css('opacity', 0.1);
				$('a')
					.bind(
						'mouseover',
						function()
						{
							$('#tooltip').stopAll().pause(1000).fadeTo(400,1);
						}
					)
					.bind(
						'mouseout',
						function()
						{
							$('#tooltip').stopAll().fadeTo(400,0, function(){$(this).hide();});
						}
					)
			}
		);
	</script>

</body>

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