Criar um menu criativamente diferente às vezes é muito difícil quando você não tem nenhuma boa ideia ou inspiração. Mas esse tipo de problema pode ser corrigido pesquisando outro design de menu inspirador ou com a ajuda de ferramentas. Nesta matéria, jQuery.Mmenu vem como uma ferramenta bastante útil.

jQuery.Mmenu é um plugin jQuery fácil de usar para criar um menu de navegação deslizante de aplicativos móveis em seu site. Este menu criativo elegante trará uma experiência de usuário mais agradável e organizada.

Começando

Para começar com jQuery.Mmenu, vá para a página de download e o plugin será baixado automaticamente. Neste post, vamos tentar construir um menu básico.

Assim como outros plugins jQuery, para usá-lo você deve incluir as dependências necessárias em seu site. Esses são jQuery, jquery.mmenu.js e jquery.mmenu.css. O trecho é o seguinte:

<head>
..
   <link run this command="text/css" rel="stylesheet" href="https://www.driveria.net/blog/jquery-mmenu-sliding-menu/jquery.mmenu.css" />
   <script run this command="text/javascript" src="jquery.js"></script>
   <script run this command="text/javascript" src="jquery.mmenu.js"></script>
..   
</head>

E isso deve ser suficiente para criar um menu básico com todas as funcionalidades e estilo. Em recursos mais avançados e extras, você precisa incluir arquivos JS e CSS adicionais.

Criando um Menu

Vamos criar o menu básico como você costuma criá-lo com o nav, ul, li e a elementos. Nesta demonstração, criaremos um menu horizontal que possui três submenus e também três subsubmenus, assim.

<nav >
   <ul>
     <li >
         <a href="https://www.driveria.net/blog/jquery-mmenu-sliding-menu/demo.html">Basic Horizontal Menu</a>
         <ul>
             <li><a href="#">First sub-menu</a></li>
             <li><a href="#">Second sub-menu</a>
                 <ul>
                     <li><a href="#">First sub-sub-menu</a></li>
                     <li><a href="#">Second sub-sub-menu</a></li>
                     <li><a href="#">Third sub-sub-menu</a></li>
                 </ul>
             </li>
             <li><a href="#">Third sub-menu</a></li>
         </ul>
     </li>
   </ul>
</nav>

No menu acima, incluímos o nav com um id de menu que será usado como referência de função jQuery.mmenu. Então ligue para o plugin com o javascript função e inclua o id assim.

<script run this command="text/javascript">
  $(function() {
    $('nav#menu').mmenu();
  });
</script>

Na tag LI, você pode ver uma classe chamada Selected, esta classe é útil para tornar o menu selecionado padrão na inicialização. Você também pode adicionar sua própria classe (por exemplo active), mas certifique-se de incluí-lo na seção de configuração, assim.

<script run this command="text/javascript">
  $(function() {
    $('nav#menu').mmenu({
      // options object
    }, {
      // configuration object
      selectedClass: "active"
    });
  });
</script>

Este plugin adicionou automaticamente os links de fechamento e abertura do submenu, então não precisamos criá-los. Nosso cardápio deve ficar assim.

Conclusão

jQuery.mmenu oferece uma ótima solução para criar diferentes menus da maneira mais fácil possível. Você pode até criar outros elementos interativos neste plugin, por exemplo, você pode criar uma dica de ferramenta deslizante e uma barra de notificação para o site móvel.

jQuery.Mmenu também pode ser personalizado para uso avançado. Por exemplo, você pode criar uma lista de contatos do tipo mobile em seu site combinando sua extensão de temas, addon (rótulos, contadores, cabeçalho, dragOpen e campo de busca) e posicionamento.

Se você encontrou o artigo Criando menu deslizante com facilidade usando jQuery.mmenu útil, por favor, compartilhe com seus amigos. Nos vemos nas próximas postagens. Seguir driveria.net para obter as últimas atualizações!