Thông báo: Chúng tôi luôn cần có thêm những thành viên sáng tạo, chuyên nghiệp và sẵn sàng cháy hết mình với công việc! Tham gia

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

Đọc thêm :
Đánh Giá Bài Viết:
Khi tôi là chính bản thân mình, tôi hạnh phúc và có kết quả tốt !

Đăng nhận xét