Chia sẻ menu mobile slider Css không Javascript và Jquery

Hôm nay xin chia sẻ tới các bạn menu mobile slider css không sử dụng javascript và jquery.
Nếu bạn ngại khi sử dụng vì sợ ảnh hưởng tới tốc độ tải trang thì menu này là dành cho bạn, nó được xây dựng thuần CSS và không dùng tới javascript cũng như file jquery nên có dung lượng rất nhẹ.
Không ảnh hưởng tới tốc độ tải trang web như các loại menu khác.

Demo

Bước 1: Thêm CSS

#menuToggle { display:block; position:relative; top:50px; left:50px; z-index:1; -webkit-user-select:none; user-select:none; }
#menuToggle a { text-decoration:none; color:#232323; transition:color 0.3s ease; }
#menuToggle a:hover { color:tomato; }
#menuToggle input { display:block; width:40px; height:32px; position:absolute; top:-7px; left:-5px; cursor:pointer; opacity:0; z-index:2; -webkit-touch-callout:none; }
#menuToggle span { display:block; width:33px; height:4px; margin-bottom:5px; position:relative; background:#cdcdcd; border-radius:3px; z-index:1; transform-origin:4px 0; transition:transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),opacity 0.55s ease; }
#menuToggle span:first-child { transform-origin:0% 0%; }
#menuToggle span:nth-last-child(2) { transform-origin:0% 100%; }
#menuToggle input:checked ~ span { opacity:1; transform:rotate(45deg) translate(-2px,-1px); background:#232323; }
#menuToggle input:checked ~ span:nth-last-child(3) { opacity:0; transform:rotate(0deg) scale(0.2,0.2); }
#menuToggle input:checked ~ span:nth-last-child(2) { transform:rotate(-45deg) translate(0,-1px); }
#menu { position:absolute; width:300px; margin:-100px 0 0 -50px; padding:50px; padding-top:125px; background:#ededed; list-style-type:none; -webkit-font-smoothing:antialiased; transform-origin:0% 0%; transform:translate(-100%,0); transition:transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0); }
#menu li { padding:10px 0; font-size:22px; }
#menuToggle input:checked ~ ul { transform:none; }

Bước 2: Thêm HTML

<nav role="navigation">
  <div id="menuToggle">
    <input type="checkbox" />
    <span></span>
    <span></span>
    <span></span>
    <ul id="menu">
      <a href="#"><li>Home</li></a>
      <a href="#"><li>Blogspot AMP</li></a>
      <a href="#"><li>CSS</li></a>
      <a href="#"><li>Hiệu ứng</li></a>
      <a href="#"><li>Hiệu ứng</li></a>
      <a href="#"><li>Hiệu ứng</li></a>
      <a href="#"><li>Hiệu ứng</li></a>
    </ul>
  </div>
</nav>

Nhớ thay link và tên nhãn vào nhé. Chúc bạn thành công