Tạo menu dạng responsive với CSS

Trong hướng dẫn này tôi và các bạn sẽ tìm hiểu về cách viết 1 Menu dạng Responsive. Thế Responsive là gì ? Responsive là một kỹ thuật giúp website của bạn có thể tương thích với các màn hình có độ phân giải khác nhau từ màn hình mobile đến màn hình PC.
Mục đích của hướng dẫn này là tạo 1 menu giống như hình bên dưới khi màn hình thay đổi kích thước ví dụ như chuyển sang kích thước của màn hình của điện thoại. Xem demo

​

Khi kích thước màn hình co giãn thì menu của bạn cũng thay đổi tương tự như hình bên dưới

​

Hướng dẫn thực hiện
1. Dựng khung HTML
Thẻ <nav> được sử dụng để tạo dropdown menu (menu xổ) và được gán thuộc tính CSS position là absolute. Chúng ta sẽ khai báo thuộc tính này trong phần phía sau. Ngoài ra, trong danh sách thẻ <li> bạn nên khai báo một lớp .current để đánh dấu dòng này sẽ hiện thị lên khi màn hình co giãn còn các thẻ <li> khác sẽ tự động ẩn đi.

HTML:

<nav class="nav">
<ul>
<li class="current"><a href="#">Portfolio</a></li>
<li><a href="#">Illustration</a></li>
<li><a href="#">Web Design</a></li>
<li><a href="#">Print Media</a></li>
<li><a href="#">Graphic Design</a></li>
</ul>
</nav>

2. Xây dựng CSS
Trước tiên chúng ta cần xây dựng CSS cho Website cho màn hình Desktop . Trong phần này, chúng ta sẽ sử dụng thuộc tínhdisplay:block-inline để thể thay cho thuộc tính float:left của thẻ <li>. Ngoài ra, chúng ta sẽ sử dụng thuộc tính text-algin để canh trái, giữa, phải các phần tử trên thẻ <ul>

Mã:

/* nav */
.nav {
position: relative;
margin: 20px 0;
}
.nav ul {
margin: 0;
padding: 0;
}
.nav li {
margin: 0 5px 10px 0;
padding: 0;
list-style: none;
display: inline-block;
}
.nav a {
padding: 3px 12px;
text-decoration: none;
color: #999;
line-height: 100%;
}
.nav a:hover {
color: #000;
}
.nav .current a {
background: #999;
color: #fff;
border-radius: 5px;
}

Canh giữa, trái phải các phần tử

Mã:

/* right nav */
.nav.right ul {
text-align: right;
}
/* center nav */
.nav.center ul {
text-align: center;
}

Tương thích với trình duyệt Internet Explorer
Thẻ <nav> và các truy vấn media của HTML5 không được hỗ trợ trong IE8 hoặc cũ hơn, chính vì vậy bạn phải thêm các thư viện css3-mediaqueries.js (or respond.js) and html5shim.js để khắc phục vấn đề này. Nếu bạn không muốn sử dụng các thư viện hàm này bạn có thể thay thế thẻ <nav> bằng thẻ <div> bình thường trong HTML.

Mã:

<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/files/css3-mediaqueries.js"></script>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Xây dựng CSS Responsive Menu
Đây là phần mấu chốt ván đề của chúng ta. Ở đây tôi sẽ lấy điểm móc cho màn hình là 600px nếu kích thước màn hình nhỏ hơn 600px thì mặc định thì trình duyệt sẽ tự động sử dụng CSS Responsive bên dưới để thay thế CSS chúng ta khai báo bên trên.

Mã:

@media screen and (max-width: 600px) {
.nav {
position: relative;
min-height: 40px;
}
.nav ul {
width: 180px;
padding: 5px 0;
position: absolute;
top: 0;
left: 0;
border: solid 1px #aaa;
background: #fff url(images/icon-menu.png) no-repeat 10px 11px;
border-radius: 5px;
box-shadow: 0 1px 2px rgba(0,0,0,.3);
}
.nav li {
display: none; /* hide all <li> items */
margin: 0;
}
.nav .current {
display: block; /* show only current <li> item */
}
.nav a {
display: block;
padding: 5px 5px 5px 32px;
text-align: left;
}
.nav .current a {
background: none;
color: #666;
}
/* on nav hover */
.nav ul:hover {
background-image: none;
}
.nav ul:hover li {
display: block;
margin: 0 0 5px;
}
.nav ul:hover .current {
background: url(images/icon-check.png) no-repeat 10px 7px;
}
/* right nav */
.nav.right ul {
left: auto;
right: 0;
}
/* center nav */
.nav.center ul {
left: 50%;
margin-left: -90px;
}
 
}

Nguồn: webdesignerwall.com​