Bootstrap Sidebar es un componente que se utiliza para la navegación vertical. Se puede personalizar en varios estilos de acuerdo con sus requisitos mediante el uso de CSS y se puede hacer que responda mediante el uso de JavaScript.
Crear una barra lateral simple:
La clase .sidebar se usa para crear una barra lateral simple de Bootstrap. Para hacer una barra lateral plegable, también debe tener un poco de conocimiento de JavaScript, ya que se usaría para abrir y cerrar la barra lateral, lo que haría que su barra lateral respondiera.
Ejemplo:
<html>
<head>
<style>
/*Position and style for the sidebar*/
.sidebar {
height: 100%;
width: 0;
position: fixed;
/*Stays in place */
background-color: green;
/*green*/
overflow-x: hidden;
/*for Disabling horizontal scroll */
}
/* Position and style for the sidebar links */
.sidebar a {
padding: 10px 10px 10px;
font-size: 25px;
color: #111;
display: block;
transition: 0.3s;
}
/* the links change color when mouse hovers upon them*/
.sidebar a:hover {
color: #FFFFFF;
}
/* Position and style the for cross button */
.sidebar .closebtn {
position: absolute;
top: 0;
right: 25px;
}
/* Style for the sidebar button */
.openbtn {
font-size: 32px;
background-color: #008000;
color: #111;
padding: 10px 10px 10px;
border: none;
}
/* the sidebar button changes
color when mouse hovers upon it */
.openbtn:hover {
color: #FFFFFF;
}
/* pushes the page content to the right
when you open the side navigation */
#main {
transition: margin-left .5s;
/* If you want a transition effect */
padding: 10px;
}
</style>
</head>
<body>
<div id="sidebar" class="sidebar">
<a href="javascript:void(0)"
class="closebtn"
onclick="closeNav()">
×
</a>
<!--the cross button-->
<a href="#">India</a>
<a href="#">Nepal</a>
<a href="#">Srilanka</a>
<a href="#">Myanmar</a>
</div>
<div id="main">
<button class="openbtn"
onclick="openNav()">
SIDEBAR
</button>
<!-- for the sidebar button-->
</div>
</body>
<script>
/* Sets the width of the sidebar
to 250 and the left margin of the
page content to 250 */
function openNav() {
document.getElementById(
"sidebar").style.width = "250px";
document.getElementById(
"main").style.marginLeft = "250px";
}
/* Set the width of the sidebar
to 0 and the left margin of the
page content to 0 */
function closeNav() {
document.getElementById(
"sidebar").style.width = "0";
document.getElementById(
"main").style.marginLeft = "0";
}
</script>
</html>
Producción:
Al ejecutar estos tres códigos, puede crear una barra lateral plegable simple. Puede agregar más funciones de CSS para hacerlo aún mejor de acuerdo con sus requisitos.
Publicación traducida automáticamente
Artículo escrito por Varnika Dasgupta y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA