Cómo crear: menú fuera del lienzo

Crear menú fuera del lienzo

Paso 1 - Añadir HTML：

<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
  <a href="#">Acerca de</a>
  <a href="#">Servicios</a>
  <a href="#">Clientes</a>
  <a href="#">Contacto</a>
</div>
<!-- Use cualquier elemento para abrir la navegación lateral -->
<span onclick="openNav()">abrir</span>
<!-- Si desea que la navegación lateral empuje el contenido de la página a la derecha, agregue todo el contenido de la página dentro de este div (si solo desea que la navegación lateral se quede en la parte superior de la página, no es necesario usar esta configuración) -->
<div id="main">
  ...
</div>

Segundo paso - Añadir CSS:

/* Menú de navegación lateral */
.sidenav {
  height: 100%; /* 100% de altura completa */
  width: 0; /* 0 ancho - se cambia mediante JavaScript */
  position: fixed; /* Mantener en su posición original */
  z-index: 1; /* Mantener en la parte superior */
  top: 0;
  left: 0;
  background-color: #111; /* Negro */
  overflow-x: hidden; /* Deshabilitar el desplazamiento horizontal */
  padding-top: 60px; /* Contenido a 60 píxeles de distancia del borde superior */
  transition: 0.5s; /* Efecto de transición de 0.5 segundos, para que la barra de navegación lateral se deslice */
}
/* Enlaces del menú de navegación */
.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}
/* Cambia el color cuando el ratón se posa sobre el enlace de navegación */
.sidenav a:hover {
  color: #f1f1f1;
}
/* Posición y estilo del botón de cierre (arriba a la derecha) */
.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}
/* Establecer el estilo del contenido de la página - si desea empujar el contenido de la página hacia la derecha al abrir la navegación lateral, utilice esta opción */
#main {
  transition: margin-left .5s;
  padding: 20px;
}
/* En pantallas de menos de 450 píxeles de altura, cambiar el estilo de la barra de navegación lateral (reducir el relleno interno y el tamaño de la fuente) */
@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

Paso 3 - Añadir JavaScript:

Menú externo de lienzo

/* Establecer el ancho de la navegación lateral a 250px, el margen izquierdo del contenido de la página a 250px */
function openNav() {
  document.getElementById("mySidenav").style.width = "250px";
  document.getElementById("main").style.marginLeft = "250px";
}
/* Establecer el ancho de la navegación lateral a 0, el margen izquierdo del contenido de la página a 0 */
function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
  document.getElementById("main").style.marginLeft = "0";
}

Prueba por tu cuenta

El siguiente ejemplo también hace que la barra de navegación lateral se deslice hacia la izquierda y empuje el contenido de la página hacia la derecha. Sin embargo, esta vez agregamos un fondo negro semi-transparente (40% de opacidad) al elemento body para "resaltar" la barra de navegación lateral:

Menú externo de lienzo con transparencia

/* Establecer el ancho de la navegación lateral a 250px, el margen izquierdo externo del contenido de la página a 250px y agregar un color de fondo negro al 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)";
}
/* Establecer el ancho de la navegación lateral a 0, el margen izquierdo del contenido de la página a 0 y el color de fondo del body en blanco */
function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
  document.getElementById("main").style.marginLeft = "0";
  document.body.style.backgroundColor = "white";
}

Prueba por tu cuenta

Páginas relacionadas

Tutoriales:Barra de navegación CSS