Định nghĩa và sử dụng
Di chuyển qua lại giữa các thành phần điều hướng (navigate) bằng cách di chuyển các phím mũi tên.
Cấu trúc
tag {
nav-right: #id1;
nav-left: #id2;
nav-down: #id3;
nav-up: #id4;
}
nav có các giá trị như sau:
| Thuộc tính | giá trị | Ví dụ | Mô tả |
|---|---|---|---|
| nav-left | id | nav-left: #nav; | Điều khiển bằng cách nhân Shift và mũi tên trái. |
| nav-right | id | nav-right: #nav; | Điều khiển bằng cách nhân Shift và mũi tên phải. |
| nav-top | id | nav-top: #nav; | Điều khiển bằng cách nhân Shift và mũi tên trên. |
| nav-bottom | id | nav-bottom: #nav; | Điều khiển bằng cách nhân Shift và mũi tên dưới. |
Ví dụ
HTML viết:
<html> <head></head> <body> <div> <button id="nav01">nav 01</button> <button id="nav02">nav 02</button> <button id="nav03">nav 03</button> <button id="nav04">nav 04</button> </div> </body> </html>
CSS viết:
div {
position: relative;
}
#nav01 {
position: absolute;
left: 50px;
top: 0;
}
#nav02 {
position: absolute;
left: 100px;
top: 50px;
}
#nav03 {
position: absolute;
left: 50px;
top: 100px;
}
#nav04 {
position: absolute;
left: 0;
top: 50px;
}
Hiển thị trình duyệt khi chưa có nav:
Thêm thuộc tính nav vào CSS:
div {
position: relative;
}
#nav01 {
position: absolute;
left: 50px;
top: 0;
nav-right: #nav02;
nav-left: #nav04;
nav-down: #nav03;
nav-up: #nav01;
}
#nav02 {
position: absolute;
left: 100px;
top: 50px;
nav-right: #nav02;
nav-left: #nav04;
nav-down: #nav03;
nav-up: #nav01;
}
#nav03 {
position: absolute;
left: 50px;
top: 100px;
nav-right: #nav02;
nav-left: #nav04;
nav-down: #nav03;
nav-up: #nav01;
}
#nav04 {
position: absolute;
left: 0;
top: 50px;
nav-right: #nav02;
nav-left: #nav04;
nav-down: #nav03;
nav-up: #nav01;
}
Hiển thị trình duyệt khi có nav:
Giữ Shift và nhấn các phím mũi tên để di chuyển giữa các button.
Trình duyệt và hệ điều hành hỗ trợ
Yêu cầu phiên bản trình duyệt và hệ điều hành tối thiểu được hỗ trợ cho thuộc tính nav:
| Trình duyệt PC | Smartphone - Tablets | |||||||
 |
 |
 |
 |
 |
 |
 |
 |
|
| nav | X | X | 12 | X | X | X | X | X |