Thuộc tính nav trong CSS3

Đị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ínhgiá trịVí dụMô tả
nav-leftidnav-left: #nav;Điều khiển bằng cách nhân Shift và mũi tên trái.
nav-rightidnav-right: #nav;Điều khiển bằng cách nhân Shift và mũi tên phải.
nav-topidnav-top: #nav;Điều khiển bằng cách nhân Shift và mũi tên trên.
nav-bottomidnav-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:

Bình luận