Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Flexbox
Webdesign

Cách xây dựng một Thanh Điều hướng kiểu Dải băng với Flexbox

by
Difficulty:IntermediateLength:ShortLanguages:

Vietnamese (Tiếng Việt) translation by Dai Phong (you can also view the original English article)

Cảm ơn flexbox, ngày nay chúng ta có thể dễ dàng xây dựng một vài layout hiện đại và thật sự hấp dẫn. Trong hướng dẫn này chúng ta sẽ tìm hiểu giao diện được sử dụng gần đây cho Google National Parks, và xem cách flexbox có thể giúp chúng ta cải thiện nó.

Hãy luôn xem qua những gì mà chúng ta sẽ xây dựng trước khi bắt đầu tìm hiểu tiếp (bạn có thể cần kiểm tra phiên bản lớn hơn khi hiệu ứng đầy đủ thực thi trên các viewport rộng hơn 800px):

Hãy chắc là bạn di chuyển chuột lên trên các liên kết để kích hoạt các hiệu ứng tương ứng.

Mã HTML

Đầu tiên, hãy xem xét mã html mà chúng ta sẽ sử dụng để xây dựng layout này. Chúng ta định nghĩa một thành phần div với năm liên kết bên trong nó (bạn có thể sử dụng bất cứ thành phần nào mà bạn cảm thấy phù hợp). Mỗi liên kết của chúng ta chứa một thẻ div với tên lớp là overlay. Bên dưới bạn có thể thấy một cái sườn của code chúng ta:

Các CSS Style Ban đầu

Với mã html đã sẵn sàng, chúng ta bắt đầu định nghĩa vài style CSS đầu tiên, đặc biệt:

  • Thiết lập thẻ div ở ngoài cùng là một flex container và thiết lập chiều cao của nó bằng với chiều cao viewport với: height: 100vh.
  • Thiết lập một chiều dài bằng nhau cho tất cả các liên kết (các phần tử flex). Để đạt được điều đó, chúng ta thiết lập mỗi cái là flex: 1. Ngoài ra, tất cả các liên kết của chúng ta sẽ có một hình nền (nguồn từ unsplash.com) bao quát chiều cao của viewport. Như là một dự phòng (trong trường hợp một hình ảnh không tồn tại), chúng ta sẽ thiết lập một màu nền duy nhất cho mỗi cái.
  • Khi chúng ta di chuyển chuột lên một liên kết, kích thước của nó trở nên lớn hơn gấp ba lần, tương đối với kích thước của các liên kết khác. Chúng ta làm điều này bằng cách thay đổi giá trị của thuộc tính flex của liên kết mà ta nhắm tới. Thật may là thuộc tính này thuộc về các thuộc tính animated CSS, vì vậy chúng ta có thể tạo ra một hiệu ứng chuyển động mượt mà (ít nhất là trong các trình duyệt mới).

Dưới đây là phần code CSS minh hoạ những gì mà chúng ta mô tả ở trên:

Đến đây, nếu chúng ta xem lại demo trong một trình duyệt có hỗ trợ flexbox thì chúng ta sẽ thấy kết quả này:

Trang trí cho Overlay

Bước tiếp theo là thiết lập một số style cho overlay. Dưới đây là những gì chúng ta sẽ làm:

  • Tạo cho overlay cùng kích thước với liên kết cha của nó. Chúng ta có thể đạt được điều này bằng cách định vị trí cho nó là tuyệt đối (tương đối với cha của nó) và sau đó thiết lập giá trị 0 cho tất cả các thuộc tính offset.
  • Định nghĩa overlay như là một flex container. Bằng cách này, chúng ta có thể canh giữa các thành phần con trực tiếp của nó (ví dụ phần tử .overlay-inner) theo chiều dọc và chiều ngang.
  • Thêm một nền màu xám với 50% trong suốt vào overlay khi chúng ta di chuyển chuột lên liên kết đó.

Dưới đây là các style CSS gắn liền với nó:

Overlay bên trong

Bây giờ đến lúc trang trí các phần bên trong của overlay của chúng ta. Mặc định những cái này là ẩn và chỉ nên xuất hiện khi chúng ta di chuyển chuột lên liên kết cha tương ứng. Nhưng không tức thời, mà chúng ta sẽ biểu lộ chúng sau một khoảng trễ nhỏ. Khoảng trễ này là quan trọng; nếu chúng ta không định nghĩa nó một cách đặc biệt, thì hiệu ứng chuyển động sẽ trông xấu đi một tí. Xoá nó và kiểm tra thử demo để hiểu những gì tôi nói.

Do đó chỉ cần khôi phục lại, đầu tiên liên kết sẽ lớn hơn, sau đó các thành phần overlay sẽ hiện thị. Đồng thời, chúng ta sử dụng translate3d() để tạo một vài hiệu ứng trượt vào. Cuối cùng nhưng không kém phần quan trọng, chúng ta sử dụng transform-style: preserve-3d (hoặc một cái tương tự) để ngăn ngừa khả năng các hiệu ứng bị khựng trên các trình duyệt khác nhau.

Và dưới đây là các style CSS liên quan:

Hãy xem nó đã cho chúng ta những gì.


Tính đáp ứng

Trang web trông rất tuyệt trên các màn hình lớn, tuy nhiên trên các màn hình nhỏ, hoặc ngay cả các màn hình vừa chúng ta sẽ phải làm một số điều chỉnh. Ví dụ, dưới đây là một số thứ chúng ta có thể làm:

  • Lật ngược trục chính của flex container bằng cách thêm flex-direction: column vào nó. Bằng cách làm vậy thì các phần tử flex sẽ trôi từ trên xuống dưới.
  • Huỷ bỏ tất cả các hiệu ứng chuyển động và mặc định hiện thị các thành phần overlay.

Media query ưu tiên desktop của chúng ta trông như ở dưới (Tôi chỉ sử dụng 800px bởi vì điều đó phù hợp với các minh hoạ được nhúng vào trong bài viết này–bạn có thể chọn bất cứ kích thước nào mà bạn thấy tốt nhất):

Dưới đây là kết quả cuối cùng của thanh điều hướng của chúng ta:

Trình duyệt hỗ trợ

Demo hoạt động trên hầu hết các trình duyệt mới nhất mà có hỗ trợ flexbox.

Trên một số trình duyệt bạn có thể để ý thấy rằng hiệu ứng chuyển động của thuộc tính flex không thật sự mượt mà như vốn có, hoặc có thể không hoạt động luôn. Ví dụ, IE11 không thực thi thuộc tính này, trong khi Edge thì có. Điều này là hợp lý, thực tế rằng flexbox là một kiểu layout mới mà vẫn còn đang phát triển.

Kết thúc

Trong bài hướng dẫn này, chúng ta đã cải thiện kiến thức về flexbox của chúng ta bằng cách học cách xây dựng một layout điều hướng mang phong cách rất riêng. Hy vọng bạn thích thú với những gì mà chúng ta xây dựng ở đây và có được một vài cảm hứng cho các dự án tiếp theo của bạn!

Nếu như bạn xây dựng một layout tương tự, đừng quên cho chúng tôi xem cách (CSS thuần tuý, hoặc dựa trên JavaScript) mà bạn sử dụng nhé.

Thực tế sử dụng

Trước khi kết thúc, tôi muốn chia sẻ với bạn một vài trang web mà sử dụng layout tương tự những gì mà chúng ta vừa mới tạo:

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.