Hướng dẫn tabs underline animation css - tab gạch dưới hoạt ảnh css
|
Hoạt hình gạch chân trượt là một cách hấp dẫn để chỉ ra tab hoạt động. Hoạt hình dựa trên một ý tưởng đơn giản để di chuyển trơn tru dòng gạch chân từ một tiêu đề tab sang tiêu đề hoạt động. Nó trông trơn tru nhưng thiết kế nó là một chút khó khăn. Nhưng, bạn không cần phải lo lắng, ở đây bạn sẽ biết cách tạo các tab CSS với hoạt hình gạch chân trượt bằng cách sử dụng jQuery và CSS. Show Chúng tôi sẽ nối một phần gạch chân trượt vào thành phần hình phạt tab bản địa Bootstrap. Vì vậy, nỗ lực tạo điều hướng tab là không cần thiết. Ngoài ra, chúng tôi sẽ thêm các biểu tượng vào tiêu đề tab để làm cho nó hấp dẫn hơn. Bạn có thể kiểm tra đầu ra cuối cùng trong video sau: Xem trước videohttps://codeconvey.com/wp-content/uploads/2022/06/css-tabs-with-sliding-underline.webm Bạn cũng có thể duyệt trang demo để xem các tab có hoạt hình gạch chân trượt trong hành động. Màu sắc và độ dày của gạch chân có thể được tùy chỉnh theo yêu cầu của bạn. Cấu trúc HTMLTrong bước đầu tiên, tải Bootstrap và phông chữ CSS tuyệt vời bằng cách thêm các liên kết CDN sau vào thẻ đầu của tài liệu HTML của bạn. Sau đó, tạo cấu trúc tab bản địa Bootstrap và bổ sung thêm một phần tử div với tên lớp 1 bên trong phần tử của tabs Nav.
Trong mã HTML ở trên, bạn chỉ cần thêm các tiêu đề và nội dung tab của bạn. Hơn nữa, bạn cũng có thể gói mã này vào bất kỳ yếu tố bổ sung nào theo nhu cầu của bạn. Các kiểu CSS cho các tab có gạch chân trượtTrong CSS, chọn lớp 2 và xác định chiều rộng 80% của nó. Đây là phần tử container của nội dung tab. Xác định giá trị 3 cho ký quỹ để sắp xếp container này vào trung tâm của trang. .tile{
width:80%;
margin:60px auto;
}
Lớp 4 đại diện cho khu vực bảng điều khiển nơi bạn đặt nội dung Tab Tab. Chỉ định thuộc tính đệm có giá trị 5 để để lại một số khoảng trống xung quanh các bảng. Tương tự, đặt thuộc tính chiều cao và xác định giá trị theo chiều cao của nội dung. Trong trường hợp của tôi, tôi chỉ có một dòng trong mỗi bảng điều khiển. Vì vậy, tôi đã sử dụng 80px chiều cao, bạn có thể tăng nó theo nội dung của bạn. #tile-1 .tab-pane{
padding:15px;
height:80px;
}
Lớp 6 là phần tử container của các tab. Bạn chỉ cần xác định vị trí tương đối của nó. Các phong cách khác như nền và đường viền có thể được khai báo theo nhu cầu của bạn. #tile-1 .nav-tabs{
position:relative;
border:none!important;
background-color:#fff;
/* box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2); */
border-radius:6px;
}
Chọn thẻ LI của lớp Nav-tabs và xác định giá trị 7 cho lề để loại bỏ khoảng cách xung quanh các tiêu đề tabs. Tương tự, nhắm mục tiêu thẻ 8 và xác định vị trí tương đối của nó. Tương tự như vậy, chỉ định lề, đệm, kích thước phông chữ, đường viền và các thuộc tính màu với các giá trị sau: #tile-1 .nav-tabs li{
margin:0px!important;
}
#tile-1 .nav-tabs li a{
position:relative;
margin-right:0px!important;
padding: 20px 40px!important;
font-size:16px;
border:none!important;
color:#333;
}
Siêu liên kết bên trong lớp nav-tabs là tiêu đề của tab cho phép người dùng chuyển đổi giữa nội dung tab có liên quan. Chúng tôi không cần các kiểu di chuột mặc định bootstrap cho yếu tố này. Đối với mục đích này, chọn phần tử 8 với phân tách phân tử và xác định nền trắng. Tương tự như vậy, loại bỏ đường viền bằng thuộc tính Border với giá trị .tile{
width:80%;
margin:60px auto;
}
0.#tile-1 .nav-tabs a:hover{
background-color:#fff!important;
border:none;
}
Bây giờ, chọn lớp 1 và hiển thị nó dưới dạng khối nội tuyến. Chỉ định chiều rộng và chiều cao của nó với giá trị 30px và 4px tương ứng. Xác định màu nền, bán kính viền và đặt vị trí tuyệt đối của nó để làm động nó. Sử dụng thuộc tính chuyển đổi CSS để trượt trơn tru của gạch chân. #tile-1 .slider{
display:inline-block;
width:30px;
height:4px;
border-radius:3px;
background-color:#39bcd3;
position:absolute;
z-index:1200;
bottom:0;
transition:all .4s linear;
}
Cuối cùng, chọn lớp .tile{
width:80%;
margin:60px auto;
}
2 và xác định màu nền trong suốt. Xác định giá trị không cho đường viền và đặt màu như sau. Chúng tôi sẽ thêm lớp này (thông qua hàm JS) vào tiêu đề Tab Active để trượt gạch chân.#tile-1 .nav-tabs .active{
background-color:transparent!important;
border:none!important;
color:#39bcd3!important;
}
Chức năng gạch chân trượt với JSSau khi tạo HTML và CSS, bây giờ đã đến lúc làm động cho sự gạch chân. Để làm như vậy, chúng tôi sẽ sử dụng chức năng jQuery để thêm một lớp hoạt động vào tab hiện tại và làm nổi bật nó bằng vị trí bên trái. Vì vậy, tải jQuery và bootstrap 4 js vào dự án của bạn. Cuối cùng, thêm chức năng JavaScript sau sau các liên kết CDN ở trên và được thực hiện. 0 Đó là tất cả! Tôi hy vọng bạn đã tạo thành công các tab CSS với gạch chân trượt. Nếu bạn có bất kỳ câu hỏi hoặc đề xuất, hãy cho tôi biết bằng bình luận dưới đây. |
