1

Quero que quando eu clique no menu button #menu ele venha da esquerda pra direita ocupando a tela toda. Alguém pode me ajudar a fazer isso com css3? No momento faço o menu descer com o slidetoggle do javascript, mas quero fazer com css3

<button class="menu"></button>


        <div id="menu">                     
            <ul>
                <li>Link1</li>
                <li>Link2</li>
                <li>Link3</li>
                <li>Link4</li>
                <li>Link5</li>
            </ul>
        </div>
4
  • Seria assim que queres? -> jsfiddle.net/h1twygcx
    – Sergio
    11/02/2016 às 18:12
  • Se pudesser queria com CSS3?
    – Tiago P.C
    11/02/2016 às 18:26
  • @TiagoP.C Sugeri uma edição removendo a tag Javascript, já que você está dizendo que não quer soluções em Javascript. 11/02/2016 às 18:29
  • @TiagoP.C o meu código é com CSS3 :)
    – Sergio
    11/02/2016 às 18:35

1 Resposta 1

2

Você pode usar a técnica de ter um label atrelado a um campo checkbox para controlar quando o menu será aberto/fechado, nessa outra resposta dei um exemplo e expliquei um pouco melhor.

No seu caso, basta deixar menu em posição absoluta e mantê-lo "escondido" definindo sua posição à esquerda com um valor negativo, que vá fazê-lo sair do campo de visão do que o usuário está vendo. E quando o checkbox estiver selecionado, basta zerar a distancia do menu à esquerda.

Esquerda p/ direita

*{ margin:0; box-sizing: border-box }

nav {
  border: 1px solid #333;
  display: flex;
  flex-flow: column wrap;
  left: -110%; /* para escondê-lo */
  position: absolute;
  transition: left 400ms ease-in;
  width: 100%
}

#menu { display: none }

#menu:checked + nav {
  left: 0 /* para exibi-lo */
}
<label for='menu'>Menu</label>

<input id='menu' type='checkbox'/>

<nav>
  <a href='#!'>Link 1</a>
  <a href='#!'>Link 2</a>
  <a href='#!'>Link 3</a>
  <a href='#!'>Link 4</a>
<nav>

Direita p/ esquerda

*{ margin:0; box-sizing: border-box; overflow: hidden }

nav {
  border: 1px solid #333;
  display: flex;
  flex-flow: column wrap;
  right: -100%; /* para escondê-lo */
  position: absolute;
  transition: right 400ms ease-in;
  width: 100%
}

#menu { display: none }

#menu:checked + nav {
  right: 0 /* para exibi-lo */
}
<label for='menu'>Menu</label>

<input id='menu' type='checkbox'/>

<nav>
  <a href='#!'>Link 1</a>
  <a href='#!'>Link 2</a>
  <a href='#!'>Link 3</a>
  <a href='#!'>Link 4</a>
<nav>

4
  • Se eu quiser que ele dá da direita pra esquerda? :D
    – Tiago P.C
    11/02/2016 às 18:37
  • @TiagoP.C Já estava da esquerda para direita, quis dizer "da direita para esquerda"? Coloquei um exemplo mas como o menu foi inserido diretamente no body, usei um overflow:hidden para não mostrar a barra de rolagem horizontal. 11/02/2016 às 18:44
  • Tenho um button com um "hamburger" e um button com um "X" Como faço pra funcionar direitinho? Digo, quando clicar no menu aparece o X e quando clicar no X aparece o hamburger de novo? Já tenho isso com javascript mas queria fazer com css :D Depois disso aceitarei sua resposta, pois já me ajudou bastante
    – Tiago P.C
    12/02/2016 às 10:44
  • @TiagoP.C Não sei, o código que postou e a descrição da pergunta não diz nada disso. Cria uma nova pergunta e explique com detalhes o que está querendo fazer. 12/02/2016 às 14:41

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .