Nav index property (nav-index)

The nav-index property specifies the sequential navigation order ("tabbing order") for an element.

Syntax:

selector {

nav-index: auto | number | initial | inherit;

}

Values:

auto; The default value which allows browser to determine the element tabbing.
number; The tabbing order of the element, with ‘1’ being first.
initial, inherit

NOTE: The nav-properties are only supported in Opera 12 and some earlier versions (at the moment).

Example

The CSS3 navigation properties example (nav-index, nav-down, nav-up, nav-left, nav-right):

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p {
    width:80%; margin:2%; padding:2%px;  
}
button {
    position: absolute;
    width:30%; height:30px; overflow:hidden;
    margin:4%;
    font-family:serif; font-size:16px;
    border:2px outset rgba(100,255,100,0.5); border-radius:4px;
    background-color:rgba(100,255,100,0.2);
}

button#b1 {
    top: 20%; left: 25%;
    nav-index: 1;
    nav-right: #b2; nav-left: #b4;
    nav-down: #b2; nav-up: #b4;
}

button#b2 {
    top: 40%; left: 50%;
    nav-index: 2;
    nav-right: #b3; nav-left: #b1;
    nav-down: #b3; nav-up: #b1;
}

button#b3 {
    top: 60%; left: 25%;
    nav-index: 3;
    nav-right: #b4; nav-left: #b2;
    nav-down: #b4; nav-up: #b2;
}

button#b4 {
    top: 40%; left: 0%;
    nav-index: 4;
    nav-right: #b1; nav-left: #b3;
    nav-down: #b1; nav-up: #b3;
}
 /* ADD proprietary selectors if needed */
</style>
</head>
  
<body>

<button id="b1">top</button>
<button id="b2">right</button>
<button id="b3">bottom</button>
<button id="b4">left</button>

<p>Hold down the <strong>Shift Key</strong> while navigating with the arrow keys.</p>


</body>
</html>

›› go to examples ››

Nav index property (nav-index)

Syntax:

Values:

Example

The CSS3 navigation properties example (nav-index, nav-down, nav-up, nav-left, nav-right):

Comments

About

Contact

Get Connected