CSS nav-up property
The CSS nav-up property is used to navigate through the navigation key from the keyboard. This property defines where to focus when the user is navigating by using the navigation key. The nav-up can be used with the nav-right, nav-down, and nav-left properties.
Syntax:
nav-up: auto | id | target-name | initial | inherit;
Attribute:
- auto: It is the default value here the browsers define which element to navigate.
- <id>: It defines the id to navigate.
- <target-name>: It defines the target to navigate.
- initial: It is the default value.
- inherit: It inherits from its parent element.
Note: Only Opera 12.0 is supported by this property. The below example illustrates the property.
Example: In this example, we are using the above-explained method.
html
<!DOCTYPE html> < html > < head > < title >CSS nav-up Property</ title > < link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" > < style > button { position: absolute; } h1 { color: green; } button { background-color: #80ff80; nav-right: auto; nav-left: auto; nav-down: auto; nav-up: auto; border-radius: 25px; font-size: 20px; } #Beginner1 { top: 35%; left: 43%; nav-index: 1; } #Beginner2 { top: 50%; left: 65%; nav-index: 2; } #Beginner3 { top: 65%; left: 43%; nav-index: 3; } #Beginner4 { top: 50%; left: 20%; nav-index: 4; } </ style > </ head > < body > < center > < h1 >w3wiki</ h1 > < h4 >CSS nav-up Property</ h4 > < p > Press the < samp >Shift</ samp > key while navigating with the arrow keys. </ p > </ center > < button id = "Beginner1" >Button < i class = "fa fa-arrow-circle-up" ></ i > </ button > < button id = "Beginner2" >Button < i class = "fa fa-arrow-circle-right" ></ i > </ button > < button id = "Beginner3" >Button < i class = "fa fa-arrow-circle-down" ></ i > </ button > < button id = "Beginner4" > < i class = "fa fa-arrow-circle-left" ></ i > Button </ button > </ body > </ html > |
Output:
Supported Browsers: The major browsers are not supported by CSS nav-up property
Browsers Specific Extension: The css nav-up property has browsers specific extension.
- Google Chrome -webkit-
- Internet Explorer -ms-
- Firefox -moz-
- Safari -webkit-
- Opera -webkit-
Contact Us