Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
35 Tabs Xây Dựng Bằng CSS Javascript Cho Website Năm 2020

35 Tabs Xây Dựng Bằng CSS Javascript Cho Website Năm 2020


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

35 Tabs Xây Dựng Bằng CSS Javascript Cho Website 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 2020 nhé!

Vậy component tab là gì? Có nhiệm vụ như thế nào trong trang web?

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 Nudging w/ Chris Coyier

See the Pen Navbar Nudging w/ Chris Coyier | Three Person Collaborative Animation Tutorial | @keyframers 2.14.0 by @keyframers (@keyframers) on CodePen.

Tabby Tabs

See the Pen Tabby Tabs by SC (@Sarah_C) on CodePen.

CSS Tabs

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

Tabs. Pitaya CSS

See the Pen Tabs. Pitaya CSS by Flkt Crnpio (@flkt-crnpio) on CodePen.

Scroll for Tabs

See the Pen Scroll for Tabs by Praveen Kumar Gorakala (@onlyveen) on CodePen.

Material Design CSS Only Tabs

See the Pen Material Design CSS Only Tabs by Ben Mildren (@mildrenben) on CodePen.

Pure CSS Tabs

See the Pen Pure CSS Tabs by Wallace Erick (@wallaceerick) on CodePen.

CSS3 Tabs by Sorax

See the Pen CSS3 Tabs by Sorax by YozhEzhi (@YozhEzhi) on CodePen.

Flying cards tabs

See the Pen Flying cards tabs by Biliana (@interstellar) on CodePen.

Light & Sexy Tabs

See the Pen Light & Sexy Tabs by Alex Lime (@CoffeeCupDrummer) on CodePen.

Featured Tabs

See the Pen Featured Tabs by Richard Gonyeau (@RGonyeau) on CodePen.

Toggle Tabs

See the Pen Toggle Tabs by Derek Palladino (@derekjp) on CodePen.

Daily UI #007 | Settings

See the Pen Daily UI #007 | Settings by Julie Park (@juliepark) on CodePen.

CSS TABS

See the Pen CSS TABS by Ramnek Singh (@Ramnk7) on CodePen.

Tab bar active animation #2

See the Pen Tab bar active animation #2 by Aaron Iker (@aaroniker) on CodePen.

Tab UI

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

Tabs

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

Tabs - CSS + JS

See the Pen Tabs - CSS + JS by Rafaela Lucas (@rafaelavlucas) on CodePen.

Pure CSS Tabs With Indicator

See the Pen Pure CSS Tabs With Indicator by Alex (@woranov) on CodePen.

Vertical tabs with smooth animation

See the Pen Vertical tabs with smooth animation by Benjamin Koehler (@Benny29390) on CodePen.

No JS: Tabs that scale down to menu

See the Pen No JS: Tabs that scale down to menu by Jake Albaugh (@jakealbaugh) on CodePen.

Responsive Flexbox Tabs / Accordion - CSS Only

See the Pen Responsive Flexbox Tabs / Accordion - CSS Only by Josh Vogt (@josh_vogt) on CodePen.

3D Cube for tabbed content

See the Pen 3D Cube for tabbed content by Kara Olthof (@raevenk) on CodePen.

Pure CSS Tab Navigation

See the Pen Pure CSS Tab Navigation by Izzy Skye (@chrysokitty) on CodePen.

Pure CSS responsive tabset with dynamic height

See the Pen Pure CSS responsive tabset with dynamic height by JamieKDonnelly (@JamieKDonnelly) on CodePen.

Tabs from Codyhouse

See the Pen Tabs from Codyhouse by Gigg Hemwattakit (@gigghem) on CodePen.

Pure CSS tabs

See the Pen Pure CSS tabs by Jay Pick (@japick) on CodePen.

Features tabs with click css-animation

See the Pen Features tabs with click css-animation by Danil Goncharenko (@Danil89) on CodePen.

Responsive pure css tabs

See the Pen Responsive pure css tabs by Prakash (@imprakash) on CodePen.

responsive tabs, no JS

See the Pen Accessible(?) and responsive tabs, no JS by Poppe1219 - Frontend and Backend Developer (@poppe1219) on CodePen.

Tabs

See the Pen Tabs by Axelaredz (@axelaredz) on CodePen.

Animated Content Tabs with CSS3

See the Pen Animated Content Tabs with CSS3 by Angel Komander (@AngelKrak) on CodePen.

just another Css tabs (:checked)

See the Pen just another Css tabs (:checked) by Kseso (@Kseso) on CodePen.

CSS Tabs Revisited

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

Stretchy Tab & Springy Content Slider w/bursts

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

Load WooCommerce Stores in 249ms!