Một trong những phần cần phải làm cho một trang web có khả năng Responsive chính là phần Menu. Với một menu có khả năng hiển thị tốt trên nhiều kích thước màn hình khác nhau, sẽ giúp người dùng dễ dàng lựa chọn đến những trang mà họ muốn khi dùng các thiết bị duyệt web khác nhau.
Hiện nay có rất nhiều công cụ hỗ trợ giúp bạn làm điều này, như sử dụng CSS framework hoặc jQuery Plugin … Nhưng trong bài viết này, mình sẽ cùng các bạn tiến hành từng bước một , để tạo ra một menu có khả năng Responsive tốt.
HTML
Đầu tiên, chúng ta sẽ chèn meta viewport bên trong thẻ <head>, đây là việc cần làm khi bạn tạo một trang web có khả năng Responsive.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Sau đó, chúng ta sẽ tạo menu với đoạn html như sau :
<nav class="clearfix">
<ul class="clearfix">
<li><a href="#">Home</a></li>
<li><a href="#">How-to</a></li>
<li><a href="#">Icons</a></li>
<li><a href="#">Design</a></li>
<li><a href="#">Web 2.0</a></li>
<li><a href="#">Tools</a></li>
</ul>
<a href="#" id="pull">Menu</a>
</nav>
Như các bạn thấy ở trên, chúng ta có 6 link menu chính, và có thêm một link phụ . Đây chính là phần sẽ giúp chúng ta hiển thị menu khi duyệt web trên các thiết bị có kích thước màn hình nhỏ.
Phần CSS
Đầu tiên chúng ta sẽ định dạng cho phần body :
body {
background-color: #ece8e5;
}
Kế tiếp, chúng ta sẽ định dạng cho menu, thẻ nav sẽ có chiều rộng (width) là full màn hình, trong khi ul là nơi chứa các link menu sẽ có kích thước là 600px (Các bạn có thể tùy chỉnh giá trị này tùy theo số lượng link có trong menu của các bạn).
nav {
height: 40px;
width: 100%;
background: #455868;
font-size: 11pt;
font-family: 'PT Sans', Arial, sans-serif;
font-weight: bold;
position: relative;
border-bottom: 2px solid #283744;
}
nav ul {
padding: 0;
margin: 0 auto;
width: 600px;
height: 40px;
}
Kế tiếp, chúng ta sẽ cho menu sắp xếp theo chiều ngang từ trái sang phải :
nav li {
display: inline;
float: left;
}
Nếu các bạn chú ý ở phần HTML , chúng ta có chèn clearfix trong thuộc tính class cho cả 2 thẻ là nav và ul, cái này có mục đích là xóa bỏ tác dụng của float khi chúng ta dùng nó cho các thẻ li.
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
Mặc định , chúng ta có 6 menu links, và ấn định chiều rộng (width) là 600px, vì thế mỗi menu links sẽ có chiều rộng là 100px.
nav a {
color: #fff;
display: inline-block;
width: 100px;
text-align: center;
text-decoration: none;
line-height: 40px;
text-shadow: 1px 1px 0px #283744;
}
Mỗi một menu sẽ được ngăn cách bởi 1 đường viền bên phải. Để giữ cho menu luôn giữ được chiều rộng là 100px cho dù có phải thêm thuộc tínhborder, chúng ta sẽ sử dụng box-sizing .
nav li a {
border-right: 1px solid #576979;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
nav li:last-child a {
border-right: 0;
}
Kế tiếp, chúng ta sẽ định dạng :hover và :active cho menu links
nav a:hover, nav a:active {
background-color: #8c99a4;
}
Và cuối cùng, ẩn đi link sẽ dùng để hiển thị menu cho các thiết bị màn hình nhỏ.
nav a#pull {
display: none;
}
Vào lúc này chúng ta đã có một menu hoàn chỉnh, tuy nhiên, nó vẫn chưa có khả năng Responsive . Chúng ta sẽ tiến hành thêm ở bước kế tiếp.
Media Queries
CSS3 media queries sẽ giúp chúng ta định dạng CSS cho từng kích thước màn hình khác nhau.
Đầu tiên, chúng ta sẽ định dạng CSS cho các kích thước màn hình có chiều rộng nhỏ hơn 600px. Với các kích thước màn hình thế này, thì mỗi một menu sẽ được canh đều 2 bên, chiều rộng thẻ ul là 100% và mỗi một menu link sẽ có chiều rộng là 50%.
@media screen and (max-width: 600px) {
nav {
height: auto;
}
nav ul {
width: 100%;
display: block;
height: auto;
}
nav li {
width: 50%;
float: left;
position: relative;
}
nav li a {
border-bottom: 1px solid #576979;
border-right: 1px solid #576979;
}
nav a {
text-align: left;
width: 100%;
text-indent: 25px;
}
}
Sau đó , chúng ta sẽ định dạng cho các kích thước nhỏ hơn 480px hoặc thấp hơn. Trong kích thước này, link để hiển thị menu sẽ được xuất hiện.
@media only screen and (max-width : 480px) {
nav {
border-bottom: 0;
}
nav ul {
display: none;
height: auto;
}
nav a#pull {
display: block;
background-color: #283744;
width: 100%;
position: relative;
}
nav a#pull:after {
content:"";
background: url('nav-icon.png') no-repeat;
width: 30px;
height: 30px;
display: inline-block;
position: absolute;
rightright: 15px;
top: 10px;
}
}
Cuối cùng là cho các kích thước màn hình nhỏ hơn và không quá 320px.
@media only screen and (max-width : 320px) {
nav li {
display: block;
float: none;
width: 100%;
}
nav li a {
border-bottom: 1px solid #576979;
}
}
Bây giờ các bạn có thể kiểm tra trên nhiều loại màn hình với các kích thước khác nhau, sẽ thấy menu của chúng ta đã có khả năng Responsive rất tốt. Tuy nhiên khi click vào menu mở rộng để hiển thị các menu đối với các kích thước màn hình nhỏ vẫn chưa hoạt động. Chúng ta sẽ tiến hành ở bước kế tiếp.
Phần jQuery
Để hiển thị menu, chúng ta sẽ sử dụng hàm chức năng slideToggle() có trong jQuery. Các bạn copy đoạn code sau :
$(function() {
var pull = $('#pull');
menu = $('nav ul');
menuHeight = menu.height();
$(pull).on('click', function(e) {
e.preventDefault();
menu.slideToggle();
});
});
Tuy nhiên, khi các bạn trở lại với kích thước ban đầu của trình duyệt thì phần menu vẫn tiếp tục duy trì display:none được tạo bởi jQuery. Để giải quyết vấn đề này, các bạn thêm đoạn code sau :
$(window).resize(function(){
var w = $(window).width();
if(w > 320 && menu.is(':hidden')) {
menu.removeAttr('style');
}
});
Thế là mọi việc đã xong, để kiểm tra xem menu chúng ta đã có khả năng responsive hay không, các bạn có thể vào the Responsinator để mà kiểm tra trên nhiều loại thiết bị khác nhau.