[Resolvido] Estabelecer tempo no hover

[marcosfj1 0]

Galera seguinte...tenho um menu dinamico que ao posicionar o mouse em cima do menu, aparece as opcoes

 

Mas esta extremamente rapido, e isso nao é agravel, pq as vezes o cara nao tem tanta habilidade com o mouse e acaba ficando perdido....entao queria saber como estabelecer um tempo para este recurso de link o hover...no caso eu faço da seguinte forma

 

#menu_categoria li:hover ul, li.over ul { display: block; }

 

beleza ao posiconar o hover aparece la as opcoes....como eu poderia fazer para que só mostrasse apos 1 segundo por exemplo.

 

Eu sei q é possivel pois no submarino o menu nao e tao rapido....alguem pode me dar alguma dica?

 

 

Valeu

[William Bruno 1501]

com css puro é impossível.

 

você terá que usar javascript.

o método setTimetout() será necessário para que você consiga esse efeito.

 

bons estudos.

[marcosfj1 0]

com css puro é impossível.

 

você terá que usar javascript.

o método setTimetout() será necessário para que você consiga esse efeito.

 

bons estudos.

 

 

Opa cara valeu....tava perdido aqui tentando achar algo de css, vou estudar este metodo q me passou, e tentar fazer algo

 

valeu

[marcosfj1 0]

Cara peço sua ajuda, eu dei uma lida nesse metodo q você me passou o setTimeOut() mas nao consigo aplica-lo...Pq pelo q eu li ele é uma funcao que faz com q as outras funcoes sejam executadas no tempo q ele determina em milesegundos, ai vendo codigos por ai tentei isso:

 

function mostra()

{

var variavel = setTimeout(function,5000);

}

 

Para esperar 5 segundos

 

Mas qual o problema eu fiz este menu dinamico usando o tutorial do Maujor e nele eu trabalho com CSS e nao com nada JavaScript....ai q to confuso como eu posso controlar o tempo q uma funcao será executada em JS se eu nao trabalho em JS e sim em CSS....eu simplesmente crio o CSS e chamo nos lugares q quero q aconteca

 

Eu teria que largar tudo q eu fiz e fazer a geracao do menu em JS?

Olha só meu codigo CSS é este:

#menu_categoria ul {     
margin: 0;    
padding: 0;   
list-style: none;    
width: 185px;  

}

#menu_categoria ul li { 
position: relative;   
}

#menu_categoria li ul  {     
position: relative;    
left: 5px;    
display: none; 
padding:1px; 
}

#menu_categoria ul li a{ 
display: block; 
text-decoration: none; 
color: #777; 
background: #fff; 
padding:4px; 	 
}


#menu_categoria ul {     
margin: 0;    
padding: 0;   
list-style: none;    
width: 185px; 
border-bottom: 1px solid #ccc;  

}

#menu_categoria li:active ul, li.over ul { display: none; }

#menu_categoria .categoria {
display: block;
padding: 0 0 0 9px;
background: url(../../imagem/marca_menu.gif) no-repeat left center;
text-decoration: none;
color:#333333;
font-size:12px;
}
#menu_categoria .ativo .categoria {
color:#000;
}
#menu_categoria .marca {
font-size:11px;
color:#666;
text-decoration:none;
padding-left:7px;
width: 143px; 
}

#menu_categoria a:hover { 
       font-size:12px; 
       color:#666; 
       text-decoration:underline; 
       font-weight: bold;        
}

 

Depois na DIV q crio o meu eu chamo o id="menu_categoria"

 

Eu to um pouco perdido no que eu devo fazer

 

Valeu

[William Bruno 1501]

.ai q to confuso como eu posso controlar o tempo q uma funcao será executada em JS se eu nao trabalho em JS e sim em CSS....eu simplesmente crio o CSS e chamo nos lugares q quero q aconteca

 

Eu teria que largar tudo q eu fiz e fazer a geracao do menu em JS?

tudo não.

 

apenas a parte que abre.

remova o :hover do css, e faça o efeito de abrir com javascript.

 

eventos onmouseover e onmouseout

[marcosfj1 0]

ta entao aquilo q estou fazendo no hover do css eu tenho q remover, e tentar criar um funcao JS para fazer isso....vou pesquisar estes eventos q me passou e como poder fazer eles terem o msm efeito do hover no css.....hehe acho q nao vou dar conta nao, mas vou tentar aqui e ver se consigo algo

 

Valeu

 

JavaScript é um problema viu haha

[marcosfj1 0]

Consegui cara, crie o JS e consegui chamar a funcao para abrir o menu

 

Mas alem do detalhe do tempo q vou ver agora como posso arrumar e diminuir o tempo pra chamar a funcao....no Chrome e FireFoz já esta vindo aberto as opcoes....tem alguma idea do pq?

 

Valeu

 

===================================

 

Bom cara tentando fazer sobre a questao do tempo, tentei colocar 5 segundos para cada chamada da funcao, ou seja demoraria 5 segundos para abrir as opcoes a partir do momento q o mouse est sob a link....ai fiz seguindo o q achei na net:

 

window.setTimeout(function mouse_over_menu(objDiv)
{
objDiv.className = 'itemOver';

}, 5000)

 

Depois la na DIV eu chamei a funcao onmouseover="mouse_over_menu(this);" ai beleza abriu as opcoes, mas continua sem respeitar o tempo de 5 segundos....este exemplo nao sei se esta certo apenas achei na net e resolvi testar....se puder me ajuda a melhorar ele

 

Valeu

[William Bruno 1501]

seguinte:

 

function mouse_over_menu(objDiv)
{
       window.setTimeout( open_menu, 500, objDiv );//5 segundos é muuuuuuuito tempo
}
function open_menu( objDiv )
{
       objDiv.className = 'itemOver';

}

 

javascript é a solução, o 'problema', é não saber javascript.

 

e ai você chama da mesma forma

onmouseover="mouse_over_menu(this);" 

pronto. Agora você chama uma função, que vai esperar meio segundo para realmente abrir o sub.

para começarem fechados, ou você manda um display: none; no css [não recomendo], ou então faz isso com javascript [percorrendo todos os submenus, e escondendo eles]

[marcosfj1 0]

Amigo nao deu certo nao....agora parou de abrir as opcoes

 

Eu peguei copie eu colei a funcao q criou....na chamada da funcao nem mexi pois já esta certo...mas ao add a sua funcao acabou nao aparecendo mais

 

Mudei disso:

function mouse_over_menu(objDiv)
{
objDiv.className = 'itemOver';
}

setTimeout(mouse_over_menu, 5000)  

 

Para isso:

function mouse_over_menu(objDiv) 
{ 
       window.setTimeout( open_menu, 500, objDiv );//5 segundos é muuuuuuuito tempo 
} 
function open_menu( objDiv ) 
{ 
       objDiv.className = 'itemOver'; 

}

 

Valeu

 

PS: o tempo exagerado era pra notar mesmo se tinha alguma mudanca hehe

[William Bruno 1501]

em qual elemento você esta tentando disparar ?

 

pq se o UL esta escondido, você precisa disparar no LI pai dele.

e então apartir desse LI, procurar o UL filho dele, e ai sim fazer o show.

 

o teu this não faz sentido.

Não comentei antes, pq so estava corrigindo a chamada da função.

[marcosfj1 0]

Vou tentar explicar melhor...primeiro qto ao this eu só mantive pq você nao falou nada, ai mantive o exemplo da internet

 

Sobre a onde estou chamando funciona assim:

<div style="margin:5px;" onmouseover="mouse_over_menu(this);">
  <ul class="semMargem" id="nav" >
  //BOM AQUI EU MOSTRO OS DEPARTAMENTOS, ELES JÁ ESTAO A MOSTRA NO SITE
      <li ><a  class="categoria" href="?l=produto&categoria=<?=$cp['id_produto_categoria'] ?>" title="<?=$cp['nome'] ?>" ><?=$nome ?></a></li>
      // BOM SE O DEPARTAMENTE TIVER UMA MARCA DE PRODUTO NELE, AI EU MOSTRO
      <ul style="margin-bottom:5px;" >
         //AQUI É A LISTAGEM DAS MARCAR, ELAS SÓ DEVEM APARECER QDO O CARA CLICAR EM UM DEPARTAMENTO, OU SEJA ELAS ESTAO ESCONDIDAS
         <li><a  class="marca" style="color:#06C;" href="?l=produto&categoria=<?=$cp['id_produto_categoria'] ?>&marca=<?=$cp2['id_produto_marca'] ?>" title="<?=$cp2['nome'] ?>" ><?=$nome ?></a></li>

//DEPOIS FECHO OS DOIS ULs EM ABERTO

 

Entao eu coloquei a funcao onmouseover="mouse_over_menu(this);" na DIV e como havia funcionado achei q era o lugar certo para ela, e estava funcionando, só nao funciona qdo coloco a funcao q me passou

 

Valeu

 

====================================

Cara fui ver o erro que gerou na barra de status do IE e apareceu isso 'undefined' é nulo e nao é um objeto

Isso só apareceu apos colocar o q me passou

 

O CSS:

#menu_categoria .itemOver li:hover ul, li.over ul { display: block; }

 

Falou

[William Bruno 1501]

não não cara.. essa DIV nem deveria estar ai..

 

putz..

[marcosfj1 0]

não não cara.. essa DIV nem deveria estar ai..

 

putz..

 

 

Bom beleza vou retirar a DIV, apesar de ela estava funcionando antes da funcao....e vou testar em todos os UL e LI um por um chamando a fucnao q me passou ate ver o q acontece, ai depois veio te falar o q houve

 

Valeu

 

==============================

 

Entao vamos lá retirei a DIV, já q você sugeriu que ela nao estivesse la, beleza perdi um pouco de margin mas td bem

 

Depois fui inserindo a funcao: onmouseover="mouse_over_menu(this);" em todas as ULs e em todas as LIs, claro separadamente, o resultado foi o mesmo nao apareceu nada, e o erro do navegador continuou o undefined

 

Bom ai o q eu fiz, ao invez de chamar a mouser_over_menu eu chamei open_menu como resultado abriu as opcoes na primeira UL porem claro sem fazer uso do tempo

 

Entao eu nao sei mas parece q o problema esta em:

function mouse_over_menu(objDiv) 
{ 
       window.setTimeout(open_menu, 1500, objDiv );//5 segundos é muuuuuuuito tempo 
} 

 

Eu nao entendo nada de JS, hehe como eu disse pra mim é um problema hehe.....mas tudo indica q o erro esta ai.....se quiser eu posto meu codigo todo, ate o CSS, mas pelos testes esta tudo funcionando exceto qdo chamo esta funcao

 

Valeu

[William Bruno 1501]

você esta se esquecendo dessa parte do meu post:

e então apartir desse LI, procurar o UL filho dele, e ai sim fazer o show.

 

eu to num mac agora, não consegui testar direito.. a idéia era mais ou menos essa:

 

<html>
<head>
<style type="text/css">
* {
margin: 0;
padding: 0;
list-style: none;
}
#menu {
margin: 40px;	
}
#menu li {
float: left;
position: relative;
padding: 0 15px;
background: #ccc;
}
#menu a {
color: #fff;
}
#menu ul {
background: #ccc;
position: absolute;
left: 0;
top: 18px;
width: 150px;
}
#menu li li {
float: none;
}
</style>
<script type="text/javascript">
var tot = 0;
window.onload = function(){
change_display( id('menu'), 'ul', 'none' );


var lis = id('menu').getElementsByTagName('li');
for( var i=0; i<lis.length; i++ )
{
	if( lis[i].getElementsByTagName('ul')[0]!=undefined )
	{
		lis[i].onmouseover = function(){
			change_display( id('menu'), 'ul', 'none' );

			window.clearTimeout( tot );
			tot = window.setTimeout( change_display, 800, this, 'ul', 'block' );
		}
	}
}
}
function change_display( el, tagName, dpy ){
var els = el.getElementsByTagName( tagName );
for( var i=0; i<els.length; i++ )
{
	els[i].style.display = dpy;		
}
}
function id( el ){
return document.getElementById( el );
}
</script>	
</head>
<body>
<ul id="menu">
	<li><a href="">Item 1</a></li>
	<li><a href="">Item 2</a>
		<ul>
			<li><a href="">SubItem 1</a></li>
			<li><a href="">SubItem 2</a></li>
		</ul>
	</li>
	<li><a href="">Item 3</a>
		<ul>
			<li><a href="">SubItem 1</a></li>
			<li><a href="">SubItem 2</a></li>
			<li><a href="">SubItem 3</a></li>
		</ul>			
	</li>
	<li><a href="">Item 4</a>
		<ul>
			<li><a href="">SubItem 1</a></li>
			<li><a href="">SubItem 2</a></li>
			<li><a href="">SubItem 3</a></li>
			<li><a href="">SubItem 4</a></li>
		</ul>			
	</li>
</ul><!-- /menu -->


</body>
</html>

[marcosfj1 0]

Amigo, primeiro desculpa ter demorado pra dar as caras por aqui.

 

Seguinte agradeco ai ter feito este codigo, pra gente ta testando, mas aqui nao funcionou nao, eu resolvi testar o q você me mandou pra caso desse certo eu partir dele e tentar arrumar o meu, mas ocorre o mesmo detalhe q estava havendo no meu, nao abre as opcoes do menu

 

E nao sei se é util mas da aquele mesmo erro de undefined é nulo e nao é um objeto

 

E Sobre o LI eu testei em todos cara, todos os UL e LI eu testei pra ver se aparecia algo, mas em nenhum apareceu

[marcosfj1 0]

Olá

 

Bom pesquisando na net sobre isso de 'undefined' é nulo ou não é um objeto

 

E claro com a ajuda de um cara, percebi que a forma correta da funcao ser feita e acontecer o q eu queria era:

function mouse_over_menu(div_id) 
{         
window.setTimeout("open_menu('" + div_id + "')", 2000);
} 
function open_menu(div_id) 
{         
document.getElementById(div_id).className = 'itemOver';  
}

 

E depois chamar ela na DIV:

<div style="margin:5px;" id="div_dep" onmouseover="mouse_over_menu('div_dep');">

 

Bom funcionou exatamente como eu queria esperou 2 segundos em cima do DEPARTAMENTO antes de abrir...

 

 

Masss....

 

Tem um problema hehe

 

Eu tenho uma lista:

Departamento 1

Departamento 2

Departamento 3

Departamento 4

Departamento 5

 

Bom se eu paro no Departamento 3 ele espera o tempo certo q eu determinei....porem se eu mudo pro Departamento 4 ele já nao espera...parece q nao zera o tempo teria um jeito de zerar este tempo a cada chamada da funcao?

 

Será que alguem sabe me ajudar?

 

Valeu

[marcosfj1 0]

Topico resolvido