Hoje tentaremos fazer jus ao slogan da biblioteca jQuery “Write less, do more” e faremos um menu drop down, com apenas 6 linhas de código JavaScript.

Algumas explicações prévias:

Ha algum tempo atrás, publiquei um post sobre como fazer um menu com jQuery, utilizando um método de evento do mouse (hover). Usaremos o mesmo método, mas de uma forma um pouco diferente. Por padrão o metodo .over(), espera duas funções como argumentos, uma para quando o mouse estiver em cima (over) e outra quando o mouse sair do ponto (out).  Neste menu utilizaremos o encadeamento de métodos do jQuery e solucionaremos com apenas uma função, utilizando o sliderToggle().

HTML

A estrutura HTML é bem simples. É uma <ul> com seus nós filhos <li>´s. Filiaremos os sub-menus, que também são estrutura de <ul> e <li>,  para fazer o nosso menu com sub-nível. O interessante é aprender o conceito, depois disto você poderá fazer a estrutura de várias formas e manipular DOM através do jQuery.

<ul>
    <li><a href='#'>Item um</a>
        <ul>
            <li><a href='#'>Sub-Item um / um</a></li>
            <li><a href='#'>Sub-Item um / dois</a></li>
            <li><a href='#'>Sub-Item um / três</a></li>
            <li><a href='#'>Sub-Item um / quatro</a></li>
        </ul>
    </li>
    <li><a href='#'>Item dois</a>
        <ul>
            <li><a href='#'>Sub-Item dois / um</a></li>
            <li><a href='#'>Sub-Item dois / dois</a></li>
            <li><a href='#'>Sub-Item dois / três</a></li>
            <li><a href='#'>Sub-Item dois / quatro</a></li>
        </ul>
    </li>
    <li><a href='#'>Item três</a>
        <ul>
            <li><a href='#'>Sub-Item três / um</a></li>
            <li><a href='#'>Sub-Item três / dois</a></li>
            <li><a href='#'>Sub-Item três / três</a></li>
            <li><a href='#'>Sub-Item três / quatro</a></li>
        </ul>
    </li>
   <li><a href='#'>Item quatro</a>
       <ul>
           <li><a href='#'>Sub-Item quatro / um</a></li>
           <li><a href='#'>Sub-Item quatro / dois</a></li>
           <li><a href='#'>Sub-Item quatro / três</a></li>
           <li><a href='#'>Sub-Item quatro / quatro</a></li>
       </ul>
   </li>
</ul>

O comportamento visual desta estrutura pode e deve ser feito com CSS, para deixar o menu mais atrativo. Não vou abordar css, pois não é o sentido deste post. O comportamento visual fica por sua conta e imaginação!

jQuery

A solução em 6 linhas:

$(document).ready(function(){// quando o DOM estiver pronto execute
    $('li ul').hide();// Esconda os menus filhos de <li>
    $('li').hover(function(){// quando passar o mouse em cima da <li>
        $(this).find('ul:first').stop(true, true).slideToggle();// procure nesta li a primeira ul, se um evento estiver disparado ele para(.stop()) e alterne o slider.
    });
});

A solução é bem simples. Eu digo com as palavras do jQuery que quando o documento tiver pronto “DOM todo lido e carregado pelo browser” (.ready), execute as tarefas abaixo. Primeiro esconda as ul´s filas de li,  e espere o evento do mouse (.hover), se alguém passar ponteiro do mouse em cima de alguma li, dispara a ação “o evento” para procurar nesta li que o mouse passou em cima, a primeira ul e, alterne o comportamento dela entre slide down e up, tornando o sub menu visível e não visível.

O (.stop()) é para corrigir o comportamento do .hover() que coloca os eventos na fila, e fica mostrando e escondendo, caso o usuários passe o mouse diversas vezes.