En este artículo, aprenderemos sobre el exterior curvo en la pestaña activa utilizada en el menú de navegación usando HTML, CSS y Javascript. Uno de los diseños más bellos y atractivos de un menú de navegación es el diseño ‘Curva exterior en pestaña activa’. Con la ayuda de la propiedad border-radius de CSS, es muy fácil hacer una curva interior. Pero al hacer una curva exterior se vuelve complejo. Entonces, vamos a aprender cómo hacer un ‘exterior curvo en la pestaña activa’ en el menú de navegación usando Html CSS y JavaScript usando los siguientes enfoques:
- Método 1: aplicar estilo a dos pseudoelementos.
- Método 2: Usar la sombra del cuadro de un círculo de arriba
Curva exterior: una curva exterior es la esquina exterior redondeada a través de la cual conectamos nuestro elemento activo con cualquier otro elemento del documento. Veamos un ejemplo:
Vamos a hacer un ‘Exterior curvo en la pestaña activa en el menú de navegación’ siguiendo los siguientes pasos:
Haz un menú de navegación con una pestaña activa:
Ahora, antes de ir a la parte ‘Curva exterior’, vamos a crear un menú de navegación simple usando HTML y CSS y crear un elemento activo predeterminado dentro del menú de navegación en los siguientes pasos:
- Cree un elemento div de navegación de clase.
- Cree una lista desordenada dentro del div.
- Agregue los iconos y enlaces que desee como un elemento de lista de la lista desordenada.
- Elija un elemento de la lista para nuestro elemento activo predeterminado. Agregue una clase activa a este elemento.
- Agregue CSS, fondo y fuente personalizados para que nuestra navegación se vea bien.
Agregue JavaScript: haga que la pestaña activa se mueva al hacer clic:
Hemos creado con éxito una barra de navegación lateral con una etiqueta activa. Ahora es nuestra tarea activar el enlace en el que se hace clic. Con la ayuda de JavaScript y jQuery lo haremos en los siguientes pasos:
- Agregue la biblioteca jQuery a nuestro documento HTML.
- Agregue un evento de clic a todos los elementos de la lista del menú de navegación.
- Evitar el valor predeterminado para evitar la restauración del estado anterior.
- Dentro de esa función, elimine la clase ‘activa’ del elemento de la lista activa existente.
- Agregue la clase ‘activa’ al elemento de lista en el que se hizo clic.
Método 1: aplicar estilo a dos pseudoelementos
- Agregue dos etiquetas <b> adicionales en la parte superior de la etiqueta <a> dentro del elemento de la lista. Estos funcionarán como pseudo-elementos.
- Agregue una clase de ‘curva izquierda’ a la primera etiqueta <b> y ‘curva inferior’ a la segunda etiqueta <b>.
- Cree un rectángulo a la izquierda usando la etiqueta <b> con la clase ‘curva izquierda’.
- Agregue un radio de borde a los elementos de esta clase usando css : : antes del selector.
- Haga que la visualización de la curva izquierda sea ‘ninguna’.
- Haga que la visualización sea un ‘bloque’ cuando el enlace esté activo.
- Repita el mismo proceso para la ‘curva derecha’ (la segunda etiqueta <b>).
Ejemplo :
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Curved Outside Active Tab | Geeksforgeeks</title>
<!--JQuery Library-->
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<!--Font Awesome for the icons-->
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />
<!--Style for making the navigation menu-->
<style>
.navbar {
position: fixed;
left: 0px;
top: 0px;
height: auto;
width: 100%;
background: #308d46;
}
.navbar ul {
display: flex;
list-style-type: none;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
padding-inline-start: 0px;
margin-bottom: 0px;
padding-left: 40px;
}
.navbar ul li {
display: inline;
list-style: none;
padding-left: 30px;
padding-right: 30px;
padding-top: 10px;
padding-bottom: 10px;
font-size: 1rem;
border-radius: 20px 20px 0px 0px;
position: relative;
}
.navbar ul li.active {
background: #fff;
}
.navbar ul li a {
text-decoration: none;
color: #fff;
}
.navbar ul li.active a {
color: #308d46;
}
</style>
<!-- The Pseudo elements : Style
for the outside curve-->
<style>
.navbar ul li b.left-curve {
position: absolute;
bottom: 0px;
left: -20px;
height: 100%;
width: 20px;
background: #fff;
display: none;
}
.navbar ul li b.left-curve::before {
content: "";
top: 0;
left: 0;
position: absolute;
width: 100%;
height: 100%;
border-bottom-right-radius: 20px;
background: #308d46;
}
.navbar ul li b.right-curve {
position: absolute;
right: -20px;
top: 0px;
height: 100%;
width: 20px;
background: #fff;
display: none;
}
.navbar ul li b.right-curve::before {
content: "";
right: 0;
position: absolute;
width: 100%;
top: 0;
height: 100%;
border-bottom-left-radius: 20px;
background: #308d46;
}
.navbar ul li.active b.left-curve,
.navbar ul li.active b.right-curve {
display: block;
}
</style>
<script>
$(function () {
$("li").click(function (e) {
e.preventDefault();
$("li").removeClass("active");
$(this).addClass("active");
});
});
</script>
</head>
<body>
<div class="navbar">
<ul>
<li class="list-item">
<b class="left-curve"></b>
<b class="right-curve"></b>
<a>
<i class="fa fa-home"></i>
Home
</a>
</li>
<li class="list-item">
<b class="left-curve"></b>
<b class="right-curve"></b>
<a>
<i class="fa fa-book"></i>
My Courses
</a>
</li>
<li class="list-item">
<b class="left-curve"></b>
<b class="right-curve"></b>
<a>
<i class="fa fa-user"></i>
My Profile
</a>
</li>
<li class="list-item active">
<b class="left-curve"></b>
<b class="right-curve"></b>
<a>
<i class="fa fa-star"></i>
Go Premium
</a>
</li>
</ul>
</div>
</body>
</html>
Producción :
Método 2: Usar la sombra del cuadro de un círculo de arriba
- Cree un círculo en la parte superior e inferior del vínculo activo utilizando los selectores ::antes y ::después.
- Cree una sombra de cuadro del círculo con los mismos parámetros.
- Haga que el color del círculo sea el mismo que el color de fondo de la barra de navegación y el color de la sombra del cuadro sea el mismo que el color del div exterior. Ahora el enlace activo está curvado hacia afuera.
Ejemplo:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Curved Outside Active Tab | Geeksforgeeks</title>
<!--Font Awesome for the icons-->
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />
<!--JQuery Library-->
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<!--Style for making the navigation menu-->
<style>
.navbar {
position: fixed;
left: 0px;
top: 0px;
height: auto;
width: 100%;
background: #308d46;
}
.navbar ul {
display: flex;
list-style-type: none;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
padding-inline-start: 0px;
margin-bottom: 0px;
padding-left: 40px;
}
.navbar ul li {
display: inline;
list-style: none;
padding-left: 30px;
padding-right: 30px;
padding-top: 10px;
padding-bottom: 10px;
font-size: 1rem;
border-radius: 20px 20px 0px 0px;
position: relative;
}
.navbar ul li.active {
background: #fff;
}
.navbar ul li a {
text-decoration: none;
color: #fff;
}
.navbar ul li.active a {
color: #308d46;
}
</style>
<!-- The Circles with box-shadow-->
<style>
li.active a::before {
content: "";
left: -30px;
bottom: 0;
height: 30px;
width: 30px;
position: absolute;
background: #308d46;
border-radius: 50%;
box-shadow: 15px 15px 0 #fff;
}
li.active a::after {
content: "";
right: -30px;
bottom: 0;
height: 30px;
width: 30px;
position: absolute;
background: #308d46;
border-radius: 50%;
box-shadow: -15px 15px 0 #fff;
}
</style>
<script>
$(function () {
$("li").click(function (e) {
e.preventDefault();
$("li").removeClass("active");
$(this).addClass("active");
});
});
</script>
</head>
<body>
<div class="navbar">
<ul>
<li class="list-item">
<a>
<i class="fa fa-home"></i>
Home
</a>
</li>
<li class="list-item">
<a>
<i class="fa fa-book"></i>
My Courses
</a>
</li>
<li class="list-item">
<a>
<i class="fa fa-user"></i>
My Profile
</a>
</li>
<li class="list-item active">
<a>
<i class="fa fa-star"></i>
Go Premium
</a>
</li>
</ul>
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por akashkumarsen4 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA