Bootstrap es el marco CSS receptivo y de código abierto más popular utilizado por los desarrolladores de software. La barra lateral es un widget que contiene enlaces de navegación a otras partes del sitio web. La barra lateral se usa generalmente para mostrar una lista de elementos de menú. Este artículo muestra dos métodos para crear una barra lateral de una página web donde la barra lateral permanece cerrada u oculta de forma predeterminada. El primer método muestra la barra lateral al hacer clic en el botón Menú y luego la barra lateral se puede cerrar haciendo clic en el ícono X en la esquina superior derecha. El segundo método muestra una barra lateral alternante que permanece oculta de forma predeterminada. Al hacer clic en el botón Menú se muestra la barra lateral y al hacer clic nuevamente en el botón Menú se oculta la barra lateral.
Método 1: la página web contiene una división con id=main. Esta división contiene el contenido real de la página web. Se crea un botón etiquetado como «Menú» que activa la función openNav(). La función openNav() obtiene la división de la barra lateral usando document.getElementById() y establece el ancho de la barra lateral y la división ‘principal’ . Después de que se muestra la barra lateral, el usuario hace clic en el botón Cerrar en la esquina superior derecha de la barra lateral que activa la función closeNav() . La función closeNav() obtiene la división principal usando document.getElementById()y establece el ancho de la barra lateral en 0 ocultándolo de la página web y el margen izquierdo de la división principal se establece en 0, lo que hace que ocupe todo el ancho de la pantalla. Dado que ambas funciones son funciones de javascript, se colocan dentro de las etiquetas de script. El CSS especificado dentro de la etiqueta de estilo permite el posicionamiento y la transición adecuados de la barra lateral y la división principal.
Ejemplo 1:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<style>
/* The sidebar menu */
.sidebar {
height: 100%;
/* 100% Full-height */
width: 0;
/* 0 width */
position: fixed;
/* Fixed place */
z-index: 1;
/* Stay on top */
top: 0;
left: 0;
background-color: black;
/* Disable horizontal scroll */
overflow-x: hidden;
/* Place content 60px from the top */
padding-top: 60px;
/* Transition effect to slide
in the sidebar */
transition: 0.5s;
}
/* The sidebar links */
.sidebar a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 20px;
color: #818181;
display: block;
transition: 0.3s;
}
/* Mouse over the navigation
links, to change their color */
.sidebar a:hover {
color: green;
}
/* Position and style the close
button at top right corner */
.sidebar .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
/* The button used to open the sidebar */
.openbtn {
font-size: 20px;
cursor: pointer;
background-color: #111;
color: white;
padding: 10px 15px;
border: none;
}
.openbtn:hover {
background-color: #444;
}
/* Style page content - pushes the
page content to the right when the
sidebar is opened */
#main {
/* If you want a transition effect */
transition: margin-left 0.5s;
padding: 20px;
}
/* On smaller screens, where height is
less than 450px, change the style of
the side-nav (less padding and a
smaller font size) */
@media screen and (max-height: 450px) {
.sidebar {
padding-top: 15px;
}
.sidebar a {
font-size: 18px;
}
}
</style>
</head>
<body>
<div id="mySidebar" class="sidebar">
<a href="javascript:void(0)" class="closebtn"
onclick="closeNav()">
×
</a>
<a href="#">My Account</a>
<a href="#">My Articles</a>
<a href="#">Interests</a>
<a href="#">Practice</a>
<a href="#">Testimonials</a>
<a href="#">About Us</a>
<a href="#">Contact Us</a>
</div>
<!-- The main division contains the actual
content of the webpage -->
<div id="main">
<h1 style="color: green;">
Welcome to GeeksForGeeks
</h1>
<button class="openbtn" onclick="openNav()">Menu
</button>
<h2>
This is a demonstration of collapsed
sidebar by default. The sidebar opens
on clicking the Menu button.
</h2>
</div>
<script>
function openNav() {
document.getElementById(
"mySidebar").style.width = "200px";
document.getElementById(
"main").style.marginLeft = "200px";
}
/* Set the width of the sidebar to 0
and the left margin of the page content to 0 */
function closeNav() {
document.getElementById(
"mySidebar").style.width = "0";
document.getElementById(
"main").style.marginLeft = "0";
}
</script>
</body>
</html>
Método de salida 
2: este método muestra la barra lateral usando la funcionalidad de alternancia de un campo de entrada que tiene el tipo ‘casilla de verificación’ y el rol ‘botón’. Cuando el usuario hace clic en el botón, la casilla de verificación se marca y establece el margen izquierdo de la división de «contenido» en 0, lo que significa que ocupa toda la pantalla. Cuando el usuario vuelve a hacer clic en el botón, la casilla de verificación no está marcada y el margen izquierdo de la división de «contenido» se establece en 200 px y se muestra la barra lateral. Esta transición ocurre en el CSS, a diferencia del ejemplo anterior donde toda la operación la realizaban las funciones de javascript.
Ejemplo:
HTML
<html>
<head>
<style>
.sidebar {
background-color: black;
/* Occupies 100% height of the page */
height: 100%;
/* Specifies the width of sidebar */
width: 500px;
position: absolute;
top: 0;
left: 0;
bottom: 0;
padding-right: 60px;
/* Transition effect of sidebar */
transition: 0.5s;
}
.sidebar h2,
li {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 20px;
color: #818181;
display: block;
/* Transition effect of h2 and li */
transition: 0.3s;
}
.sidebar li:hover {
/* Sidebar items change color
when hovered over */
color: green;
}
.content {
background-color: white;
position: absolute;
top: 0;
/* The left margin when
sidebar is visible */
left: 200px;
right: 0;
bottom: 0;
-moz-transition: left 0.5s ease;
transition: left 0.5s ease;
}
input[type="checkbox"] {
display: none;
}
/* Toggling of sidebar */
input:checked~.content {
left: 0;
}
input:checked~label {
left: 0;
}
/* Styling of the button */
label {
z-index: 2;
position: absolute;
top: 0;
left: 200px;
background-color: black;
color: white;
-moz-transition: left 0.5s ease;
transition: left 0.5s ease;
}
</style>
</head>
<body>
<!-- This division contains
the sidebar and its content -->
<div class="main-wrap">
<input id="slide-sidebar" type="checkbox"
role="button"/>
<label for="slide-sidebar">
<span>Toggle</span>
</label>
<div class="sidebar">
<h2>Menu Bar</h2>
<ul>
<li>Basic</li>
<li>Profile</li>
<li>Articles</li>
<li>Testimonial</li>
<li>Practice</li>
</ul>
</div>
<!-- This division contains the
actual content of the webpage -->
<div class="content">
<h1 style="color: green;">
Welcome to GeeksForGeeks
</h1>
</div>
</div>
</body>
</html>
Producción
De forma predeterminada, la barra lateral en ambos ejemplos permanece cerrada u oculta. Solo cuando el usuario hace clic en el botón se muestra la barra lateral. Las barras laterales plegables ahorran espacio y hacen que la página web se vea limpia y espaciosa. Las barras laterales se pueden fijar y desplazar según los requisitos del usuario. El artículo, sin embargo, muestra barras laterales fijas.
Publicación traducida automáticamente
Artículo escrito por Shreyasi_Chakraborty y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA