Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. Navigation Design
Webdesign

Cách xây dựng một Menu Off-Canvas bằng CSS và một ít JavaScript

by
Difficulty:BeginnerLength:ShortLanguages:

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

Trong bài hướng dẫn này, chúng ta sẽ tìm hiểu qua một phương pháp đơn giản nhưng hiệu quả để tạo ra một menu off-canvas với HTML, CSS và JavaScript.

Để hình dung ý tưởng ban đầu về những gì chúng ta sẽ xây dựng, hãy xem bản demo trên CodePen (xem phiên bản lớn hơn để có trải nghiệm tốt hơn):

Lưu ý: Bài hướng dẫn này sẽ không tập trung vào cách làm thế nào để làm cho menu off-canvas có khả năng truy cập hoặc đáp ứng, vì thế những điều đó chắc chắn sẽ là các bước tiếp theo.

1. Bắt đầu với Markup

Markup của chúng ta bao gồm hai phần tử wrapper:

  • phần tử .top-banner
  • phần tử .top-nav

Đây là code HTML:

2. Tiếp theo chúng ta cần một số CSS

Khi markup đã sẵn sàng, tiếp theo hãy xem các style quan trọng nhất cần thiết cho menu của chúng ta.

Lưu ý: Để cho dễ đọc, code CSS này không được tối ưu hoá-bạn sẽ thấy các thuộc tính trùng lặp mà bạn có thể muốn loại bỏ trong phiên bản của riêng bạn.

Style phần tử top-banner

Phần tử .top-banner trông giống như sau:

How the top-banner element looks like

Đối với style của nó, chúng ta làm như sau:

  • Thiết lập chiều rộng của nó bằng chiều rộng window trừ đi chiều rộng của phần tử .menu-wrapper.
  • Thiết lập chiều cao bằng chiều cao của window.
  • Định nghĩa nó như là một flex container. Điều này sẽ buộc lớp overlay của nó che phủ toàn bộ chiều cao phần tử cha của nó.
  • Sử dụng flexbox canh giữa theo chiều dọc nội dung của lớp overlay.

Dưới đây là các style mà chúng ta cần để đạt được tất cả những điều đó:

Style phần tử top-nav

Phần tử .top-nav trông như sau:

How the top-nav element looks like

Trong trường hợp này, chúng ta sẽ thực hiện như sau:

  • Chỉ định các phần tử con trực tiếp như là các phần tử fix bao phủ chiều cao của window.
  • Sử dụng flexbox để căn giữa theo chiều dọc phần tử .fixed-menu.
  • Mặc định ẩn phần tử .menu-wrapper. Để làm như vậy, chúng ta sẽ không cung cấp cho nó một giá trị thuộc tính kiểu như display: none. Thực tế, chúng ta sử dụng hàm translate() để di chuyển nó sang trái 200px. Hãy nhớ rằng, chiều rộng của phần tử là 350px, do đó một phần của nó vẫn nằm trong khung nhìn. Tuy nhiên, nó không hiển thị vì phần tử được đặt bên dưới phần tử .fixed-menu.
  • Ẩn danh sách menu.

Hãy cùng xem các style CSS tương ứng dưới đây:

3. Bây giờ là một ít JavaScript

Lúc này, chúng ta sẽ sử dụng một số code JavaScript đơn giản để thao tác lên trạng thái của menu.

Nào hãy mô tả những action cần thiết:

  • Khi nhấp vào nút .menu-open, menu sẽ xuất hiện với một hiệu ứng trượt khá đẹp và lớp overlay phải được đẩy đồng thời về bên phải. Ngoài ra, chúng ta có thể làm nhiều điều hơn trong trạng thái này. Trong ví dụ của chúng ta, chúng ta thêm một box-shadow vào phần tử giả ::before của lớp phủ và hiện danh sách menu ra bằng cách sử dụng hiệu ứng fade-in.
  • Khi nhấn vào nút .menu-close, menu sẽ biến mất với hiệu ứng trượt đẹp mắt và lớp phủ phải được đẩy đồng thời sang trái.

Đây là code JavaScript để thực hiện hành vi này:

Và dưới đây bạn sẽ tìm thấy các kiểu CSS liên quan:

4. Trình duyệt Hỗ trợ

Bản demo này sẽ hoạt động tốt trên trình duyệt desktop. Thiết bị di động sẽ yêu cầu một bố cục khác, nhưng nằm ngoài phạm vi của hướng dẫn này. Như thường lệ, chúng tôi sử dụng Babel để biên dịch code ES6 xuống ES5.

Chỉ có một vấn đề nhỏ duy nhất mà tôi gặp phải trong khi thử nghiệm nó là sự thay đổi hiển thị văn bản xảy ra khi lớp phủ đang được hoạt hình. Mặc dù tôi đã thử các cách làm khác nhau được đề xuất trên Stack Overflow nhưng tôi vẫn chưa thể tìm ra giải pháp đơn giản cho tất cả các hệ điều hành và trình duyệt. Vì vậy, hãy nhớ rằng bạn có thể nhìn thấy các vấn đề nhỏ khi kết xuất phông chữ trong khi lớp phủ đang được hoạt hình.

Tóm tắt

Đơn giản thôi các bạn! Chúng đã xoay sở để xây dựng một menu off-canvas hữu ích với code tương đối đơn giản.

Tôi hy vọng bạn thích kết quả sau cùng và bạn sẽ sử dụng nó như là nguồn cảm hứng cho việc tạo ra các menu off-canvas mạnh mẽ hơn nữa. Và tất nhiên, nếu bạn có xây dựng bất kỳ cái nào, đừng quên chia sẻ chúng với chúng tôi nhé!

Tìm hiểu thêm về Các kỹ thuật Off-Canvas

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.