Menú de empuje lateral minimalista con JavaScript

Vista prévia

Descripción

Este proyecto muestra cómo crear formas (por ejemplo, cuadrado, círculo, cinta, triángulo, etc.) utilizando el fondo CSS y las propiedades de degradado.

Funcionamiento

Este proyecto muestra cómo crear formas (por ejemplo, cuadrado, círculo, cinta, triángulo, etc.) utilizando el fondo CSS y las propiedades de degradado.

<span class="open-side">

<a href="#" onclick="openSideMenu()">


<svg width="30" height="30">



<path d="M0,5 30,5" stroke="#fff" stroke-width="5"/>



<path d="M0,14 30,14" stroke="#fff" stroke-width="5"/>



<path d="M0,23 30,23" stroke="#fff" stroke-width="5"/>


</svg>

</a>
</span>

<div id="side-menu" class="side-nav">

<a href="#" class="btn-close" onclick="closeSideMenu()">&times;</a>

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

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

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

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

Este proyecto muestra cómo crear formas (por ejemplo, cuadrado, círculo, cinta, triángulo, etc.) utilizando el fondo CSS y las propiedades de degradado.

<div id="main">

<h1>Side Menu</h1>
</div>

Este proyecto muestra cómo crear formas (por ejemplo, cuadrado, círculo, cinta, triángulo, etc.) utilizando el fondo CSS y las propiedades de degradado.

.side-nav {

height: 100%;

width: 0;

position: fixed;

z-index: 1;

top: 0;

left: 0;

background-color: #111;

opacity: 0.9;

overflow-x: hidden;

padding-top: 60px;

transition: 0.5s;
}

.side-nav a {

padding: 10px 10px 10px 30px;

text-decoration: none;

font-size: 22px;

color: #ccc;

display: block;

transition: 0.3s;
}

.side-nav a:hover { color: #008080; }

.side-nav .btn-close {

position: absolute;

top: 0;

right: 22px;

font-size: 36px;

margin-left: 50px;
}

#main {

transition: margin-left 0.5s;

padding: 20px;

overflow: hidden;

width: 100%;
}

Este proyecto muestra cómo crear formas (por ejemplo, cuadrado, círculo, cinta, triángulo, etc.) utilizando el fondo CSS y las propiedades de degradado.

function openSideMenu(){

document.getElementById('side-menu').style.width ='250px';

document.getElementById('main').style.marginLeft ='250px';
}

function closeSideMenu(){

document.getElementById('side-menu').style.width ='0';

document.getElementById('main').style.marginLeft ='0';
}