Efeitos Js

[tonzinhu]

Boa noite galera,

estou iniciando no JS e gostaria da ajuda de vocês.

Estou querendo fazer efeitos em menus e etc.

São coisas simples, mas que não achei exatamente explicando como fazer, e sim codigos prontos.

Queria um exemplo explicando SÓ como fazer a parte do efeito dos submenus abrindo.

Tipo esse daki http://www.kjump.com.br/

Obs: só quero que me ensinem a parte do efeito por favor E sem Jquery, JS puro.

Obrigado.

Editado Dezembro 11, 2011 por tonzinhu

[fiote]

A. "São coisas simples"

B. "efeito dos submenus abrindo"

C. "E sem Jquery, JS puro"

Escolha dois.

Editado Dezembro 12, 2011 por fiote

[tonzinhu]

Não entendi amigo.

O efeito é o mesmo do menu do site que enviei.

Só que não queria usando Jquery.

ou seja, só queria que me explicassem como fazer o efeito do menu abrindo daquele jeito para eu poder aprender e utilizar da minha forma.

[fiote]

A. "São coisas simples"

B. "efeito dos submenus abrindo"

C. "E sem Jquery, JS puro"

Escolha dois.

Era uma piada...

Você quer o efeito do submenu abrindo, quer que seja simples, e quer que seja sem jquery. É impossível atender essas 3 restrições ao mesmo tempo, aí eu falei pra você escolher duas delas.

Efeitos são chatos e complicados de se fazer. Frameworks ajudam MUITO a abstrair isso tudo.

Segue um exemplo bem tosko de como é chato fazer um efeito simples de mudar a largura de um div de 200px para 100px (mal feito, por sinal) :

<script>

function iniciaEfeito() {
    mostraEfeito('meuElemento','width',100,1,5);
}

function mostraEfeito(idElemento,atributo,valorDestino,valorTick,intervaloTick) {
    var objeto = document.getElementById(idElemento);
    var atual = parseInt(objeto.style[atributo]);
    var novo = atual - valorTick;
    if (novo < valorDestino) {
        novo = valorDestino;
        objeto.style[atributo] = novo;
    } else {
        objeto.style[atributo] = novo;
        setTimeout('mostraEfeito("'+idElemento+'","'+atributo+'",'+valorDestino+','+valorTick+','+intervaloTick+')',intervaloTick);
    }
}

</script>

<input type='button' value='clickme' onclick='iniciaEfeito()'/>

<div id='meuElemento' style='border:1px solid black; height:200px; width:200px'></div>

Editado Dezembro 12, 2011 por fiote

[tonzinhu]

pow, foi mals, hehe. Ainda não entendo piadas de Js, só de PHP hehe.

Então, é isso mesmo que eu queria, algo bem simples.

Poderia explicar oque cada coisa faz ?

Agradeço pela atenção amigo.