Logotipo Design Interativo
Menu responsivo com Slicknav

Menu Responsivo com Slicknav


Para quem esta atras de um menu responsivo que atenda a versão desktop e dispositivos móveis, criei este plugin baseado no slicknav.

Este menu é único atendendo todos os dispositivos sem precisar duplicar menus e fazer duas versões, bem simples de personalizar, este menu é dropdown com quantos níveis você quiser inserir. Outra característica deste menu é a complementação das redes sociais na versão mobile que por sua vez você pode inserir e retirar facilmente ícones que são gerados através das fontes do projeto de ícones Awesome, apenas inserindo as classes para cada tipo de mídia social.

No exemplo você confere um dropdown com 3 níveis.

 

Demo

Link para download

Comentários
  1. Henrique Souza disse:

    Olá Robson, no seu exemplo de menu responsivo vc já reparou que quando o menu esta na forma para mobile e eu clico no botão de maximizar a tela, o seu menu mobile não some e fica fixado no top da tela a cima do layout original da page? Sabe como solucionar? tomei como base o seu layout e estou com o mesmo problema!

    • Robson Moulin disse:

      Eu reparei sim, e consegui resolver em um projeto, veja o script que resolve esse problema, substitua a classe .mobilenav_menu pela que você usou.
      Coloque esse scprit após o plugin
      Abraços

      // RESOLVE RESPONSIVE

      $(document).load($(window).bind(“resize”, checkPosition));

      function checkPosition()
      {
      if($(window).width() < 992) { $(“.mobilenav_menu”).css(‘display’,’block’); } else { $(“.mobilenav_menu”).css(‘display’,’none’); } }

  2. Ricardo disse:

    Fala Robson! Boas dicas que você deixou no seu site.
    Estou querendo colocar botões de mídias sociais e telefone na barra da slicknav. Não estou conseguindo e também não encontrei em lugar nenhum.
    Você tem idéia de como fazer isso? Tentei via li, criando div, etc e nada.
    Valeu

    • Robson Moulin disse:

      Fala Ricardo!
      Se eu não me engano esta versão já possui os botões. Pelo menos dentro do menu mobile, para por em desktop você pode colocar em outra div, e dar um display:none quando for versão mobile.

      Abs!!

Deixe o seu comentário!

publicidade
publicidade
publicidade

Design Tools

Links

Conheça sites sobre ux, design, front-end, comunicação, inspiração e muito mais, fique por dentro das novidades do mercado com nossa lista.


Profissionais Influentes

Conheça os profissionais que influenciam e trabalham para a comunidade de design e fron-end e user experience, confira o Twitter de cada um.


Curta nossa fanpage e fique por dentro das novidades do site
publicidade
publicidade
publicidade