Siga-nos em...
Follow us on Twitter Follow us on Facebook Watch us on YouTube
Registro


Alpha Servers
Resultados 1 a 2 de 2
  1. #1

    Avatar de BeoWulf
    Data de Ingresso
    May 2011
    Localização
    Rio de Janeiro
    Idade
    27
    Posts
    389
    Agradecido
    275
    Agradeceu
    144
    Peso da Avaliação
    10

    Lightbulb 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, [Somente usuários registrados podem vem os links. ], 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:


    Código PHP:
    <ul id="jMenu">  <li><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:
    Código PHP:
    <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. [Somente usuários registrados podem vem os links. ] (padrão ‘linear’).
    effectClose. [Somente usuários registrados podem vem os links. ] (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′).



    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!
    Allahu Akbar

    الجميع سوف يموت هذا القرف !

    Acesse: Hidden Content

    Servidor Hard de Mu Online

  2. O Seguinte Usuário Agradeceu BeoWulf Por este Post Útil:


  3. #2

    Avatar de UnderZone
    Data de Ingresso
    Feb 2012
    Localização
    Sao goncalo
    Idade
    24
    Posts
    58
    Agradecido
    1
    Peso da Avaliação
    0

    Padrão

    Muito bom , vou testar concerteza

 

 

Informações de Tópico

Usuários Navegando neste Tópico

Há 1 usuários navegando neste tópico. (0 registrados e 1 visitantes)

Tópicos Similares

  1. |Dúvida| Menu de Opções [C++]
    Por Bullet no fórum C++
    Respostas: 0
    Último Post: 07-11-2013, 10:01 AM
  2. |Dúvida| Teclado + Mouse no PS3 para navegação...
    Por Netoviski no fórum Playstation III
    Respostas: 1
    Último Post: 16-10-2012, 02:02 PM
  3. |Dúvida| Editando menu
    Por C. Henrique no fórum Dúvidas
    Respostas: 1
    Último Post: 12-06-2012, 09:54 AM
  4. |Tutorial| Menu marcado - PHP
    Por 14biss no fórum Tutoriais
    Respostas: 0
    Último Post: 31-05-2011, 12:32 PM
  5. [Download] Flash Menu Lab PRO v2.05
    Por Bruno Lucena no fórum Downloads
    Respostas: 1
    Último Post: 03-05-2011, 06:09 PM

Marcadores

Permissões de Postagem

  • Você não pode iniciar novos tópicos
  • Você não pode enviar respostas
  • Você não pode enviar anexos
  • Você não pode editar suas mensagens
  •