Định nghĩa và sử dụng navigate
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:
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; }
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; }
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: