Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
34 Tabs CSS Javascript Cho Website Năm 2021

34 Tabs CSS Javascript Cho Website Năm 2021


Ngày 8 Tháng 7 Năm 2020

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é:

Ví dụ về tab navigation

Navbar Tab HTML

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.

Nguồn

CSS Tab

CSS Tab

Kết quả bạn xem bên dưới nha.

See the Pen CSS Tabs by Eric Sadowski (@ejsado) on CodePen.

Nguồn

Animated Transition Tabs

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.

Nguồn

Material Design CSS Tabs

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.

Nguồn

Horizontal Scrolling Tabs

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.

Nguồn

Pure CSS Tabs

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.

Nguồn

Tabs HTML CSS

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.

Nguồn

Simple Jquery Tabs

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.

Nguồn

HTML Tab Example

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.

Nguồn

HTML Tab With Icon

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.

Nguồn

Responsive Tab UI

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.

Nguồn

HTML Tabs Javascript

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.

Nguồn

JQuery Multiple Tabs

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.

Nguồn

Tab Switch Animation CSS

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.

Nguồn

Vertical Tabs

Vertical Tabs

Kết quả bạn xem bên dưới nha.

See the Pen Tab UI by Hilo (@hilotacker) on CodePen.

Nguồn

Beautiful Tabs CSS

Beautiful Tabs CSS

Kết quả bạn xem bên dưới nha.

See the Pen Tabs by Nikita Jadhao (@jdniki) on CodePen.

Nguồn

Tabs Hover Effects

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.

Nguồn

CSS Tabs Without Javascript

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.

Nguồn

Vertical Tabs With Smooth Animation

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.

Nguồn

CSS Only Tabs

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.

Nguồn

RESPONSIVE CSS TABS

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.

Nguồn

3D CSS Tabs

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.

Nguồn

Pure CSS Tab Navigation

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.

Nguồn

Responsive Tabs CSS Only

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.

Nguồn

Simple Responsive Tabs With Javascript And CSS

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.

Nguồn

Pure CSS Tabs Responsive

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.

Nguồn

Tabs CSS With Image

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.

Nguồn

Tabs CSS3 HTML5

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.

Nguồn

Simple Tabs CSS Collection

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.

Nguồn

Tabs In HTML Using CSS

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.

Nguồn

Animated tabs

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.

Nguồn

CSS Animation Transition Tabs

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.

Nguồn

Tabs CSS Using Icon

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.

Nguồn

Tabs Javascript With TweenMax

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.

Nguồn

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ẻ!