Navegación lateral fuera de lienzo con contenido principal adaptable

Vista prévia

Descripción

Un sistema de navegación lateral fuera de lienzo que reduce el contenido principal para caber dentro de la pantalla cuando se abre el navegador lateral. Basado en CSS/CSS3 y un poco de JavaScript.

Funcionamiento

Crea un botón de hamburguesa para alternar el navegador lateral.

<div class="hamburger" id="hamburger" onclick="toggleSidenav();">

<div></div>

<div></div>

<div></div>
</div>

Crea menús para el navegador lateral.

<nav>

<div class="links">


<a class="active" href="">Home</a>


<a href="#">Blog</a>


<a href="#">Contact</a>


<a href="#">About</a>

</div>
</nav>

Cree el contenido principal de su sitio Web.

<div class="main">

<section>


<h1>Section One</h1>

</section>

<section>


<h1>Section Two</h1>

</section>

<section>


<h1>Section Three</h1>

</section>
</div>

Los estilos CSS para la palanca de hamburguesas.

.hamburger {

position: fixed;

z-index: 9999;

padding: 15px;
}

.hamburger:hover { cursor: pointer; }

.hamburger div {

background-color: white;

border-radius: 1px;

height: 6px;

width: 30px;
}

.hamburger div:not(:last-child) { margin-bottom: 5px; }

Los estilos CSS para el Nav lateral.

nav {

background-color: white;

display: inline-block;

position: fixed;

height: 100vh;

width: 225px;

left: -225px;

-webkit-transition: -webkit-transform 0.3s;

transition: transform 0.3s;
}

nav a {

display: block;

text-decoration: none;

text-align: center;

color: black;

padding: 5px 0;
}

nav a:hover { background-color: #f5f5f5; }

nav a:visited { color: black; }

nav a.active {

background-color: black;

color: white;
}

nav, .hamburger, .cover {

-webkit-transition: -webkit-transform .3s;

transition: transform .3s;
}

.sidenav-active nav, .sidenav-active .hamburger, .sidenav-active .cover {

-webkit-transform: translateX(225px);

-ms-transform: translateX(225px);

transform: translateX(225px);
}

Los estilos CSS para el contenido principal.

.main {

-webkit-transition: margin-left .3s;

transition: margin-left .3s;
}

.sidenav-active .main { margin-left: 225px; }

section {

color: white;

height: 100vh;

line-height: 100vh;

text-align: center;
}

La función JavaScript para activar el navegador lateral.

function toggleSidenav() {

document.body.classList.toggle('sidenav-active');
}