How to create a mobile menu button with this effect? (preferably without js)

Question

I was trying to set up a mobile site with a menu just like this http://deliveryextra-dev.viewit.com.br/ just changing the colors. until I had abandoned the project, I don’t have it now, so I will post it on jsfiddle. From what I saw his code js is:

 // Menu
 $(".bt.menu").click(function(){
     if ( $("#pageContent").hasClass("active") ) {
         $("#pageContent").toggleClass("active");
         $("#menuContent").toggleClass("active");
         setTimeout( function(){
            //evita que se esconda o menu caso seja ele seja aberto seguidas vezes
             if ( !$("#pageContent").hasClass("active") ) {
                 $("#menuContent").hide();
             }
         }, 1000);           
     } else {
         $("#menuContent").show("fast", function(){
             $("#pageContent").toggleClass("active");
             $("#menuContent").toggleClass("active");
         });
     }
 });

and the css is:

#header .buttons .menu {    
background: url("/deliveryextra-s/images/icon_menu.png") no-repeat center;
background-size: 26px;  
top: 10px;
left: 10px; 

}

Note: I just want the animation effect, the HTML code I’ve done... Just wondering if the same effect is possible to be done using CSS without Javascript..

Answer 1

follows an off-canvas implementation using as little Javascript as possible.

var wrapper = document.querySelector(".outer-wrapper");
var icon = document.querySelector(".icon");
icon.addEventListener("click", function () {
  wrapper.classList.toggle("expanded");
});

body, html {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
}

.container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overflow-x: none;
}

.outer-wrapper .inner-wrapper {
  position: absolute;
  top: 0px;
  left: -240px;
  bottom: 0px;
  right: 0px;
}

.expanded .inner-wrapper {
  transform: translateX(240px);
}

.inner-wrapper .menu-canvas {
  position: absolute;
  top: 0px;
  bottom: 0px;
  width: 240px;
  left: 0px;
  background-color: gainsboro;
  box-shadow: 0px 0px 10px black;
}

.inner-wrapper .menu {
  position: absolute;
  top: 0px;
  left: 240px;
  right: 0px;
  height: 40px;
  background-color: gainsboro;
  box-shadow: 0px 0px 10px black;
}

.inner-wrapper .content {
  position: absolute;
  top: 40px;
  left: 240px;
  bottom: 0px;
  right: 0px;
  overflow-y: auto;
  padding-left: 5px;
}

.menu .icon {
  height: calc(100% - 8px);
  margin: 4px;
}


.inner-wrapper,
.icon .upper,
.icon .lower {
  transform: rotate(0deg) translate(0px, 0px) scaleX(1);
  transition: transform 0.5s linear;
}

.expanded .icon .upper {
  transform: rotate(-30deg) translate(-100px, -155px) scaleX(0.7);
  
}

.expanded .icon .lower {
  transform: rotate(30deg) translate(130px, 95px) scaleX(0.7);
}

<div class="outer-wrapper">
  <div class="inner-wrapper">
    <div class="content">
      <div id="lipsum">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur luctus gravida maximus. Cras lectus metus, pulvinar quis metus id, placerat sollicitudin nibh. Integer malesuada nulla eu convallis consectetur. Praesent maximus molestie viverra. Integer fringilla, arcu eu commodo gravida, turpis velit faucibus metus, et dignissim eros leo id urna. Vivamus vel lacus justo. Donec diam nisl, auctor et lacus ac, lacinia aliquam ipsum. Nunc eget rutrum enim. Donec gravida est eu tristique convallis. Integer vel ornare dolor.
        </p>
        <p>
          Etiam scelerisque tortor ante, eget convallis justo elementum nec. Nulla in magna imperdiet, dapibus sapien in, laoreet velit. Phasellus laoreet metus vel iaculis commodo. Aliquam at hendrerit purus. Morbi iaculis pellentesque posuere. Ut id orci tortor. Sed a dolor id nisl placerat mattis. In hac habitasse platea dictumst. Maecenas rutrum pretium diam, sit amet sagittis quam rhoncus vel. Phasellus commodo, sem ut rhoncus pellentesque, augue elit accumsan mi, vel condimentum ex est non arcu. Curabitur semper lectus quis elit euismod volutpat.
        </p>
        <p>
          Curabitur velit est, tincidunt quis elementum sed, tincidunt quis nulla. Proin auctor risus non nulla volutpat, et molestie nisl consequat. Nunc lorem orci, commodo in leo eu, feugiat pulvinar lacus. Sed orci risus, ultricies et magna nec, placerat sagittis velit. Nullam nec vehicula risus. Nunc aliquet mauris eu odio aliquam pulvinar. Sed et elit lorem. Donec iaculis varius hendrerit. Quisque non egestas ligula.
        </p>
        <p>
          Sed congue tempor nisl ut finibus. Maecenas euismod sollicitudin lectus ut pretium. Morbi felis erat, imperdiet ut massa non, vulputate tempor ipsum. Ut fermentum elit a hendrerit congue. Nam sodales viverra nulla, vel vehicula elit vehicula in. Vivamus nisl tortor, sollicitudin vel magna a, malesuada fringilla lorem. Donec sodales at dui et convallis. Vestibulum auctor neque lectus, quis mollis justo vehicula in. Phasellus tincidunt leo in augue maximus, a sagittis dolor auctor. Praesent at massa sit amet neque malesuada porttitor. Nulla convallis, nisl euismod sodales maximus, orci nunc finibus massa, non tincidunt ex sem quis nulla. Sed semper massa ante, id efficitur mauris rutrum sit amet. Ut et luctus tellus.
        </p>
        <p>
          Etiam vehicula augue in gravida gravida. In bibendum maximus consequat. Nullam mattis risus et massa placerat dignissim. Sed convallis accumsan tincidunt. Nullam eget ligula erat. Vestibulum tempor semper massa vel rhoncus. Nullam pellentesque est in purus accumsan, quis pellentesque ex eleifend. Duis rhoncus nibh dolor, eget tincidunt justo aliquet eget. Interdum et malesuada fames ac ante ipsum primis in faucibus.
        </p>
      </div>
    </div>
    <div class="menu">
      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve"
           class="icon" x="0px" y="0px" viewBox="0 0 459 459" style="enable-background:new 0 0 459 459;" >
        <g id="menu">
          <path class="upper" d="M0,382.5h459v-51H0V382.5z"/>
          <path class="middle" d="M0,255h459v-51H0V255z"/>
          <path class="lower" d="M0,76.5v51h459v-51H0z"/>
        </g>
      </svg>
    </div>    
    <div class="menu-canvas">

    </div>
  </div>
</div>

Answer 2

You can do this effect with edges, even with elements, but this site used box-shadow, applying a white shadow inside the element. As you can see moved 1 pixel horizontally, and 1 pixel vertically.

.btn {
    -webkit-box-shadow: inset 1px 1px 0 #fff;
       -moz-box-shadow: inset 1px 1px 0 #fff;
        -ms-box-shadow: inset 1px 1px 0 #fff;
         -o-box-shadow: inset 1px 1px 0 #fff;
            box-shadow: inset 1px 1px 0 #fff;
    display: inline-block;
    padding: 2px 6px;
}

To make it look good just put a border around the button.