Ngày hôm nay chúng ta sẽ đi vào tìm hiểu cách tạo thẻ tab và thêm hiệu ứng animation cho nó bằng HTML CSS và Javascript nhé! Phần đầu tiên chúng ta sẽ đi vào tạo hai file là Trong phần này chúng ta sẽ đi vào
thêm các thẻ HTML cần thiết để tạo component tab thông qua đoạn mã sau nhé:Tạo Cấu Trúc Cho Component Tab
index.html[nơi lưu trữ HTML] và style.css[nơi lưu trữ mã CSS]. Sau đó liên kết chúng với Font Awesome v4.7 và Google Font thông qua đoạn mã dưới đây nhé:HTML
Tạo Component Tab
Tạo Cấu Trúc Cho Component Tab
HTML
Trang Chủ
Hướng dẫn tab css beautiful
Về Chúng Tôi
Dịch Vụ
Liên Hệ
Phần Tab Thể Hiện Trang Chủ
Lorem ipsum dolor sit amet consectetur...
Phần Tab Thể Hiện Về Chúng Tôi
Lorem ipsum dolor sit amet consectetur...
Phần Tab Thể Hiện Về Dịch Vụ
Lorem ipsum dolor sit amet consectetur...
Phần Tab Thể Hiện Về Liên Hệ
Lorem ipsum dolor sit amet consectetur...
Và kết quả bạn xem hình ảnh bên dưới nha:
Thiết Lập Vị Trí Cho Tab
Trong phần này chúng ta sẽ đi vào thiết lập một số thuộc tính CSS tổng quát cho component tab như là font chữ, vị trí trong trang web, padding, độ bo góc... Để hiểu rõ hơn bạn xem đoạn code sau nhé:
CSS
body{
background: #ddd;
font-family: Roboto;
}
.tab{
position: absolute;
top: 50%;
left: 50%;
transform: translate[-50%, -50%];
width: 500px;
height: 250px;
background: #f5f5f5;
padding: 20px 30px;
overflow: hidden;
border-radius: 50px;
box-shadow: 0 1px 1px rgba[0,0,0,0.12],
0 2px 2px rgba[0,0,0,0.12],
0 4px 4px rgba[0,0,0,0.12],
0 8px 8px rgba[0,0,0,0.12],
0 16px 16px rgba[0,0,0,0.12];
}
Và kết quả bạn xem hình ảnh bên dưới nhé:
Thiết Lập Style Cho Tab Header
Trong phần tiếp theo bạn hãy cùng mình đi vào thiết lập lại style cho tab header để các thành phần trong nó có thể nằm thẳng hàng với nhau và nhìn có tính thẩm mỹ hơn nhé :
CSS
.tab .tab-header{
height: 60px;
display: flex;
align-items: center;
}
.tab .tab-header > div{
width: calc[100% / 4];
text-align: center;
color: #888;
font-weight: 500;
cursor: pointer;
font-size: 16px;
text-transform: uppercase;
outline: none;
}
.tab .tab-header > div > i {
display: block;
margin-bottom: 5px;
}
.tab .tab-header > div.active{
color: #00acee;
}
Và kết quả bạn xem hình bên dưới nha:
Thêm CSS cho Thẻ Tab Body
Trong phần này chúng ta sẽ đi vào
thiết lập CSS cho hai thành phần .tab-indicator[Thanh Tiến Trình Cho Tab] và .tab-body[Nội Dung Của Thẻ Tab] thông qua đoạn code dưới đây nhé:
CSS
.tab .tab-indicator {
position: relative;
width: 25%;
height: 5px;
background: #00acee;
left: 0px;
border-radius: 5px;
transition: all 500ms ease-in-out;
}
.tab .tab-body{
position: relative;
height: calc[100% - 60px];
padding: 10px 5px;
}
.tab .tab-body > div{
position: absolute;
top: -200%;
opacity: 0;
margin-top: 5px;
transform: scale[0.9];
transition: opacity 500ms ease-in-out 0ms,
transform 500ms ease-in-out 0ms;
}
.tab .tab-body > div.active{
top: 0px;
opacity: 1;
transform: scale[1];
margin-top: 0px;
}
Và kết quả bạn xem dưới đây nha:
Thêm Chức Năng Cho Tab Bằng Javascript
Sau khi đã thiết kế xong phần giao diện thì bước tiếp theo chúng ta sẽ thêm chức năng cho component tab thông qua đoạn mã Javascript sau nhé:
Javascript
/*Lấy Các Phần Tử Trong Thẻ DOM*/
let tabHeader = document.getElementsByClassName["tab-header"][0];
let tabIndicator = document.getElementsByClassName["tab-indicator"][0];
let tabBody = document.getElementsByClassName["tab-body"][0];
let tabsPane = tabHeader.getElementsByTagName["div"];
/*Thực Hiện Vòng Lặp*/
for [let i = 0; i
Chủ Đề