Thuộc tính nav trong CSS3

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
Internet Explorer Firefox Opera Chrome Safari IOS Android Window phone
nav X X 12 X X X X X

Viết câu trả lời

Drop Images

0 Bình luận