header-object

CSS - Responsive Navigation Menu

Ngoài thiết kế responsive dành cho thiết bị di động, có 1 kỹ thuật mới để tạo ra responsive menu mà không nhất thiết phải sử dụng Javascript, sử dụng ngôn ngữ HTML5 để tạo menu có khả năng căn chỉnh lề trái, phải hoặc giữa. Không đơn thuần chỉ là thao tác nhấp vào để chuyển đổi mà đối với menu này chỉ cần rê chuột vào sẽ tự động chuyển đổi và thân thiện hơn với người sử dụng, đồng thời sẽ có ký hiệu hướng dẫn hiển thị trên các menu item. Thiết kế dạng này có thể hoạt động được trên tất cả các trình duyệt của thiết bị di động và desktop, kể cả Internet Explorer.

1. Mục đích

Biến đổi 1 menu dạng list thông thường thành kiểu menu dạng dropdown theo dạng hiển thị nhỏ gọn

res-nav-menu-muc-dich

Thủ thuật này rất hữu ích đối với các thanh chuyển hướng có nhiều liên kết như hình bên dưới, chúng ta có thể gộp các nút lệnh lại thành 1 menu dạng dropdown.

res-nav-menu-dropdown

2. Nav HTML

Thẻ <nav> để tạo menu dạng dropdown  thông qua định dạng CSS định vị tuyệt đối

<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> 

3. CSS

Sử dụng định dạng display:inline-block thay vì dùng float:left trong thẻ <li>, như vậy các nút lệnh trên menu sẽ được canh chỉnh trái, giữa, phải thông qua lệnh text-align trong thẻ <ul>

/* 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;
}

4. Canh chỉnh bên phải và ở giữa

Thay đổi vị trí canh chỉnh của các nút lệnh bằng cách dùng lệnh “text-align”

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

5. Hỗ trợ Internet Explorer

Thẻ <nav> trong HTML5 và truy vấn media không được Internet Explorer 8 trở lên hỗ trợ nên sử dụng css3-mediaqueries.js (hoặc respond.js) và html5shim.js để dự phòng. Nếu bạn không muốn dùng html5shim.js thì có thể thay thế thẻ <nav> bằng thẻ <div>

<!--[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]-->

6. Responsive

Trên breakpoint 600px, chúng ta thiết lập các phần tử nav theo định dạng vị trí tương đối (relative position), có thể đặt thẻ <ul> làm menu dạng list trên trên top với định dạng vị trí tuyệt đối (absolute position). Chúng ta ẩn các phần tử <li> bằng lệnh display:none nhưng định dạng các thẻ <li> hiện tại hiển thị dạng block. Sau đó, khi rê chuột vào thanh chuyển hướng thì ta thiết lập tất cả các phần tử <li> trở lại định dạng display:block (xuất hiện menu dạng dropdown).
Chúng ta thêm thuộc tính icon check vào  phần tử .current mang tín hiệu đó là 1 item hoạt động. Đối với các meny canh chỉnh giữa và phải thì ta sử dụng thuộc tính leftright đặt trong thẻ <ul>

@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

Bình luận  

 
0 #1 long nhat Thứ 4-06-15 19:46
newbie đọc cái này ko hiểu lắm
Trích dẫn
 

Thêm ý kiến


Security code
Làm mới


2

Facebook

Thống kê truy cập

Hiện có 747 khách đang truy cập
2491908