Menú de palanca de CSS pura-Sidekick

Vista prévia

Descripción

Sidekick es un puro HTML/CSS basado en el menú de la barra lateral fuera de pantalla para la navegación del sitio móvil. Haga clic en el menú de alternancia verá una barra lateral de navegación se desliza hacia fuera desde el lado izquierdo de la pantalla mientras empuja la Página principal a la derecha.

¿Cómo funciona?

En primer lugar, debe incluir el Sidekick. CSS en el encabezado de la página HTML.

<link href="styles/sidekick.css" rel="stylesheet">

Cree el conmutador de menú con un icono de alternancia basado en SVG de la siguiente manera:

<input type="checkbox" id="sidekickToggle">
<label class="sidekick-toggle" for="sidekickToggle">

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"


 width="512px" height="512px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">

<g>


<rect x="96" y="241" width="320" height="32"/>


<rect x="96" y="145" width="320" height="32"/>


<rect x="96" y="337" width="320" height="32"/>

</g>

</svg>

<span class="sr-only">Menu Toggle</span>
</label>

Inserte la barra lateral de navegación junto con el contenido principal en su página HTML.

<div class="sidekick">

<nav class="sidekick-panel">


<h1>Sidekick Menu</h1>


<ul>



<li><a href="#">Nav Item 1</a></li>



<li><a href="#">Nav Item 2</a></li>



<li><a href="#">Nav Item 3</a></li>



<li><a href="#">Nav Item 4</a></li>


</ul>

</nav>

<div class="sidekick-body">


<h1>Sidekick Demo</h1>


<h2>Documentation Will Go Here</h2>

</div>
</div>