Bài viết hôm sẽ giới thiệu về các component tab được xây dựng bằng CSS, Javascript giúp quá trình phát triển và thiết kế web của bạn được tốt hơn cũng như nâng cao trải nghiệm người dùng khi sử dụng website. Bây giờ chúng ta hãy cùng nhau đi vào tìm hiểu các component tab được sử dụng phổ biến trong năm 2021 nhé!
Component tab là gì?
Component tab là một yếu tố điều hướng đước sử dụng trong trang web giúp người dùng có thể dễ dàng truy cập những nội dung khác nhau thông qua việc click vào các tiêu đề ở trên component tab. Nó giúp bạn có thể tối ưu được tỉ lệ chiếm trang của các thành phần trong trang web với mục đích chính là giúp người dùng có thể khái quát được nội dung ta muốn truyền đạt cũng như việc hiển thị trên những thiết bị như điện thoại được ngăn nắp và gọn gàng hơn.
Một số lưu ý khi bạn sử dụng component tab là:
- Phải hiển thị tab nào đang được active để người dùng có thể xác định được vị trí của mình đang ở nội dung nào.
- Nên hiển thị các tiêu đề tab cùng nằm trên một hàng.
- Sử dụng từ ngữ ngắn gọn và xúc tích nhất có thể cho tiêu đề của từng tab.
- Các tiêu đề đề phải có liên quan đến một chủ đề nào đó.
- Tránh tình trạng tải lại trang khi người dùng chuyển sang các tab khác.
Để dễ hình dung hơn bạn xem ví dụ sau đây nhé:
Navbar Tab HTML
Kết quả bạn xem bên dưới nha.
See the Pen Navbar Nudging w/ Chris Coyier | Three Person Collaborative Animation Tutorial | @keyframers 2.14.0 by @keyframers (@keyframers) on CodePen.
CSS Tab
Kết quả bạn xem bên dưới nha.
See the Pen CSS Tabs by Eric Sadowski (@ejsado) on CodePen.
Animated Transition Tabs
Kết quả bạn xem bên dưới nha.
See the Pen Tabs. Pitaya CSS by Flkt Crnpio (@flkt-crnpio) on CodePen.
Material Design CSS Tabs
Kết quả bạn xem bên dưới nha.
See the Pen Material Design CSS Only Tabs by Ben Mildren (@mildrenben) on CodePen.
Horizontal Scrolling Tabs
Kết quả bạn xem bên dưới nha.
See the Pen Scroll for Tabs by Praveen Kumar Gorakala (@onlyveen) on CodePen.
Pure CSS Tabs
Kết quả bạn xem bên dưới nha.
See the Pen Pure CSS Tabs by Wallace Erick (@wallaceerick) on CodePen.
Tabs HTML CSS
Kết quả bạn xem bên dưới nha.
See the Pen CSS3 Tabs by Sorax by YozhEzhi (@YozhEzhi) on CodePen.
Simple Jquery Tabs
Kết quả bạn xem bên dưới nha.
See the Pen Flying cards tabs by Biliana (@interstellar) on CodePen.
HTML Tab Example
Kết quả bạn xem bên dưới nha.
See the Pen Light & Sexy Tabs by Alex Lime (@CoffeeCupDrummer) on CodePen.
HTML Tab With Icon
Kết quả bạn xem bên dưới nha.
See the Pen Featured Tabs by Richard Gonyeau (@RGonyeau) on CodePen.
Responsive Tab UI
Kết quả bạn xem bên dưới nha.
See the Pen Toggle Tabs by Derek Palladino (@derekjp) on CodePen.
HTML Tabs Javascript
Kết quả bạn xem bên dưới nha.
See the Pen Daily UI #007 | Settings by Julie Park (@juliepark) on CodePen.
JQuery Multiple Tabs
Kết quả bạn xem bên dưới nha.
See the Pen CSS TABS by Ramnek Singh (@Ramnk7) on CodePen.
Tab Switch Animation CSS
Kết quả bạn xem bên dưới nha.
See the Pen Tab bar active animation #2 by Aaron Iker (@aaroniker) on CodePen.
Vertical Tabs
Kết quả bạn xem bên dưới nha.
See the Pen Tab UI by Hilo (@hilotacker) on CodePen.
Beautiful Tabs CSS
Kết quả bạn xem bên dưới nha.
See the Pen Tabs by Nikita Jadhao (@jdniki) on CodePen.
Tabs Hover Effects
Kết quả bạn xem bên dưới nha.
See the Pen Tabs - CSS + JS by Rafaela Lucas (@rafaelavlucas) on CodePen.
CSS Tabs Without Javascript
Kết quả bạn xem bên dưới nha.
See the Pen Pure CSS Tabs With Indicator by woranov (@woranov) on CodePen.
Vertical Tabs With Smooth Animation
Kết quả bạn xem bên dưới nha.
See the Pen Vertical tabs with smooth animation by Benjamin Koehler (@codesuey) on CodePen.
CSS Only Tabs
Kết quả bạn xem bên dưới nha.
See the Pen No JS: Tabs that scale down to menu by Jake Albaugh (@jakealbaugh) on CodePen.
RESPONSIVE CSS TABS
Kết quả bạn xem bên dưới nha.
See the Pen Responsive Flexbox Tabs / Accordion - CSS Only by Josh Vogt (@josh_vogt) on CodePen.
3D CSS Tabs
Kết quả bạn xem bên dưới nha.
See the Pen 3D Cube for tabbed content by Kara Olthof (@raevenk) on CodePen.
Pure CSS Tab Navigation
Kết quả bạn xem bên dưới nha.
See the Pen Pure CSS Tab Navigation by Izzy Skye (@chrysokitty) on CodePen.
Responsive Tabs CSS Only
Kết quả bạn xem bên dưới nha.
See the Pen Pure CSS responsive tabset with dynamic height by JamieKDonnelly (@JamieKDonnelly) on CodePen.
Simple Responsive Tabs With Javascript And CSS
Kết quả bạn xem bên dưới nha.
See the Pen Tabs from Codyhouse by Gigg Hemwattakit (@gigghem) on CodePen.
Pure CSS Tabs Responsive
Kết quả bạn xem bên dưới nha.
See the Pen Pure CSS tabs by Jay Pick (@japick) on CodePen.
Tabs CSS With Image
Kết quả bạn xem bên dưới nha.
See the Pen Features tabs with click css-animation by Danil Goncharenko (@Danil89) on CodePen.
Tabs CSS3 HTML5
Kết quả bạn xem bên dưới nha.
See the Pen Responsive pure css tabs by Prakash (@imprakash) on CodePen.
Simple Tabs CSS Collection
Kết quả bạn xem bên dưới nha.
See the Pen Accessible(?) and responsive tabs, no JS by Poppe1219 - Frontend and Backend Developer (@poppe1219) on CodePen.
Tabs In HTML Using CSS
Kết quả bạn xem bên dưới nha.
See the Pen Tabs by Axelaredz (@axelaredz) on CodePen.
Animated tabs
Kết quả bạn xem bên dưới nha.
See the Pen Animated Content Tabs with CSS3 by Angel Komander (@AngelKrak) on CodePen.
CSS Animation Transition Tabs
Kết quả bạn xem bên dưới nha.
See the Pen just another Css tabs (:checked) by Kseso (@Kseso) on CodePen.
Tabs CSS Using Icon
Kết quả bạn xem bên dưới nha.
See the Pen CSS Tabs Revisited by Eric Sadowski (@ejsado) on CodePen.
Tabs Javascript With TweenMax
Kết quả bạn xem bên dưới nha.
See the Pen Stretchy Tab & Springy Content Slider w/bursts by Craig Roblewsky (@PointC) on CodePen.
Tổng kết:
Qua đây mình mong bài viết sẽ cung cấp thêm cho bạn những component tab hữu ích dành 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ẻ!