Advertisement
  1. Code
  2. Front-End

Tạo một Menu Điều hướng Dạng trượt cho các Thiết kế Responsive

by
Read Time:4 minsLanguages:

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

Trong hướng dẫn này, bạn sẽ tạo một side menu có thể mở rộng bằng JavaScript và CSS. Kết quả cuối cùng sẽ như sau:

Sliding Side Navigation MenuSliding Side Navigation MenuSliding Side Navigation Menu

Markup

Để bắt đầu, hãy thêm một số markup cho side menu của chúng ta:

Ở đây bạn có thể thấy chúng ta đã tạo một div cho side menu với class sidenav. Tiếp theo, chúng ta thêm thanh điều hướng top bar thật sự thông qua thẻ <nav> và chúng ta sử dụng SVG cho biểu tượng side menu của chúng ta.

Thuộc tính onclick của biểu tượng và button close sẽ kích hoạt một số JavaScript mà chúng ta sẽ thêm vào tiếp theo.

Hãy nhớ đặt tất cả các nội dung của trang web bên trong container div id="main" để nó sẽ trượt sang bên phải.

JavaScript

Tiếp theo, chúng ta hãy thêm JavaScript để tạo các hàm openNavcloseNav.

CSS

Cuối cùng, chúng ta cần phải tạo kiểu dáng cho trang web của chúng ta với một số CSS cho side menu và các liên kết của chúng ta:

Lưu ý: body {overflow-x: hidden;} là cần thiết để đảm bảo thanh cuộn ngang không xuất hiện khi sử dụng nó với CSS hiện có của bạn.

Bây giờ bạn có thể xem thử menu và thử nghiệm nó ở trong trình duyệt của bạn.

Sử dụng jQuery

Nếu bạn muốn tạo side menu JavaScript bằng jQuery, bạn có thể thực hiện việc này bằng cách thay thế code JavaScript mà tôi đã cung cấp trước đó bằng phần code sau đây:

Huỷ bỏ Hiệu ứng trượt

Để làm cho menu xuất hiện mà không có hiệu ứng trượt, chỉ cần thực hiện thay đổi đối với thuộc tính transition của CSS, như minh hoạ ở dạng viết tắt dưới đây:

Điều này sẽ làm cho nó hiện ra ngay lập tức vì không có delay được xác định trong transition. Mặc định chúng ta sử dụng là 0.5 giây.

Phần tóm tắt

Tạo một side menu chỉ mất vài dòng code và không cần sử dụng nhiều tài nguyên. Ngoài ra, nếu jQuery đã có ở trên trang cho các tác vụ khác, thì công việc có thể được thực hiện với ít code và tùy chỉnh hơn nữa.

Làm cho code đáp ứng với các độ phân giải màn hình khác nhau chỉ đơn thuần là trường hợp sửa đổi CSS bằng cách thêm Media Queries cho các trường hợp cụ thể.

Để cải tiến menu này, bạn có thể trang trí cho menu của mình bằng một framework CSS như Bootstrap hoặc Bulma.

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.