HƯỚNG DẪN TẠO MENU RESPONSIVE VỚI CSS

Hướng dẫn tạo trình đơn ứng với CSS

1. Cấu trúc menu

Chúng ta bắt đầu với việc xây dựng một menu bình thường trước cho dễ hiểu. Sử dụng thẻ  là để xây dựng menu là thói quen trước giờ của nhiều anh em làm dev. Chúng ta cũng sẽ bắt đầu như thế.

Code:
Mở Menu

HTML
CSS
Sass
JS
PHP
Ruby
iOS
Android

Bây giờ chúng ta sẽ đi sâu vào chỉnh sửa các yếu tố CSS để hoàn thiện menu. Do mục đích của mình là thực hiện nó cho di động nên đầu tiên menu sẽ được ẩn đi. Khi class .open được thêm vào thì menu này mới mở ra. Chúng ta cũng thiết lập một số thuộc tính của list như không hiển thị danh sách dạng list,

được thiết lập dạng khối (block). Thứ quan trọng nhất phải thiết lập đó là màu nền của menu phải khác với màu nền của trang web để khiến nó nổi lên. Ngoài ra, để các menu trông đẹp hơn, chúng ta sẽ thiếp lập màu sắc khác nhau chuyển dần từ trái sang phải.

Ngoài ra, khi con trỏ chuột nằm trên menu nào, chúng ta sẽ thực hiện một số hiệu ứng cho menu đó để tạo cảm giác tương tác cho người truy cập. Điều này được thực hiện thông qua sự kiện :hover của CSS. Và đây sẽ là các mã CSS mà mình sẽ viết:

Code:

/* nav styles */
nav.cmn-tile-nav {
  display: none;
}
nav.cmn-tile-nav.open {
  display: block;
}
nav.cmn-tile-nav ul {
  list-style: none;
}
nav.cmn-tile-nav li {
  display: block;
  overflow: hidden;
  transition: background 0.3s;
}
nav.cmn-tile-nav a {
  display: block;
  padding: 20px;
  color: #fff;
  transition: background 0.3s, transform 0.3s;
}
nav.cmn-tile-nav a:hover {
  transform: translateX(20px);
}
 
/* thay doi 8 mau khac nhau cho 8 li */
/* --- BEGIN --- */
nav.cmn-tile-nav li.colour-1,
nav.cmn-tile-nav li.colour-1 a {
  background-color: #28aadc;
}
nav.cmn-tile-nav li.colour-1:hover,
nav.cmn-tile-nav li.colour-1:hover a {
  background-color: #166888;
}
/* --- END --- */
 
/* smoother transitions */
nav.cmn-tile-nav li,
nav.cmn-tile-nav a {
  transform: translate3d(0, 0, 0);

Vậy là xong phần CSS.

Media Queries

Sau khi định dạng các style sẽ sử dụng, chúng ta sẽ thiết lập các giá trị CSS tiếp theo để có thể tùy biến theo kích cỡ màn hình khác nhau. Chúng ta thiết lập các điểm dừng tương ứng với kích cỡ(chiều rộng) của từng loại màn hình và định dạng CSS tương ứng khi ở các kích cỡ màn hình đó. Ví dụ như ở kích thước màn hình 480px, độ rộng của menu sẽ được giảm xuống còn 50% của kích thước màn hình.

Code:

@media all and (min-width: 480px) {
  nav.cmn-tile-nav {
    display: block;
  }
  nav.cmn-tile-nav li {
    width: 50%;
    float: left;
  }
}

Tiếp theo, ở kích thước màn hình là 768px, chúng ta sẽ cho chiều rộng của mỗi phần tử trong menu bằng 25% độ rộng màn hình (nghĩa là sẽ có 4 phần tử nằm trên cùng 1 hàng). Ngoài ra, chúng ta cũng có vài tùy chỉnh về mặc hiệu ứng :hover nếu muốn. Trong ví dụ này, thay vì di chuyển text sang phải, tôi sẽ cố định chiều ngang và di chuyển text lên 20px.

Code:
@media all and (min-width: 768px) {

nav.cmn-tile-nav li {
    width: 25%;
  }
  nav.cmn-tile-nav a {
    text-align: center;
    padding: 60px 20px 20px 20px;
  }
  nav.cmn-tile-nav a:hover {
    transform: translateX(0);
    transform: translateY(-20px);
  }
}

Cho một kích thước màn hình chuẩn trên nền desktop, mình sẽ quy định đối với kích thước màn hình từ 1024px trở lên menu sẽ nằm ngang. Ngoài ra, sẵn tiện chúng ta có thể thay đổi một chút hiệu ứng vào như sau:

Code:

@media all and (min-width: 1024px) {
  nav.cmn-tile-nav li {
    overflow: visible;
    width: 12.5%;
  }
  nav.cmn-tile-nav a {
    padding: 80px 20px 20px 20px;
  }
  nav.cmn-tile-nav a:hover {
    transform: translateY(20px);
  }
}

Vậy là ổn rồi, nếu bạn muốn thức hiện cho các kích cỡ màn hình khác, bạn có thể tìm thấy chúng trong bộ công cụ dành cho responsive webdesigner (8 công cụ hữu ích cho bạn làm Responsive Web Design) mà mình đã cung cấp trước đây.

Làm nút Đóng/Mở menu

Tiếp theo chúng ta sẽ làm công cụ để đóng và mở menu. Các nghiên cứu đã chỉ ra rằng với kích thước màn hình nhỏ hơn 480px bạn không nên bật menu ra mà hãy luôn đóng nó lại để tiết kiệm không gian. Cho nên mình sẽ để menu ở chế độ đóng khi kích thước màn hình là 480px và menu sẽ mở ra nếu kích thước lớn hơn. Việc xây dựng nút bấm này khá đơn giản:

Code:

a.nav-toggle {
  display: block;
  margin-bottom: 20px;
  padding: 20px;
  background-color: #dce6f0;
  color: #646464;
  text-align: center;
}
a.nav-toggle:hover {
  background-color: #c8d2dc;
}
/* the breakpoint same as above */
@media all and (min-width: 480px) {
  a.nav-toggle {
    display: none;
  }
}

JavaScript

Để có thể mở và đóng menu thuận tiện, như đã nói ở trên chúng ta có thể thêm class .open để mở và xóa class này đi để đóng menu. Điều quan trọng là bạn thực hiện nó khi người dùng click chuột lên nút đóng/mở menu. Bạn có thể tự viết một đoạn JS khá dễ để làm việc này. Ngoài ra có thể sử dụng một số plugin có sẵn như classie.js. Code của bạn sẽ như thế này:

Code:

(function(window){
 
  var nav = document.querySelector("nav.cmn-tile-nav"),
      nav_toggle = document.querySelector("a.nav-toggle");
 
  nav_toggle.addEventListener("click", function(e){
    e.preventDefault();
    classie.toggle(nav, "open");
  });
 
})(window);

Vậy là xong !

Qua hướng dẫn này, điều mình muốn nói với các bạn là việc thực hiện responsive khá đơn giản, chỉ cần bạn có một chút kiến thức về CSS và hiểu biết về kích thước màn hình là bạn có thể thực hiện nó dễ dàng. Quan trọng hơn để bạn có thể làm được đó là làm đi làm lại thường xuyên, sử dụng các tiện ích và tối ưu giao diện thường xyên để nâng cao khả năng của mình lên.

facebook:  https://www.facebook.com/Websitevietnam123

demo:   http://www.mediafire.com/download/gx9pcp4g8jn3c2s/eshopper.zip

Thiết kế Responsive Web: Navigation