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 =
< 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;
}
#Geeks1 {
top: 35%;
left: 43%;
nav-index: 1;
}
#Geeks2 {
top: 50%;
left: 65%;
nav-index: 2;
}
#Geeks3 {
top: 65%;
left: 43%;
nav-index: 3;
}
#Geeks4 {
top: 50%;
left: 20%;
nav-index: 4;
}
</ style >
</ head >
< body >
< center >
< h1 >GeeksforGeeks</ h1 >
< h4 >CSS nav-left Property</ h4 >
< p >
Press the < samp >Shift</ samp >
key while navigating with the arrow keys.
</ p >
</ center >
< button id = "Geeks1" >Button
< i class = "fa fa-arrow-circle-up" ></ i >
</ button >
< button id = "Geeks2" >Button
< i class = "fa fa-arrow-circle-right" ></ i >
</ button >
< button id = "Geeks3" >Button
< i class = "fa fa-arrow-circle-down" ></ i >
</ button >
< button id = "Geeks4" >
< 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.
Last Updated :
09 Jun, 2023
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...