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 =
< 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-up 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 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-
Last Updated :
09 Jun, 2023
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...