Webly

Internet + Humana

Ir para o Conteúdo
Ir para o Menu
Ir para a Busca
Ir para o Login

Assine:

Navegação

[script] Menu Quicante! Bouncing Menu!

Scriptzin by pxzin

Escrito por PXzin em JavaScript e Ajax. Data: 16/05/2008

Ver tópico original no fórum.

PXzin BounceMenu Versão 1.0.0

Recentemente vi esse menu em algum lugar e não marquei onde. Quando precisei, não achei!
Precisei então criar meu próprio scriptzin.
Então tá ae:

- Demonstração: http://www.vertic.com.br/teste/bounceMenu/
- Modo de uso: Para utilizar o script é necessário JQuery 1.2.3 e o plugin Easing 1.3 e uma estrura de menus como a seguinte:

CODE

    //apenas exemplo
    <dl id="menu">
            <dt>#Menu-1#</dt>
                <dd>
                    <ul>
                        <li>#Sub-menu#</li>
                        <li>#Sub-menu#</li>
                        <li>#Sub-menu#</li>
                        <li>#Sub-menu#</li>
                        <li>#Sub-menu#</li>
                    </ul>
                </dd>
            <dt>#Menu-2#</dt>
                <dd>
                    <ul>
                        <li>#Sub-menu#</li>
                        <li>#Sub-menu#</li>
                    </ul>
                </dd>
            <dt>#Menu-3#</dt>
                <dd>
                    <ul>
                        <li>#Sub-menu#</li>
                        <li>#Sub-menu#</li>
                        <li>#Sub-menu#</li>
                        <li>#Sub-menu#</li>
                        <li>#Sub-menu#</li>
                        <li>#Sub-menu#</li>
                        <li>#Sub-menu#</li>
                        <li>#Sub-menu#</li>
                    </ul>
               </dd>
            <dt>#Menu-4#</dt>
                <dd>
                    <ul>
                        <li>#Sub-menu#</li>
                    </ul>
                </dd>
        </dl>

- O Script para o menu usando o padrão acima é o seguinte:

CODE

        $(function(){
            //SCRIPTZIN BY PXZIN
            //USE SEM MEDO
            //NÃO ME RESPOSÁBILIZO POR USO INCORRETO
            $("#menu dt").nextAll("DD").hide();
            $("#menu dt:first").next("DD").slideDown("slow","easeOutBounce");
            $("#menu dt").click(function(){
                $("#menu dd:visible").slideUp("slow","easeOutBounce");
                $(this).next("DD").slideDown("slow","easeOutBounce");
            });
        });

Estou tentando melhorar um pouco mas acho que não deve ser nada muito além disso.
Vejam ai se gostaram, o CSS é por conta de vocês.

Você gostou? Comente no fórum!