Thiết kế website responsive với CSS – phần 1: Menu

Trước đây, việc truy cập internet chủ yếu là từ máy vi tính (desktop). Do đó, website thường chỉ được thiết kế để tương thích với kích thước màn hình desktop. Tuy nhiên, hiện nay, mọi người có thể truy cập vào website từ rất nhiều các thiết bị khác nhau: máy tính, máy tính bảng (tablet), điện thoại (smart phone),…với nhiều kích thước màn hình khác nhau. Do đó, website cần phải được thiết kế sao cho tương thích với mọi thiết bị. Vì vậy, tôi sẽ hướng dẫn các bạn thiết kế website responsive với CSS.

1. Thiết kế website responsive là gì?

Thiết kế website responsive là làm cho website tương thích với tất cả các thiết bị (desktops, tablets, phones). Công việc này bao gồm thay đổi kích thước, ẩn-hiện, di chuyển phần tử,…

Ví dụ: Bạn có thể tham khảo tại đây.

  • Giao diện trang web trên desktop:

thiet-ke-website-responsive-voi-css-phan-1-menu-desktop

  • Giao diện trang web trên phone:

http://phamvanlam.com/wp-content/uploads/2017/04/thiet-ke-website-responsive-voi-css-phan-1-menu-phone.png

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

2. Các phương pháp thiết kế website responsive

Để thiết kế website responsive, bạn có thể sử một số phương pháp sau đây:

  • CSS Float, thiết kế theo cột
  • Flex Container
  • Sử dụng Framework responsive như: Bootstrap, W3.CSS,…

Mỗi cách sẽ có những ưu nhược điểm riêng.

Với hai cách đầu tiên:

  • Ưu điểm là: bạn có thể tự ý tuỳ biến, mã nguồn nhẹ.
  • Nhược điểm là: sẽ mất thời gian hơn và không phải ai cũng có thể thiết kế đẹp được.

Với cách sử dụng Framework:

  • Ưu điểm là: thiết kế nhanh, đẹp
  • Nhược điểm là: mã nguồn sẽ nặng hơn do bạn phải tải toàn bộ thư viện, nếu không tuỳ biến thì website của bạn trông rất giống với những website khác.

Trong loạt bài thiết kế website responsive này, tôi sẽ sử dụng CSS Float để thiết kế. Những cách khác, hẹn gặp lại bạn ở những phần sau.

3. Thiết kế menu responsive cho website

Menu là một thành phần không thể thiếu cho website. Đối với kích thước màn hình desktop, menu thường để dàn trải theo chiều ngang. Nhưng với kích thước màn hình tablet hay phone, bạn sẽ không có đủ kích thước để hiển thị. Do đó, cách tốt nhất là hiển thị menu theo chiều dọc màn hình.

Sau đây sẽ là các bước thực hiện thiết kế website responsive với menu:

Bước 1: Code HTML (index.html)

Phần responsive.jsresponsive.css tôi sẽ giới thiệu sau. Ở đây, Menu sẽ được đóng gói trong thẻ <div>. Mỗi mục của menu sẽ là một thẻ <a> (link). Ngoài ra, thẻ <a> với class=”icon” dùng để đóng mở menu khi kích thước màn hình nhỏ.

Chú ý: Thành phần quan trọng ở đây đó là thẻ <meta>. Ý nghĩa của thẻ này là dùng để xác định kích thước của viewport (vùng hiển thị) dựa theo chiều rộng của màn hình. Nếu không có thẻ này thì website sẽ không thể responsive theo chiều rộng của màn hình.

Hiện tại, tôi chưa thiết kế file responsive.jsresponsive.css nên bạn có thể comment 2 dòng đó lại để xem kết quả hiện tại:

http://phamvanlam.com/wp-content/uploads/2017/04/thiet-ke-website-responsive-phan-1-menu-add-html.png

Bước 2: Thêm CSS (responsive.css)

Giải thích chi tiết từng đoạn code:

Cấu hình thanh menu:

  • topnav: chính là class  ứng với thẻ <div> – chính là thanh menu
  • background-color: #333: cài đặt màu nền cho thanh menu. Bạn có thể thay đổi tuỳ thích.
  • overflow: hidden: Thực tế, thuộc tính overflow sẽ có các giá trị là: visible, hidden, scroll, auto, inherit (bạn có thể tham khảo về overflow tại đây). Còn ở đây, khi tôi đặt giá trị của overflow là hidden thì chiều cao của thanh menu sẽ được xác định bằng với phần tử trong nó – là các link. (Tôi không đặt giá trị cho thuộc tính height).
Cấu hình các mục (link) trên thanh menu

  • float: left: để dồn các mục về phía tay trái. Bạn cũng có thể dùng float: right để dồn menu về phía tay phải.
  • display: block: cấu hình các mục của menu là một block chứ không phải chỉ mỗi dòng chữ (link).
  • color, text-align, padding, text-decoration, font-size: những phần này đơn giản là để trang trí cho menu.
Tạo hiệu ứng khi di chuyển chuột đến các mục của menu

  • a:hover : dùng để cấu hình cho thẻ <a> khi chuột hover.
  • Tôi thay đổi background-color (màu nền) và color (màu chữ).
Ẩn icon (đóng mở menu) khi ở màn hình rộng

  • display: none: để ẩn class=”icon”
Ẩn các mục của menu khi màn hình nhỏ

  • Ở bài này, tôi thiết kế theo kiểu desktop trước. Với những bài sau tôi sẽ giới thiệu cách Mobile-First (thiết kế cho điện thoại trước).
  • Tôi dùng @media screen and (max-width: 600px) để cấu hình menu khi độ rộng màn hình tối đa là 600px – nghĩa là màn hình điện thoại
  • .topnav a:not(:first-child) {display: none;}: tất cả các thẻ <a> đều ẩn đi, trừ thẻ đầu tiên (home)
  • float: right: dùng để đưa link với class=”icon” sang bên phải màn hình.
  • display: block: hiển thị link dạng block
Hiển thị menu khi người dùng nhấn vào icon phía bên phải

  • Tôi vẫn dùng @media screen and (max-width: 600px) để cấu hình menu khi độ rộng màn hình tối đa là 600px. Vì trường hợp nhấn vào icon bên phải chỉ xảy ra với trường hợp màn hình nhỏ.
  • Ở đây, xuất hiện một lớp mà trong html không có. Đó là “responsive”. Thực tế là khi nhấn vào icon, tôi sẽ sử dụng Javascript để add thêm class cho “topnav” (tôi sẽ trình bày sau đây). Nghĩa là phần này chỉ có ý nghĩa khi người dùng nhấn vào icon bên phải màn hình.
  • Lúc này, menu tôi để position:relative để các phần tử bên trong nó tôi có thể sử dụng position:absolute.
  • Đối với icon, tôi sẽ cho nó ở phía trên bên phải của thanh menu (position: absolute; top: 0; right: 0;)
  • Đối với các mục menu (link), tôi cho float:none lúc này các mục menu sẽ không dồn sang trái nữa, kết hợp với display: block thì chúng sẽ chiếm trọn chiều ngang màn hình.
  • Chữ trên các mục menu tôi để phía bên trái: text-align: left
Kết quả:

Giao diện trên máy tính:

http://phamvanlam.com/wp-content/uploads/2017/04/thiet-ke-website-responsive-phan-1-menu-add-css-desktop.png

 

 

 

 

 

 

 

 

Giao diện trên điện thoại:

http://phamvanlam.com/wp-content/uploads/2017/04/thiet-ke-website-responsive-menu-giao-dien-dien-thoai.png

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Lúc này, nếu bạn nhấn vào icon phía bên phải thanh menu thì vẫn chưa có hiện tượng gì xảy ra. Tiếp theo tôi sẽ thêm phần xử lý javascript.

Bước 3: Xử lý Javascript (responsive.js)

  • Trong phần HTML tôi đã xét:
  • Nghĩa là class=”icon” sẽ thực hiện hành động trong hàm myFunction() khi nó được click.
  • Trước tiên, lấy phần tử với id là “myTopnav” dùng document.getElementById(“myTopnav”)
  • Lúc đầu, phần tử này chỉ thuộc lớp “topnav”. Ta sẽ gán thêm giá trị lớp cho nó là “responsive”: x.className += ” responsive”. Lúc này, các mục menu sẽ được hiển thị (theo phần css ở trên)
  • Khi menu đã được mở ra, nghĩa là nó sẽ thuộc 2 lớp là “topnav” và “responsive”. Nếu ta nhấn vào icon phía bên phải một lần nữa thì lúc này giá trị của thuộc tính lớp sẽ chỉ là “topnav”: x.className = “topnav”. Và menu sẽ lại bị ẩn đi.

Kết quả khi nhấn vào icon:

http://phamvanlam.com/wp-content/uploads/2017/04/thiet-ke-website-responsive-menu-giao-dien-phone-open.png

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Như vậy, tôi đã xây được được một thanh menu responsive cơ bản cho website. Nếu bài viết của tôi có chỗ nào chưa rõ, tôi rất vui nếu như bạn để lại góp ý xuống phần bình luận phía dưới. Qua đó, tôi sẽ nâng cao chất lượng các bài viết tiếp theo.

Bài sau tôi sẽ tiếp tục với phần thiết kế layout responsive cho website. Hẹn gặp bạn ở bài viết tiếp theo.
LP Devs.

1 bình luận

  1. LP Devs Post authorReply

    Bài đầu tiên trong loạt bài thiết kế website responsive với css cơ bản – menu. Bài sau tôi sẽ tiếp tục thiết kế layout responsive cho website.

Leave a Reply

Your email address will not be published. Required fields are marked *