Webly

Internet + Humana

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

Assine:

Navegação

[jquery] Menu E Submenu Vertical

Menu dropdown vertical com jquery

Escrito por Lucasbr em JavaScript e Ajax. Data: 28/07/2008

Ver tópico original no fórum.

Bom, segue um exemplo de um menu com submenu vertical usando jquery.

Vc pode ver um exemplo aqui: http://forum.ievolutionweb.com/lucas/tutor...tical/menu.html

Download do exemplo: http://forum.ievolutionweb.com/lucas/tutor...rtical/menu.zip

CODE

<html>
<head>
    <link href='style.css' type='text/css' rel='stylesheet'/>
    <script src='jquery.js' type='text/javascript'></script>
    <script>
    var obj = null;

function checkHover() {
    if (obj) {
        obj.find('ul').fadeOut('fast');
    } //if
} //checkHover

$(document).ready(function() {
    $('#Nav > li').hover(function() {
        if (obj) {
            obj.find('ul').fadeOut('fast');
            obj = null;
        } //if

        $(this).find('ul').fadeIn('fast');
    }, function() {
        obj = $(this);
        setTimeout(
            "checkHover()",
            400);
    });
});
    </script>
</head>

<body>

    <ul id="Nav">
        <li>
            Item 1
            <ul class="Menu">
                <li>Sub item 1</li>
                <li>Sub item 2</li>
            </ul>
        </li>

        <li>
            Item 2
            <ul class="Menu">
                <li>Sub item 3</li>
                <li>Sub item 4</li>
            </ul>
        </li>
    </ul>

</body>
</html>

Você gostou? Comente no fórum!