About
Portfolio
Blog
Contact

Transformando colunas do Footer em dropdowns no mobile

Para o footer não ficar muito extenso no mobile com uma coluna de links em cima da outra, esse código jQuery vai ajudar a aplicar uma classe ao clicar no título da coluna, mostrando o restante dos elementos dela:

jQuery('.footer-col').click(function () {
    jQuery(this).find('.footer-content').toggleClass('visible');
});

Basicamente o que o código acima faz é: ao clicar na div contendo a classe .footer-col, adiciona uma classe .visible na div que contém a classe .footer-content. Com essa classe '.visible' você fica livre para aplicar o CSS desejado para mostrar/esconder o conteúdo dependendo do estado usando a classe combinada '.footer-content.visible'.

Caso eu lembre daqui uns dias, adiciono um exemplo de CSS aqui.

Subscribe
Notify of
guest

0 Comentários
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
homeenvelopeuserphone-handsetlaptop-phonetext-align-center
en_US
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram