A área de desenvolvimento Front-end vem evoluindo muito nos últimos tempos.
No inicio a maioria dos efeitos de hover e click só era possível com o uso de Javascript, porém as coisas evoluíram e hoje é possível adicionar evento click usando apenas CSS e HTML.
Hoje usando apenas o CSS você consegue resolver muitos problemas que a algum tempo atrás não era possível, efeitos, animações são criadas sem muita dificuldade e sem uso de JavaScript
Adicionei apenas um estilo básico de demonstração, você pode copiar e refazer o estilo da maneira que preferir e que se encaixar no projeto que esteja realizando no momento.
Para criar o menu, primeiro criei uma arquitetura básica de HTML, para criar o evento click na versão mobile usei um label e um input checkbox.
O checkbox ficará oculto na versão desktop, pois ele que fará o evento de click, quando o checkbox estiver marcado(checked) o menu abrirá como se fosse um dropdown.
Em seguida criei a folha de estilo do meu menu, ela foi feita em SASS, você pode converter para CSS se preferir. Quando a classe input-menu-all que é a classe da label do checkbox estiver como checked ela dará um display: block na classe .list-menu e fará o menu abrir como se fosse um dropdown
Abaixo você pode ver o resultado da configuração do menu usando apenas CSS.
Também temo sum artigo com 7 Bibliotecas CSS para desenvolvedores ideal para otimizar tempo em seus projetos de desenvolvimento.
Espero ter ajudado 🙂
Nesse artigo vamos falar um pouco das vantagens de usar o Woocommerce em seu projeto…
Nesse artigo vamos apresentar 3 opções para transformar seus códigos em imagens e divulgar em…
O Google Analytics é uma ferramenta poderosa e totalmente gratuita oferecida pelo Google, que fornece…
O E-mail Marketing ainda é uma das maneiras mais eficientes de envolver seu usuário e…
Se você possui ou planeja criar uma loja virtual, descubra dicas essenciais para criar um…
Neste artigo vamos listar 7 editores de imagens gratuitos em Javascript para você usar em…
View Comments
Não reparei o código ainda. O que necessito é que o menu na versão mobile fique em linha, sem dropdown. É possível apenas apontando inline ao invés de in block? Não sei se fui claro.
Obrigado.
Leonardo
Esse menu está feito com flex, acredito que o modo que você quer em linha não seria muito viável para um menu mobile, pois não caberia os itens.
Para deixar somente em linha basta criar uma
e dar um display flex nela. e um flex-direction row ou column.
Oi Gustavo valeu pela resposta. na verdade são apenas 3 itens. utilizei o elementor para isso, mas penso que o CSS ajudaria um tanto. Mas, vou testar da forma que apontou com os display flex e o flex-direction. Obrigadu
Aqui você tem a maneira que gostaria de deixar na horizontal, sem ficar no dropdown.