nav-index property - script-tutorials.com

Definition and Usage

The ‘nav-index’ property is an input-method-neutral way of specifying the sequential navigation order (also known as “tabbing order”).

Name:	nav-index
Value:	auto \| <number> \| inherit
Initial:	auto
Applies to:	all enabled elements
Inherited:	no
Percentages:	n/a
Media:	interactive
Computed value:	specified value.

Syntax

nav-index: auto|number|inherit;

Values

auto: The element’s sequential navigation order is assigned automatically by the user agent.
<number>: The number (which is non-zero and positive) indicates the sequential navigation order for the element. ‘1‘ means first. Elements with the same nav-index value are navigated in document order when that nav-index value is being navigated.

Examples

01
button { position:absolute }

02
button#b1 {

03
        top:0; left:50%;

04
        nav-index:1;

05
        nav-right:#b2; nav-left:#b4;

06
        nav-down:#b2; nav-up:#b4;

07
}

08
button#b2 {

09
        top:50%; left:100%;

10
        nav-index:2;

11
        nav-right:#b3; nav-left:#b1;

12
        nav-down:#b3; nav-up:#b1;

13
}

14
button#b3 {

15
        top:100%; left:50%;

16
        nav-index:3;

17
        nav-right:#b4; nav-left:#b2;

18
        nav-down:#b4; nav-up:#b2;

19
}

20
button#b4 {

21
        top:50%; left:0;

22
        nav-index:4;

23
        nav-right:#b1; nav-left:#b3;

24
        nav-down:#b1; nav-up:#b3;

25
}