Despliegue Dinámico de Menú Lateral en Angular

Curso de Angular: Componentes y Servicios

Contenido del curso

Componentes

Servicios

Pipes y Directives

Best practices

Despedida

20
Componentes y Servicios en Aplicaciones Web
01:09 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:008:41

Despliegue Dinámico de Menú Lateral en Angular

Curso de Angular: Componentes y Servicios

Clase 10 de 20

Clase 10 / 20

Recursos

Construir un menú lateral que aparezca y desaparezca con una animación fluida es una de las tareas más comunes en cualquier proyecto web moderno. Aquí se explica paso a paso cómo lograrlo en Angular usando el estado de los componentes, la propiedad CSS transform y clases dinámicas, sin depender de librerías externas.

¿Cómo se estructura el side menu en HTML?

El punto de partida es ubicar el side menu dentro del componente de navegación, justo donde ya existe la sección destinada al menú mobile. La estructura HTML es sencilla: un contenedor con la clase side-menu, un botón de cierre y los mismos enlaces de navegación que ya existen en el navbar [0:20].

html

<div class="side-menu"> <button>Close</button> <a href="#">Link 1</a> <a href="#">Link 2</a> </div>

Para que este elemento ocupe toda la pantalla se utiliza position fixed combinado con top: 0, left: 0, bottom: 0 y right: 0. Con background: white, display: flex y flex-direction: column se consigue que el contenido se apile verticalmente [0:42]. Además, justify-content: flex-start asegura que los enlaces queden en la parte superior del panel.

¿Qué papel juega CSS transform en la animación?

La clave para ocultar y mostrar el menú es la propiedad transform con translateX. Cuando el valor es -100%, el panel queda completamente fuera de la pantalla hacia la izquierda. Cuando es 0, ocupa toda la vista [1:20].

css .side-menu { position: fixed; top: 0; left: 0; bottom: 0; right: 0; background: white; display: flex; flex-direction: column; justify-content: flex-start; transform: translateX(-100%); transition: all 0.5s; }

.side-menu.active { transform: translateX(0); }

La propiedad transition: all 0.5s genera la animación suave de medio segundo cada vez que cambia el transform.

¿Cómo controlar la visibilidad con el estado del componente?

Dentro del componente de Angular se declara una variable de estado llamada showMenu (o activeMenu) inicializada en false [2:10]. Un método toggleMenu invierte ese valor con una sintaxis directa:

typescript showMenu = false;

toggleMenu() { this.showMenu = !this.showMenu; }

El botón del navbar dispara toggleMenu con el evento (click) para abrir el menú.
El botón close dentro del side menu también ejecuta toggleMenu para cerrarlo.

¿Cómo se aplican clases dinámicas en Angular?

Mediante la sintaxis de class binding se conecta el estado con la clase CSS active [2:50]:

html

Cuando showMenu es true, Angular añade la clase active y el transform pasa a 0, mostrando el panel. Cuando es false, la clase se remueve y el menú vuelve a -100% con la transición animada. Esta técnica se explica con mayor detalle en el curso de fundamentos de Angular.

¿Por qué aplicar un reset CSS y una fuente personalizada?

Cuando no se usa un framework como Bootstrap, Foundation o Angular Material, los navegadores aplican estilos predeterminados que generan márgenes y tamaños inconsistentes. Un reset CSS elimina esos valores por defecto en elementos como h1, h2, body y html [3:40].

El archivo se organiza dentro de una carpeta styles con el nombre reset.css (o su equivalente en SASS) y se importa desde los estilos globales:

scss @import 'styles/reset';

Para la tipografía, se importa una fuente desde Google Fonts y se aplica a todos los elementos del sitio [4:10]. Esto reemplaza la fuente Times New Roman que viene por defecto y mejora la apariencia general del proyecto.

css

{ font-family: 'Kidsand', sans-serif; }

Puedes elegir cualquier fuente disponible en Google Fonts según tu preferencia.
Lo importante es asegurarte de que se aplique a todos los elementos del documento.

Con estos ajustes el header queda completo: un menú lateral funcional con animación, estilos reseteados y tipografía personalizada. En el siguiente paso se profundiza en la comunicación entre componentes padre e hijo para implementar el carrito de compras. ¿Ya tienes pensado qué animaciones adicionales podrías agregar a tu side menu?

Jonathan Vergara Ruiz

Hace 4 años

Les comparto mi codigo trate de modularizarlo creando un nuevo componente especificamente para el slide-menu y le pase usando @Input() la funcion y el estado para poder abrir y cerrar el menu desde el padre.

app-slide-menu.ts

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-slide-menu',
  templateUrl: './slide-menu.component.html',
  styleUrls: ['./slide-menu.component.scss']
})
export class SlideMenuComponent {
  @Input() showMenu: boolean = false;
  @Input() handleClose: (() => void) | undefined;
}

app-slide-menu.html

<div class="SlideMenu__container" [class.active]="showMenu">
  <button (click)="handleClose && handleClose()">close</button>
  <ul>
    <li><a href="">All</a></li>
    <li><a href="">Clothes</a></li>
    <li><a href="">Electronics</a></li>
  </ul>
</div>

NOtA💡: el el @import() handleClose le estoy pasando la funcion de toggle para abrir y cerrar esta tipado como void por que esta funcion no retorna nada y el undefined es por que a la variable no le asigne nada como tal. Asi que para implementar esto en el html tuve que hacer la condicion de que si existia ejecuta la funcion para que no me diera error => handleClose && handleClose().

app-nav.html

<div class="show-mobile">
  <div>
    <button (click)="handleOpenMenu()">
      <img src="./assets/svg/icon_menu.svg" alt="menu">
    </button>
    <a href="">
      <img src="./assets/svg/logo_yard_sale.svg" alt="logo">
    </a>
    <a href="">
      <img src="./assets/svg/icon_shopping_cart.svg" alt="logo">
    </a>
  </div>
    <app-slide-menu [handleClose]="handleOpenMenu" [showMenu]="showMenu"></app-slide-menu>
</div>
<div class="hide-mobile">
  <div>
    <nav>
      <a class="logo" href="">
        <img src="./assets/svg/logo_yard_sale.svg" alt="logo">
      </a>
      <ul>
        <li><a href="">All</a></li>
        <li><a href="">Clothes</a></li>
        <li><a href="">Electronics</a></li>
      </ul>
    </nav>
    <div class="info">
      <div class="account">jonathan@jonny.com</div>
      <div>
        <a href="">
          <img src="./assets/svg/icon_shopping_cart.svg" alt="logo">
        </a>
      </div>
    </div>
  </div>
</div>

app-nav.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-nav',
  templateUrl: './nav.component.html',
  styleUrls: ['./nav.component.scss']
})
export class NavComponent {
  showMenu: boolean = false

  handleOpenMenu (){
    this.showMenu = !this.showMenu
  }
}

Comentarios (26)26 comentarios

Anthony Ismael Manotoa Moreno

Hace 5 años

Alexis E. COLQUE CAYPA

Daniel Villera

Ahorra Seguros

Juan José Gómez Aguirre

Hace 3 años

Alejandro Mejia Escobar

Michelle Elizabeth Pérez Sosa

Chema Muñoz

Daniel Alejandro Calderón Virgen

Deymer Hernandez

Javier Fuentes Ríos

Rodrigo Abdón Quisbert Fernández

luis fernando Bello González

Sergio Andrés Bolaños Penagos

Israel Elias Manjarrez Quimiz

Carlos Gabriel Tovar Pena

Edinson Colonia Paez

David Castro

Poul Lorca

Arturo Baduna

Edgardo Molina Gonzalez

alberto ayala rodriguez

Franklin Carlos Huichi Contreras

Miguel Angel Reyes Moreno

Luis Alejandro Alvarez Cadavid

Hace 10 meses

Jorge Pinzón

Luis Humberto Osorio Quiceno

Nicolas Molina

Profesor

Jorge Giovanny Paz Mazariegos

Mariela Cristaldo

Jimmy Buriticá Londoño

Componentes

Desarrollo de Tienda Online con Angular Avanzado

Creación y Gestión de Componentes en Angular

Comunicación de Componentes: Envío de Datos con Inputs en Angular

Comunicación de Eventos entre Componentes en Angular

Creación y Reutilización de Componentes en Angular para Tiendas

Ciclo de Vida de Componentes en Angular: Constructor a OnDestroy

Manejo de eventos y limpieza en Angular con ngOnDestroy y setters

Componentes en Angular: Creación y Organización de Productos

Estilos en Angular: Alcance y Maquetación de Componentes

Despliegue Dinámico de Menú Lateral en Angular

Comunicación Padre-Hijo con Inputs y Outputs en Angular

Servicios

Creación y uso de servicios en Angular para lógica de negocio

Inyección de Dependencias en Angular: Conceptos y Funcionamiento

Conexión a APIs usando HTTP Client Module en Angular

Pipes y Directives

Uso de Pipes en Angular: Transformación y Formatos

Creación de Pipes Personalizados en Angular

Creación y Uso de Directivas en Angular para Manipular el DOM

Best practices

Reactividad y Manejo de Estado en Angular con NGRX

Implementación de Linter en Angular para Buenas Prácticas de Código

Despedida

Componentes y Servicios en Aplicaciones Web

Despliegue Dinámico de Menú Lateral en Angular

Progreso del curso

Componentes

Servicios

Pipes y Directives

Best practices

Despedida

Recursos

Recursos