Thuộc tính nav
Đị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; } Thuộc tính: Thuộc tính giá trị Mô tả nav-left id Điều khiển bằng cách nhân Shift và mũi […]
Đị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;
}
Thuộc tính:
| Thuộc tính | giá trị | Mô tả |
|---|---|---|
| nav-left | id | Điều khiển bằng cách nhân Shift và mũi tên trái. |
| nav-right | id | Điều khiển bằng cách nhân Shift và mũi tên phải. |
| nav-top | id | Điều khiển bằng cách nhân Shift và mũi tên trên. |
| nav-bottom | id | Đ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:
CSS viết:
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:
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 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ợ:
| Trình duyệt PC | Smartphone – Tablets | |
| nav | Internet Explorer – Không hỗ trợ | IOS – Không hỗ trợ |
| Firefox – Không hỗ trợ | Android – Không hỗ trợ | |
| Opera 12 | Window Phone – Không hỗ trợ | |
| Google Chrome – Không hỗ trợ | ||
| Safari – Không hỗ trợ |
