CSS nav-left property
The CSS nav-left property is used to navigate the webpage by navigation key from the keyboard. This nav-left defines where to focus when the user is navigating by using the navigation key. The nav-left can be used with the nav-right, nav-up, and nav-down properties.
Syntax:
nav-left: auto|id|target-name|initial|inherit;
Attribute:
- auto: It is the by 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 default value.
- inherit: It inherits from its parent element.
Note: Only Opera 12.0 is supported by this property. The below example illustrates the CSS nav-left property:
Example: In this example, we are using the above-explained method.
html
<!DOCTYPE html> < html > < head > < title >CSS nav-left 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-left 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 do not support CSS nav-left property.
Contact Us