Tạo Responsive Menu với CSS và jQuery
Bài đăng này đã không được cập nhật trong 6 năm
Ngày nay, người dùng sử dụng rất nhiều thiết bị khác nhau để truy cập một website như máy tính để bàn, laptop, smartphone hay tablet, mỗi loại thiết bị lại có kích thước độ phân giải khác nhau nên việc tạo ra một website responsive là việc làm rất cần thiết và quan trọng, nó giúp ta đỡ mất công phải đi xây dựng nhiều phiên bản web tương ứng cho các độ phân giải màn hình khác nhau. Một trong những việc làm đó là tạo ra một menu có khả năng responsive tốt bởi vì menu chính là nơi để người dùng thao tác nhiều nhất khi duyệt và xem website, và menu cũng là thứ đập ngay vào mắt người xem đầu tiên khi website được load ra. 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 Framwork hỗ trợ tốt cho ta làm việc này như Foundation, Bootstrap,... nhưng trong bài viết này mình xin được hướng dẫn các bạn code một Menu Responsive đơn giản.
Cũng như bình thường khi code, chúng ta cần tạo ra các file HTML, CSS và Jquery
Ở file HTML
Đầu tiên, chúng ta sẽ sử dụng và chèn thẻ 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ẽ code HTML như sau bằng việc dùng các thẻ div
<nav class="clearfix">
<ul class="clearfix">
<li><a href="#">Home</a></li>
<li><a href="#">Product</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Forum</a></li>
</ul>
<a href="#" id="pull">Menu</a>
</nav>
Như các bạn thấy ở trên, chúng ta sẽ tạo ra 5 link menu chính được đặt trong các thẻ <li>, và có thêm một link phụ "Menu". Đấy chính là phần sẽ hiện thị ra trên các thiết bị có màn hình nhỏ để duyệt website và nó sẽ đại diện cho menu chính, người dùng click vào nó menu chính mới hiện ra, cho đỡ tốn diện tích.
Ở file CSS
Chúng ta sẽ style cho menu này một ít để hiện thị đẹp hơn, màu sắc bắt mắt hơn
Đầu tiên chúng ta sẽ định dạng css cho phần body để có màu sắc đẹp hơn:
body {
background-color: #ece8e5;
}
Kế tiếp, chúng ta sẽ định dạng thuộc tính css cho phần menu, thẻ nav sẽ có chiều rộng (width) là full màn hình, còn ul là nơi chứa các link menu sẽ có kích thước là 550px.
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: 550px;
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 các thẻ li hiển thị trên cùng một hàng ngang :
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ó 5 menu links, và ấn định chiều rộng (width) là 550px, vì thế mỗi menu links sẽ có chiều rộng là 110px.
nav a {
color: #fff;
display: inline-block;
width: 110px;
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à 110px cho dù có phải thêm thuộc tính border, 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;
}
Tiếp theo ta sẽ định dạng cho sự kiện khi hover và active, :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;
}
Lúc này đây, ta đã tạo ra được một menu bình thường nhưng chưa có khả năng responsive, chúng at sẽ tiếp tục làm việc này bằng cách sử dụng Media Queries của CSS3 như sau:
Media Queries
CSS3 Media Queries sẽ giúp chúng at khai báo và định dạng thuộc tính style css cho từng kích thước màn hình hiện thị khác nhau.
Chúng ta sẽ sử dụng @media để áp dụng css cho màn hình có độ phân giải nhỏ hơn 600px đổ về như sau:
@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;
}
}
kế sau đó là ta sẽ đi định dạng css cho các loại màn hình có kích thước nhỏ hơn 480px
@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;
}
}
Như vậy sau khi sử dụng media queries là đã tạo ra được một menu có khả năng responsive tốt trên các độ phân giải màn hình khác nhau nhưng chú ý ở đây là với các loại màn hình nhỏ như Mobile thì phần menu rút gọn đã xuất hiện nhưng khi ta click vào đó thì toàn bộ menu chưa được show ra, vì vậy cần thêm một ít Jquery nữa cho thao tác này
Phần jQuery
Đểshow ra được toàn bộ menu khi click vào phần thu gọn, ta sẽ sử dụng hàm chức năng slideToggle() có trong jQuery như 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 đang duy trì display:none được tạo bởi jQuery do đó nó chưa trở lại bình thường theo ý ta mong muốn nên. Để 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.
Chúc các bạn thành công !
All rights reserved
