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





Artigos Relacionados


Designer de Interface pós graduado em Arquitetura da Informação. UI/UX Designer e Front-end Developer, atualmente atendo empresas como freelancer e sou colaborador em uma agência de comunicação onde desenvolvo interfaces criativas com foco na experiência do usuário. Organizador por natureza acredito que o caos é a matéria-prima necessária.

4 comentários em “Menu Responsivo com Slicknav

  1. Henrique Souza 15 de setembro de 2016 12:47

    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 19 de setembro de 2016 15:24

      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 1 de outubro de 2015 12:32

    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 6 de outubro de 2015 17:20

      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

Seu endereço de email não será publicado.

Você pode usar HTML tags e atributos: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>