Navegación de cabecera adaptable con JavaScript y CSS Flexbox

Vista prévia

Descripción

Una navegación de encabezado adaptable que contrae la barra de exploración horizontal en un menú desplegable alterando el Flex-Direction propiedad en pantallas pequeñas.

See also:

• Top 10 de JavaScript & CSS menús responsivos

Funcionamiento

Cargue los archivos necesarios en el documento.

<link rel="stylesheet" href="assets/css/main-header-menu.css">
<script src="assets/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 dropdown-menu">



<ul>




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




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




<li><a href="#services" class="dropdown-menu-item">Services</a></li>




<li><a href="#team" class="dropdown-menu-item">Team</a></li>




<li><a href="#contact" class="dropdown-menu-item">Contact</a></li>



</ul>


</nav>


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



<ul>




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




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




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




<li><a href="#team">Team</a></li>




<li><a href="#contact">Contact</a></li>



</ul>


</nav>


<button class="main-header-dropdown-button" onclick="toggleDropdownMenu(1)">



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



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



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



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


</button>

</div>
</header>