The nav-up property specifies where to navigate when using the arrow-up navigation key. As other nav properties, this one is currently not well supported by browsers.

Syntax:

selector { 

    nav-up: auto | id | target-name | initial | inherit;

}

Values:

These values may be assigned to the nav-up property:

  • auto; The default value which allows browser to determine which element to navigate to.
  • id; The ‘id’ attribute of the element to navigate to.
  • target­-name; The target frame to navigate to.
  • 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):

​x
 
<!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;
}
​

 

›› go to examples ››