Ir para conteúdo
Fórum Script Brasil
  • 0

Menu com timeout


Rafael Laurindo

Pergunta

Pessoal, como fazer um menu do tipo que quando clicamos, ou colocamos o mouse em cima, ele aparece, mas não de vez, mas com atraso? De uma olhada nesse link

http://www.tgi.com.pt/link/tabSlideOut.html

Eu implementei um dalay, mas não sei se é assim que faz. Olha o código do delay.



Time = {
     cls : function()
     {
         //Em segundos
         this.delay = function(sec)
         {
             //instancia a classe Date, e essa retorna a hora atual em milisegundos
             var oldDate = new Date();
             oldDate /= 1000;
             var curDate = null;
             do{

                 curDate = new Date();
                 curDate /= 1000;
             }
             while(curDate-oldDate < sec);
         };
     },
 };

Qualquer coisa, façam as devidas alterações pra milisegundos.

Editado por Rafael Laurindo
Link para o comentário
Compartilhar em outros sites

8 respostass a esta questão

Posts Recomendados

  • 0

Seria um efeito para que o menu aparecesse aos poucos ou simplesmente uma forma de fazer o menu aparecer "de vez" após passado determinado tempo?

Se for a segunda opção, bastaria algo assim:

meuMenu.onclick=function()
{
    setTimeout(
    function()
    {
        outraDiv.style.visibility="visible"
    },
    5000 //5 seg
    )
}

Link para o comentário
Compartilhar em outros sites

  • 0

Fiz diferente John, mas o firebug está mostrando um erro, e na hora de contrair o menu ele não contrai, veja.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title></title>

<script type="text/javascript">

createSubMenu = function (obj, id)
{
    var el = document.getElementById(id);
    var elStyle = el.style;
    elStyle.display = 'table-cell';
    elStyle.verticalAlign = 'middle';
    setTimeout(eval("elStyle.display = 'block'"), 3000);

    var body = document.getElementsByTagName('body');
    body.onclick = function(){
        elStyle.display = 'none';
    }

}

</script>

</head>

<body>

<div style="background-color: red; text-align: center; display:table-cell; vertical-align: middle; height: 25px; width: 100px;" onclick="createSubMenu(this, 'subMenu1')">blabla</div>
<div style="background-color: red; text-align: center; height: 25px; width: 100px; display: none;" id="subMenu1">blabla1</div>
<div style="background-color: red; text-align: center; height: 25px; width: 100px; display: none;" id="subMenu2">blabla2</div>

</body>

</html>

Editado por Rafael Laurindo
Link para o comentário
Compartilhar em outros sites

  • 0

Esse eval não está correto, ao invés disso use uma função. O que poderia funcionar é algo assim:

new Function("codigo entre aspas como string")
Mas nesse caso nem funcionaria por conta do escopo (a variável elStyle não estaria definida). O melhor é fazer da maneira convencional:
function()
{
...codigo...
}

Link para o comentário
Compartilhar em outros sites

  • 0

"veja se isso ajuda"?! Mais que isso, essa é uma perfeita solução, você é o cara. O segredo está no setInterval e no clearInterval do objeto window, e não no setTimeout. Só fiquei com uma dúvida quanto ao uso do setInterval, porque usou no segundo parâmetro, 1000/60, e não 0, ou outro valor?

Editado por Rafael Laurindo
Link para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.



  • Estatísticas dos Fóruns

    • Tópicos
      152,3k
    • Posts
      652,3k
×
×
  • Criar Novo...