La propiedad CSS nav-right 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. El nav-right se puede usar con la propiedad nav-left , nav-up y nav-down .
Sintaxis:
nav-right: 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-right 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-right 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">Button
<i class="fa fa-arrow-circle-left"></i>
</button>
<div>
</div>
</body>
</html>
Producción:
Navegadores compatibles: los principales navegadores no son compatibles con la propiedad CSS nav-right.
Extensión específica de los navegadores: la propiedad css nav-right tiene una extensión específica para 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