El menú de la barra lateral es un componente que se utiliza para la navegación vertical. Se puede personalizar y hacer receptivo mediante el uso de HTML y CSS simples. Para hacer una barra lateral plegable, debe tener conocimientos de HTML y CSS para crearla.
Ejemplo: en este ejemplo, primero crearemos una estructura usando HTML y luego decoraremos esa estructura usando CSS.
-
Archivo HTML: en este archivo, diseñaremos la estructura de nuestra barra de navegación lateral moderna, aquí no usaremos ninguna línea de CSS. Lo haremos después de que la estructura esté lista.
HTML
<!DOCTYPE html><html><head><!-- You can Include your CSS here--></head><body><div><!-- Div Header--><h2>GeeksforGeeks</h2><!-- Links in Div --><ahref="#">Data Structures</a><ahref="#">Algorithms</a><ahref="#">Interview Preparation</a><ahref="#">Python</a><ahref="#"> Java </a></div></body></html> -
Archivo CSS: este archivo contiene todas las reglas de estilo CSS para crear la barra lateral animada personalizada. Este archivo se utiliza en el código HTML anterior.
CSS
/* Sidebar Div */div {color:#fff;width:250px;padding-left:20px;height:100vh;background-image: linear-gradient(30deg,#11cf4d,#055e21);border-top-right-radius:90px;}/* Div header */div h2{padding:40px000;cursor:pointer;}/* Div links */div a {font-size:14px;color:#fff;display:block;padding:12px;padding-left:30px;text-decoration:none;outline:none;}/* Div link on hover */div a:hover {color:#56ff38;background:#fff;position:relative;background-color:#fff;border-top-left-radius:22px;border-bottom-left-radius:22px;}
Solución completa: aquí combinaremos las secciones HTML y CSS anteriores para crear un menú de barra lateral moderno perfecto.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
/* Sidebar Div */
div {
color: #fff;
width: 250px;
padding-left: 20px;
height: 100vh;
background-image: linear-gradient(30deg, #11cf4d, #055e21);
border-top-right-radius: 90px;
}
/* Div header */
div h2 {
padding: 40px 0 0 0;
cursor: pointer;
}
/* Div links */
div a {
font-size: 14px;
color: #fff;
display: block;
padding: 12px;
padding-left: 30px;
text-decoration: none;
outline: none;
}
/* Div link on hover */
div a:hover {
color: #56ff38;
background: #fff;
position: relative;
background-color: #fff;
border-top-left-radius: 22px;
border-bottom-left-radius: 22px;
}
</style>
</head>
<body>
<div>
<!-- Div Header-->
<h2>GeeksforGeeks</h2>
<!-- Links in Div -->
<a href="#">
Data Structures
</a>
<a href="#">
Algorithms
</a>
<a href="#">
Interview Preparation
</a>
<a href="#">
Python
</a>
<a href="#"> Java </a>
</div>
</body>
</html>
Producción:
