La propiedad CSS nav-up se usa para navegar a través de la tecla de navegación desde el teclado. Esta propiedad define dónde enfocarse cuando el usuario navega usando la tecla de navegación. La navegación hacia arriba se puede usar con la propiedad nav-right , nav-down y nav-left .
Sintaxis:
nav-up: auto | id | target-name | initial | inherit;
Atributo:
- auto: Es el valor predeterminado aquí, los navegadores definen qué elemento navegar.
- <id>: Define el id para navegar.
- <target-name>: Define el objetivo a navegar.
- inicial: Es el valor por defecto.
- heredar: hereda de su elemento padre.
Nota: esta propiedad solo admite Opera 12.0.
El siguiente ejemplo ilustra la propiedad:
Ejemplo 1
<!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;
}
#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>
<div>
</div>
</body>
</html>
Producción:
Navegadores compatibles: los principales navegadores no son compatibles con la propiedad de navegación hacia arriba de CSS
Extensión específica de los navegadores: la propiedad css nav-up tiene una extensión específica de los navegadores.
- Google Chrome -webkit-
- Internet Explorer -ms-
- Firefox -moz-
- Safari -webkit-
- Ópera -webkit-
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA