Vamos la
O q eu quero é o seguinte eu tenho uma lista de departamentos, ai qdo o cara passa o mouse em cima do nome desse departamento abre-se em baixo um lista com cada marca referente aquele departamento. Bem isso esta funcionando, porem este processo de abrir estava mto rapido, queria q fosse mais assim, colocou o mouse em cima do nome do departamente e depois de uns 2 segundos abrisse as opcoes.
Pesquisando vi q tinha q ser utilizado um funcao JavaScript, a setTimeOut(); que é responsavel por setar um tempo para que a outra funcao JavaScript aconteca...bom ai seguindo o q um cara me passou eu fiz este controle, porem agora nao esta mais abrindo as opcoes de marca....vou postar meu codigo para vcs verem como tudo é feito:
Primeiro o CSS:
#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 .itemOver li:hover ul, li.over ul { display: block; }
Eu fiz este CSS baseado em uma explicacao de um tutorial do Maujor, a unica coisa q tive que alterar foi esta ultima linha onde criei este itemOver para que controlasse o mostrar as opcoes por JavaScript
Bom agora vem o JavaScript:
<script language="JavaScript">
function mouse_over_menu(objDiv)
{
window.setTimeout(open_menu, 1500, objDiv );
}
function open_menu(objDiv)
{
objDiv.className = 'itemOver';
}
</script>
Reparem que na funcao open_menu() eu chamo o itemOver....e na funcao mouse_over_menu() eu coloco q esta funcao será executada a cada 1500 milesegundos....esta foi a funcao q um amigo fez dizendo q daria certo
Agora a geração do menu, que é feito de modo dinamico com PHP:
<div id="menu_categoria" class="boxed" >
<h2 class="title">Departamentos</h2>
<div style="margin:5px;" onmouseover="CHAMADA DA FUNCAO">
<?
//
$sql = "BUSCO DEPARTAMENTOS ATIVOS";
$req = mysql_query($sql);
//
if (mysql_num_rows($req)) {
?>
<ul class="semMargem" id="nav" >
<?
//
while ($cp = mysql_fetch_array($req)) {
//
$nome = $cp['nome'];
if ($cp['id_produto_categoria'] == $_GET['categoria'])
$nome = '<b>'.$cp['nome'].'</b>';
?>
//ATRAVES DO LI MOSTRO TODOS OS DEPARTAMENTOS
<li ><a class="categoria" href="?l=produto&categoria=<?=$cp['id_produto_categoria'] ?>" title="<?=$cp['nome'] ?>" ><?=$nome ?></a></li>
<?
//
if ($cp['id_produto_categoria'] OR $_GET['categoria']) {
//
echo '<ul style="margin-bottom:5px;" >';
$sql = "BUSCO TODAS AS MARCAS REFERENTES AOS DEPARTAMENTOS ";
$req2 = mysql_query($sql);
//
while ($cp2 = mysql_fetch_array($req2)) {
//
$nome = $cp2['nome'];
if ($cp2['id_produto_marca'] == $_GET['marca'])
$nome = '<b>'.$cp2['nome'].'</b>';
?>
//MOSTRO AS MARCAS QUE CADA DEPARTAMENTO POSSUI....AQUI ACONTECE A MAGICA OU SEJA QDO O CARA PARA O MOUSE EM CIMA DE UM DEPARTAMENTO ESTA LINHA QUE SERÁ MOSTRADA
<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>
<?
}
echo '</ul>';
}
?>
<? } ?>
</ul>
Como podem ver na DIV eu chamo a funcao....agora vem o problema:
-Se eu chamo:
<div style="margin:5px;" onmouseover="open_menu(this);">Blz passo o mouse sobre o nome do departamento, e aparece as marcas relacionadas a ele....porem claro nao é setado o tempo para chamar a funcao
-Mas se eu chamo:
<div style="margin:5px;" onmouseover="mouse_over_menu(this);">OU seja chamei a funcao que chama a outra e determina um tempo para que seja executada...NAO FUNCIONA...ele simplesmente deixa de abrir as opcoes de cada departamento....entao pra mim que nao sei nada de JS mostra q o erro deve estar nessa funcao, mas nao sei o q pode ser
Alguem sabe me ajudar???? Queria mto conseguir fazer isso
Detalhe qdo eu passo o mouse em cima do departamento, aparece uns erros na barra de status do IE e ao ver o que esta la é: 'undefined' é nulo e nao é um objeto
POR FAVOR ALGUEM ME AJUDA
