Menu mobile slider thuần css không javascript và jquery

Nếu bạn đang gặp vấn đề về tốc độ tải trang do sử dụng javascript cũng như file jquery trong thiết kế menu dành cho các giao diện chạy trên mobile hay tablet thì không nên bỏ qua bài viết này.

Bài này sẽ chia sẻ cho các bạn mẫu menu đơn giản nhưng rất hiệu nghiệm và được sử dụng rộng rãi ở nhiều website hiện nay.

Menu này đượ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ẹ.

Menu mobile slider thuần css không javascript và jquery

DEMO

Cài đặt

+ 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 0px;
  
  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;
}

+ 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>

Thay link label và tên nhãn của bạn.