jMenu: Menu De Navegação Com Subníveis

Existem sites que possuem muitas seções e subseções e apresentam bastantes recursos a seus visitantes. Quando é o caso de haver um menu grande e este possuir muitos níveis, torna-se primordial que a apresentação deste menu seja feita de forma adequada, não deixando pecar pela navegação facilitada e usabilidade.

Um menu com subníveis, para este casos, é a melhor opção. Existem diversas técnicas para fazer um menu multi nível e, hoje, apresentaremos a técnica de fazer este menu utilizando o incrível plugin para jQuery jMenu!

O jMenu é um plugin para jQuery que permite criar um menu horizontal com infinitos níveis e sub-níveis de profundidade. Como é preciso o jQuery UI para seu funcionamento, também é possível aplicar efeitos deste, como fadeIn ou slideDown. Sua implementação é bastante simples, não precisando mais que algumas listas HTML aninhadas e poucas linhas de código.

Usando jMenu

Primeiramente, faça o download do jMenu. No arquivo zipado, você encontrará 2 arquivos com imagens de setinhas para o menu, além dos javascripts necessários. No <head> de seu documento, faça a chamada a todos esses arquivos.

Para o uso do jMenu, basicamente o que se precisa é de uma div e algumas listas com HTML, mais ou menos como a seguinte estrutura:


<ul id="jMenu">
  <li><a class="fNiv">Nível 1</a> <!-- Classe "fNiv" obrigatória no primeiro nível -->
    <ul>
      <li class="arrow"></li> <!-- Setinha para indicar mais níveis -->
      <li><a>Nível 2</a></li>  
      <li><a>Nível 2</a></li>  
      <li><a>Nível 2</a>  
        <ul>  
          <li><a>Nível 3</a></li>  
          <li><a>Nível 3</a></li>  
          <li><a>Nível 3</a></li>  
          <li><a>Nível 3</a></li>  
        </ul>  
      </li>  
      <li><a>Nível 2</a></li>  
    </ul>  
  </li>  
</ul>

Então, basta inicializar o plugin:


<ul>
$(document).ready(function(){
  $("#jMenu").jMenu();
});
</ul>

Opções do jMenu

O jMenu possui algumas opções para controle de posicionamento/comportamento:

  • ulWidth. Fix na largura dos sub-menus (padrão ‘auto’).
  • absoluteTop. Posição absoluta de “top” do primeiro subnível do menu comparado a seu antecessor (padrão ’30′).
  • absoluteLeft. Posição absoluta de “left” do primeiro subnível do menu comparado a seu antecessor (padrão ’0′).
  • effectSpeedOpen. Velocidade (em ms) do efeito de slideDown/fadeIn dos submenus (padrão ’350′).
  • effectSpeedClose. Velocidade (em ms) do efeito de slideUp/fadeOut dos submenus (padrão ’350′).
  • effectTypeOpen. Efeito de abrir o submenu, que pode ser “slide”, “fade” ou “” (padrão ‘slide’).
  • effectTypeClose. Efeito de fechar o submenu, que pode ser “slide”, “fade” ou “” (padrão ‘slide’).
  • effectOpen. Qualquer efeito do jQuery UI (padrão ‘linear’).
  • effectClose. Qualquer efeito do jQuery UI (padrão ‘linear’).
  • TimeBeforeOpening. Tempo (em ms) antes de os submenus fecharem (padrão ’200′).
  • TimeBeforeClosing. Tempo (em ms) antes de os submenus fecharem (padrão ’200′).
  • animatedText. Se “true”, faz animação no hover dos itens (padrão ‘false’).
  • paddingLeft. Animação de padding-left quando a opção animatedText é ‘true’ (padrão ’7′).

Veja o exemplo oficial do jMenu.

Conclusões sobre o jMenu

Menus com subníveis são interessantes e úteis. Quando é o caso de ter muitas opções disponíveis, certamente seu uso é uma das melhores opções disponíveis atualmente.

É ainda melhor quando sua implementação é tão simples, e isso pode ser conseguido utilizando o jMenu. Vale a pena!

Be Sociable, Share!

2 Comentários

  1. JotaDan

    Dá pra colocar esse menu no Blogger? Tens um passo-a-passo?
    Obrigado.

  2. a sim é facil quero ver cologar isso para buxar no banco de dados e organizalos por um sistema !

Participa! Comenta... para JotaDan