Menu effects with CSS3

Question

Menu effects with CSS3

Navigation

#1 by (2 votes)

1

I want it when I click the menu button #menu 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 the slidetoggle of javascript, 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>

html5 css3

asked by anonymous 11.02.2016 / 19:06

1 answer

How to keep the scroll bar of a div always down? Use PHP variables in the phpMailer HTML email body [duplicate]

score 2 · Answer 1

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

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

Left to 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 to 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>