Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
Cách Tạo Component Dropdown Cho Website

Cách Tạo Component Dropdown Cho Website


Ngày 16 Tháng 7 Năm 2021

Ngày hôm nay chúng ta sẽ đi vào tìm hiểu cách thiết kế dropdown button với submenu dành cho website bằng HTML CSS và Javascript nhé.

HTML

Trong phần này chúng ta sẽ đi vào tạo cấu trúc HTML và thêm các thư viện cần thiết dành cho dropdown submenu (Jquery, Font Awesome) nhé.

<!DOCTYPE html>
  <html lang="en">
   <head>
      <meta charset="utf-8">
      <title>Cách Tạo Submenu Drop-down</title>
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
      <script src="https://code.jquery.com/jquery-3.4.1.js">
</script>
   </head>
   <body>
      <nav>
         <label for="btn" class="button"> Trang Chủ
         <span class="fas fa-caret-down"></span>
         </label>
         <input type="checkbox" id="btn">
         <ul class="menu">
            <li><a href="#">Về Chúng Tôi</a></li>
            <li>
               <label for="btn-2" class="first">Liên Hệ
               <span class="fas fa-caret-down"></span>
               </label>
               <input type="checkbox" id="btn-2">
               <ul>
                  <li><a href="#">Email</a></li>
               </ul>
            </li>
            <li>
               <label for="btn-3" class="second">Dịch Vụ
               <span class="fas fa-caret-down"></span>
               </label>
               <input type="checkbox" id="btn-3">
               <ul>
                  <li><a href="#">Thiết Kế Web</a></li>
                  <li><a href="#">Phát Triển Web</a></li>
               </ul>
            </li>
            <li><a href="#">Phản Hồi</a></li>
         </ul>
      </nav>
   </body>
</html>

CSS

Tiếp theo chúng ta sẽ đi vào thiết kế style cho dropdown bằng các thuộc tính CSS ở dưới đây nhé!

@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  user-select: none;
  font-family: 'Roboto', sans-serif;
}
nav{
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #1E90FF;
  width: 400px;
  line-height: 40px;
  padding: 8px 25px;
  border-radius: 5px;
}
nav label{
  color: white;
  font-size: 22px;
  font-weight: 500;
  display: block;
  cursor: pointer;
}
.button span{
  float: right;
  line-height: 40px;
  transition: 0.5s;
}
.button span.rotate{
  transform: rotate(-180deg);
}
nav ul{
  position: absolute;
  background: #1b1b1b;
  list-style: none;
  top: 75px;
  left: 0;
  width: 100%;
  border-radius: 5px;
  display: none;
}
[id^=btn]:checked + ul{
  display: block;
}
nav .menu:before{
  position: absolute;
  content: '';
  height: 20px;
  width: 20px;
  background: #1b1b1b;
  right: 20px;
  top: -10px;
  transform: rotate(45deg);
  z-index: -1;
}
nav ul li{
  line-height: 40px;
  padding: 8px 20px;
  cursor: pointer;
  border-bottom: 1px solid rgba(0,0,0,0.2);
}
nav ul li label{
  font-size: 18px;
}
nav ul li a{
  color: white;
  text-decoration: none;
  font-size: 18px;
  display: block;
}
nav ul li a:hover,
nav ul li label:hover{
  color: #1E90FF;
}
nav ul ul{
  position: static;
}
nav ul ul li{
  line-height: 30px;
  padding-left: 30px;
  border-bottom: none;
}
nav ul ul li a{
  color: #e6e6e6;
  font-size: 17px;
}
nav ul li span{
  font-size: 20px;
  float: right;
  margin-top: 10px;
  padding: 0 10px;
  transition: 0.5s;
}
nav ul li span.rotate{
  transform: rotate(-180deg);
}
input{
  display: none;
}

Và kết quả bạn xem ở bên dưới nhé!

Xây Dựng Chức Năng Cho Dropdown

Trong phần cuối cùng này chúng ta sẽ đi vào tạo hiệu ứng xoay mũi tên 180 độ khi người dùng nhấp vào thành phần submenu nha.

 $('nav .button').click(function(){
      $('nav .button span').toggleClass("rotate");
  });
 $('nav ul li .first').click(function(){
      $('nav ul li .first span').toggleClass("rotate");
 });
 $('nav ul li .second').click(function(){
      $('nav ul li .second span').toggleClass("rotate");
 });

Và kết quả bạn xem ở video bên dưới nhé!

Còn dưới đây là dự án trên Codepen nha!

See the Pen by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nguồn

Nếu bạn muốn tìm hiểu thêm nhiều thiết kế dropdown thì có thể tham khảo ở đây nhé!

Tổng kết:

Qua đây mình mong bài viết sẽ cung cấp thêm cho bạn cách tạo dropdown hữu ích cho việc phát triển, thiết kế web và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!