Aprender cómo crear un menú de navegación de la animación, que se puede cerrar.
Crear una navegación lateral Animados
Paso 1) Añadir HTML:
Ejemplo
<div id="mySidenav" class="sidenav">
<a href="javascript:void(0)"
class="closebtn" onclick="closeNav()">×</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Clients</a>
<a href="#">Contact</a>
</div>
<!-- Use any element to open the sidenav -->
<span onclick="openNav()">open</span>
<!-- Add all page content inside this div if you want the side nav to
push page content to the right (not used if you only want the sidenav to
sit on top of the page -->
<div id="main">
...
</div>Paso 2) Añadir CSS:
Ejemplo
/* The side navigation menu */
.sidenav {
height: 100%; /*
100% Full-height */
width: 0; /* 0 width - change this
with JavaScript */
position: fixed; /* Stay in place
*/
z-index: 1; /* Stay on top */
top: 0;
left: 0;
background-color: #111; /* Black*/
overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 60px; /* Place content 60px from the top */
transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}
/* The navigation menu links */
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s
}
/* When you mouse over the navigation links,
change their color */
.sidenav a:hover, .offcanvas a:focus{
color: #f1f1f1;
}
/* Position and style the close button (top
right corner) */
.closebtn {
position:
absolute;
top: 0;
right: 25px;
font-size: 36px !important;
margin-left: 50px;
}
/* Style page content - use this if you want to push the page content to
the right when you open the side navigation */
#main {
transition: margin-left .5s;
padding: 20px;
}
/* On smaller screens, where height is less than
450px, change the style of the sidenav (less padding and a smaller font
size) */
@media screen and (max-height: 450px) {
.sidenav
{padding-top: 15px;}
.sidenav a {font-size: 18px;}
}Paso 3) Añadir JavaScript:
El siguiente ejemplo se desliza en la barra de navegación, y hace que sea 250 píxeles de ancho:
Sidenav Overlay Ejemplo
/* Set
the width of the side navigation to 250px */
function
openNav() {
document.getElementById("mySidenav").style.width
= "250px";
}
/*
Set the width of the side navigation to 0 */
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
} Inténtalo tú mismo " El ejemplo a continuación se desliza en la navegación de la parte, y empuja el contenido de la página hacia la derecha (el valor se utiliza para establecer la anchura de la sidenav también se utiliza para establecer el margen izquierdo de la "contenido de la página"):
Sidenav Empuje contenido
/* Set the width of the side navigation to 250px and the left margin of the
page content to 250px */
function
openNav() {
document.getElementById("mySidenav").style.width
= "250px";
document.getElementById("main").style.marginLeft
= "250px";
}
/* Set the width of the side navigation to 0 and the
left margin of the page content to 0 */
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
document.getElementById("main").style.marginLeft = "0";
} Inténtalo tú mismo " El ejemplo siguiente también se desliza en la barra de navegación, y empuja el contenido de la página a la derecha, sólo que esta vez, nos añadir un color de fondo negro con una opacidad del 40% al elemento de cuerpo, para "highlight" la barra de navegación:
Sidenav Empuje contenido w / opacidad
/* Set the width of the side navigation to 250px and the left margin of the
page content to 250px and add a black background color to body */
function
openNav() {
document.getElementById("mySidenav").style.width
= "250px";
document.getElementById("main").style.marginLeft
= "250px";
document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
}
/* Set the width of the side navigation to 0 and the
left margin of the page content to 0, and the background color of body to
white */
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
document.getElementById("main").style.marginLeft = "0";
document.body.style.backgroundColor = "white";
} Inténtalo tú mismo " El ejemplo a continuación se desliza en la navegación de la parte de la izquierda y cubre toda la página (100% width) :
Sidenav de ancho completo:
/* Open the sidenav */
function
openNav() {
document.getElementById("mySidenav").style.width
= "100%";
}
/* Close/hide the sidenav */
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
} Inténtalo tú mismo " El siguiente ejemplo se abre y se cierra el menú de navegación de la sin animaciones:
Sidenav sin Animación
/* Open the sidenav */
function
openNav() {
document.getElementById("mySidenav").style.display
= "block";
}
/* Close/hide the sidenav */
function closeNav() {
document.getElementById("mySidenav").style.display = "none";
} Inténtalo tú mismo " Consejo: ir a nuestro CSS barra de navegación Tutorial para aprender más acerca de las barras de navegación.