Đị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:
Ví dụ
HTML viết:
nav 01
nav 02
nav 03
nav 04
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:
nav 01
nav 02
nav 03
nav 04
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:
nav 01
nav 02
nav 03
nav 04
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:
Link liên quan
- HTML/XHTML
- CSS
- class
@keyframes
opacity