Barra de navegación adaptable con Flexbox y JavaScript-Simply-NAV

Vista prévia

Descripción

Un sistema de navegación simple, ligero, pegajoso, totalmente adaptable, compatible con dispositivos móviles, construido con JavaScript y CSS Flexbox.

Se contrae automáticamente la barra de navegación en un OFF-canvas de navegación de la hamburguesa cuando el tamaño de la pantalla es más pequeño que un ancho específico.

También se admite la navegación Sticky. Esto significa que puede pegar la barra de navegación en la parte superior o inferior de la Página Web.

¿Cómo funciona?

Importe la hoja de estilos y JavaScript necesarios en el documento.

<link rel="stylesheet" href="nav.css">
<script src="simply-nav.js"></script>

La estructura HTML necesaria para la navegación.

<header class="nav-wrapper">

<nav class="nav" role="navigation">


<span class="toggleNav">



<svg class="svg-hamburger" viewBox="0 0 1536 1280" xmlns="http://www.w3.org/2000/svg">




<path class="svg-hamburger-path" d="M1536 1088v128q0 26-19 45t-45 19H64q-26 0-45-19t-19-45v-128q0-26 19-45t45-19h1408q26 0 45 19t19 45zm0-512v128q0 26-19 45t-45 19H64q-26 0-45-19T0 704V576q0-26 19-45t45-19h1408q26 0 45 19t19 45zm0-512v128q0 26-19 45t-45 19H64q-26 0-45-19T0 192V64q0-26 19-45T64 0h1408q26 0 45 19t19 45z"







fill="rgba(226, 241, 236, 20.85)" />



</svg>


</span>


 <a class="nav__logo" href="#">



<img class="logo logo-small" id="logo" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/6a/JavaScript-logo.png/480px-JavaScript-logo.png" alt="Logo">


</a>


<ul class="nav__list" id="sideNav">



<div class="nav__list-left">




<a class="closeBtn">





<svg class="svg-close" viewBox="0 0 1188 1188" xmlns="http://www.w3.org/2000/svg">






<path class="svg-close-path" d="M1188 956q0 40-28 68l-136 136q-28 28-68 28t-68-28L594 866l-294 294q-28 28-68 28t-68-28L28 1024Q0 996 0 956t28-68l294-294L28 300Q0 272 0 232t28-68L164 28q28-28 68-28t68 28l294 294L888 28q28-28 68-28t68 28l136 136q28 28 28 68t-28 68L866 594l294 294q28 28 28 68z"









fill="rgba(226, 241, 236, 0.85)" />





</svg>




</a>




<li>





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




</li>




<li>





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




</li>




<li>





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




</li>




<li>





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




</li>




<li>





<a class="nav__item" href="#">Works</a>




</li>



</div>



<div class="nav__list-right">




<div class="page__overlay"></div>



</div>


</ul>

</nav>
</header>

Para crear una navegación pegajosa, simplemente agregue la clase -Sticky al contenedor NAV.

<header class="nav-wrapper -sticky">

...
</header>

Pegue la navegación en la parte inferior con la clase-Bottom.

<header class="nav-wrapper -sticky -bottom">

...
</header>