Navegación a pantalla completa básica en Vanilla JavaScript

Vista prévia

Descripción

Un simple plugin de JavaScript vainilla para crear un menú de navegación a pantalla completa y adaptable para escritorio y móvil.

Funcionamiento

Incluya la hoja de estilo principal en la sección head del documento.

<link rel="stylesheet" href="src/menu.css">

Cree la navegación del sitio desde una lista no ordenada HTML normal.

<ul class="menu" id="menuId">

<li class="menu-item"><a href="#optionA">Option A</a></li>

<li class="menu-item"><a href="#optionB">Option B</a></li>

<li class="menu-item"><a href="#optionC">Option C</a></li>

<li class="menu-item"><a href="#optionC">Option D</a></li>

<li class="menu-item"><a href="#optionC">Option E</a></li>
</ul>

Cree un elemento de desencadenador para alternar la navegación de pantalla completa.

<a menu-toggle="menuId" class="btn-menu">Menu</a>

Incluye el JavaScript ' menu. js ' e inicializa el plugin.

<script src="src/menu.js"></script>

Menu.init(options);

Aplique los estilos personalizados al menú de navegación.

li.menu-item { background-color: #009688; }

li.menu-item:nth-child(1) { background-color: #512da8; }

li.menu-item:nth-child(2) { background-color: #00bcd4; }

li.menu-item:nth-child(3) { background-color: #0288d1; }

li.menu-item:nth-child(4) { background-color: #ff7043; }

Opciones predeterminadas del plugin.

Menu.init({

menuClass: 'menu',

menuHiddenClass: 'menu-hidden',

menuShowClass: 'menu-show',

menuItemClass: 'menu-item',

menuToggleAttribute: 'menu-toggle',

showAnimations: false,

animationHideClass: 'menu-hide-animate',

animationShowClass: 'menu-show-animate',
});