Effects for menu with CSS3

Question

I want when I click the #menu button it comes from left to right occupying the entire screen. Can anyone help me do this with css3? At the moment I make the menu go down with javascript slidetoggle, but I want to do with 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>

Answer 1

You can use the technique of having a label attached to a field checkbox to control when the menu will be opened/closed, in that other answer I gave an example and explained a little better.

In your case, just leave the menu in absolute position and keep it "hidden" by setting its position on the left with a negative value, which will make it exit the field of view of what the user is seeing. And when the checkbox is selected, just reset the distance from the menu on the left.

Left p/ right

*{ 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>

Right p/ left

*{ 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>