Cuando creamos un menú de barra de navegación utilizando elementos de lista, se puede hacer clic en toda el área de la lista. Toda el área en la que se puede hacer clic hace que la interfaz de usuario de la barra de navegación sea más fácil de usar.
En los teléfonos móviles o tabletas, donde los gestos táctiles entran en juego, a veces es difícil apuntar a los pequeños enlaces con el dedo. Principalmente porque fue diseñado principalmente para uso de escritorio. Entonces, para hacer que se pueda hacer clic en toda el área de un elemento de lista en una barra de navegación como un enlace, aquí hay algunos métodos que se describen a continuación:
Usando propiedades CSS simples: Primero, crearemos elementos de lista desordenados usando HTML y luego aplicaremos algunas propiedades CSS a esos elementos para hacer un menú de barra de navegación.
Ejemplo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>navbar</title>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: green;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: lightgreen;
color: black;
}
</style>
</head>
<body>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Data Structure</a></li>
<li><a href="#">Algorithm</a></li>
<li><a href="#">Web Technology</a></li>
</ul>
</body>
</html>
Producción:
Usando el pseudo-elemento :after (o :before): En este método, usaremos el pseudo-selector para establecer la propiedad CSS en el elemento ancla.
Ejemplo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#nav {
background-color: #187446;
margin: 0px;
overflow: hidden;
}
#nav ul {
list-style-type: none;
margin: 0px;
float: left;
}
#nav li {
display: inline;
float: left;
padding: 15px 10px;
}
#nav a {
color: white;
font-family: Helvetica, Arial, sans-serif;
text-decoration: none;
}
a {
position: relative;
}
#nav a:after {
content: '';
position: absolute;
top: -10px;
bottom: -10px;
left: -10px;
right: -10px;
}
#nav li:hover {
background-color: lightgreen;
}
#nav a:hover {
color: black;
}
</style>
</head>
<body>
<div id="nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Data Structure</a></li>
<li><a href="#">Algorithm</a></li>
<li><a href="#">Web Technology</a></li>
</ul>
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por tanvi_gupta y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA