Thuộc tính nav trong css3

Nặc danh 20:51

Nặc danh

Tài liệu hướng dẫn học css

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;
}