Array
(
    [0] => stdClass Object
        (
            [Votos_Balanceados] => 1
            [id] => 581925
            [titulo] => é possível criar um menu hamburger só com css ?
            [dataCadastro] => DateTime Object
                (
                    [date] => 2017-05-30 14:40:16
                    [timezone_type] => 3
                    [timezone] => America/Sao_Paulo
                )

            [isFirstPost] => -1
            [idUsuario] => 615
            [status] => A
            [isExample] => -1
            [NomeUsuario] => Gladstone Matos Gomes
            [Login] => msdn.gladstone
            [Apelido] => Gladstone Matos Gomes
            [Foto] => 615_20170316163117.png
            [Conteudo] => olá Lucas

Segue um exemplo aqui da DevMedia ;-)

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

abraços ) )

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

Lucas Santos
   - 18 mai 2017

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

Post mais votado

Gladstone Gomes
|
MVP
Pontos: 1940
    30 mai 2017

Dayanbarros
|
MVP
Pontos: 230
    19 mai 2017


Citação:
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

Raphael Alves
|
MVP
Pontos: 165
    25 mai 2017

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

Abraaço.

Hugo
   - 26 mai 2017

Olá Dayanbarros.

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

Obrigado.

Figueroa Blanco
   - 26 mai 2017

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

Dayanbarros
|
MVP
Pontos: 230
    29 mai 2017


Citação:
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:

#Código

<a href"#menu">


Chama o menu pelo ID:

#Código
<section id="menu"></section>



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


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

Abraços

Hugo
   - 30 mai 2017

Muito legal, Figueroa e Dayanbarros.