é possível criar um menu hamburger só com css ?

18/05/2017

0

Olá, bom dia.
é possível criar um menu hamburger só com css, sem utilizar JS ou Jquery ?
no caso, sem precisar usar o onclick para abrir o menu.

desde já agradeço.

abraço
Lucas Santos

Lucas Santos

Responder

Post mais votado

30/05/2017

olá Lucas

Segue um exemplo aqui da DevMedia ;-)

https://www.devmedia.com.br/exemplo/menu-hamburguer-com-html-css-e-jquery/9

abraços

Gladstone Matos

Gladstone Matos
Responder

Mais Posts

19/05/2017

Dayan Barros

Olá, bom dia.
é possível criar um menu hamburger só com css, sem utilizar JS ou Jquery ?
no caso, sem precisar usar o onclick para abrir o menu.

desde já agradeço.

abraço


Existe algumas soluções, mas a melhor é usando o jQuery mesmo.

As que eu conheço são:

1 - Usando o <a href=#id> no HTML, você chama no CSS usando :target

2 - Usando o <input> e no CSS usa o Checked

Eu já usei a do target e funciona, o ruim é que na URL fica o #, esse é o ruim.

Abs
Responder

25/05/2017

Raphael Alves

O ruim é a semântica, usando checked ele terá que ficar dentro do input, para o SEO isso não é bom.

Abraaço.
Responder

26/05/2017

Victor Machado

Olá Dayanbarros.

Interessante essa opções, mas não entendi direito como funciona. Você poderia dar algum exemplo?

Obrigado.
Responder

26/05/2017

Figueroa Blanco

Olá, acho que não é boa prática, só se é mesmo preciso por alguma restrição do uso de JavaScript.

Exemplo.

https://codepen.io/erikterwan/pen/EVzeRP
Responder

29/05/2017

Dayan Barros

Olá Dayanbarros.

Interessante essa opções, mas não entendi direito como funciona. Você poderia dar algum exemplo?

Obrigado.


É bem simples, você tem que colocar o botão hamburguer no href da tag <a>, exemplo:

<a href"#menu">


Chama o menu pelo ID:

<section id="menu"></section>



No CSS você estiliza ele para aparecer e desaparecer, exemplo:
#menu { display:none; }
#menu:target { display:block; }


O único porém disso tudo, é que na URL, fica um # quando clica.

Abraços
Responder

30/05/2017

Victor Machado

Muito legal, Figueroa e Dayanbarros.
Responder

Assista grátis a nossa aula inaugural

Assitir aula

Saiba por que programar é uma questão de
sobrevivência e como aprender sem riscos

Assistir agora

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários, consulte nossa política de privacidade.

Aceitar