Navegación de cajón deslizante con efecto de desenfoque-Pushbar. js

Vista prévia

Descripción

Pushbar. js es una navegación de cajón amigable para móviles para la aplicación web moderna que desliza el menú de navegación desde el borde de la pantalla mientras se deshace el contenido principal.

Funcionamiento

Enlace a la barra de estilos y JavaScript de Pushbar.

<link rel="stylesheet" href="pushbar/pushbar.css">
<script src="pushbar/pushbar.js"></script>

Cree los menús de navegación del cajón:

<aside data-pushbar-id="left" class="pushbar from_left">

<div class="title"><span data-pushbar-close class="close push_right"></span> Left sidebar menu</div>


<ul class="menu">


<li>Home</li>


<li>Products</li>


<li>About</li>


<li>Contact</li>


<li>Github</li>

</ul>

</aside>

<aside data-pushbar-id="right" class="pushbar from_right">

<div class="title"><span data-pushbar-close class="close push_right"></span> Right</div>


<ul class="menu">


<li>Home</li>


<li>Products</li>


<li>About</li>


<li>Contact</li>


<li>Github</li>

</ul>

</aside>

<aside data-pushbar-id="top" class="pushbar from_top">

<div class="title"><span data-pushbar-close class="close push_right"></span> Top</div>


<ul class="menu">


<li>Home</li>


<li>Products</li>


<li>About</li>


<li>Contact</li>


<li>Github</li>

</ul>

</aside>

<aside data-pushbar-id="bottom" class="pushbar from_bottom">

<div class="title"><span data-pushbar-close class="close push_right"></span> Bottom</div>


<ul class="menu">


<li>Home</li>


<li>Products</li>


<li>About</li>


<li>Contact</li>


<li>Github</li>

</ul>

</aside>

Cree botones de alternancia para revelar los menús de navegación cuando sea necesario.

<button data-pushbar-target="left">Left pushbar</button>
<button data-pushbar-target="right">Right pushbar</button>
<button data-pushbar-target="top">Top pushbar</button>
<button data-pushbar-target="bottom">Bottom pushbar</button>

Inicialice el Pushbar y listo.

new Pushbar();

Activar/desactivar el efecto de desenfoque.

new Pushbar({


blur:true
});

Activar/desactivar la superposición de fondo.

new Pushbar({


overlay:true
});

Registro de cambios

07/20/2018

• Fixed ScrollBar CSS propiedad