La navegación del encabezado de hamburguesa adaptable-lado-menú-componente

Vista prévia

Descripción

Una navegación de cabecera de hamburguesa con capacidad de respuesta, multiplataforma escrita en vainilla JavaScript y CSS/CSS3.

En dispositivos de pantalla pequeña (p. ej., & tableta móvil), el componente de menú lateral contrae automáticamente el menú horizontal normal del sitio en un menú lateral fuera de lienzo que se puede alternar con un botón de hamburguesa.

See also:

• Top 10 de JavaScript & CSS menús responsivos
• Top 10 sistemas de navegación off-Canvas amigables para móviles

Funcionamiento

Inserte el JavaScript y CSS del componente de menú lateral en la Página Web.

<link rel="stylesheet" href="/css/main-header-menu.css">
<script src="/js/main-header-menu.js"></script>

Cree el código HTML para la navegación del encabezado.

<header class="main-header">

<div class="container">


<img class="main-header-logo" src="assets/images/logo.png"></img>


<nav class="main-header-menu">



<ul>




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




<li><a href="#">jQuery</a></li>




<li><a href="#">HTML</a></li>




<li><a href="#">CSS/CSS3</a></li>




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



</ul>


</nav>


<button class="main-header-side-menu-button" onclick="toggleSideMenu(1)">



<div class="stripes"></div>



<div class="stripes"></div>



<div class="stripes"></div>



<div class="stripes"></div>


</button>

</div>
</header>

Cree otra navegación para el menú lateral fuera del lienzo. Hecho.

<nav class="side-menu">

<div class="side-menu-content">


<ul>



<li><a href="#" class="side-menu-item">Home</a></li>



<li><a href="#" class="side-menu-item">jQuery</a></li>



<li><a href="#" class="side-menu-item">HTML</a></li>



<li><a href="#" class="side-menu-item">CSS/CSS3</a></li>



<li><a href="#" class="side-menu-item">About</a></li>


</ul>

</div>

<div class="side-menu-close-div"></div>
</nav>