8 diciembre, 2022

Menú Responsive Hamburguesa en React con CSS

Para diseñar un menú animado responsive en React JS aplicando CSS debemos crear un componente Navbar

Suscríbete a nuestro canal en Youtube

Suscríbirse

Cada vez son más utilizadas los headers con barras de navegación que tienen un menu de tipo hamburguesa y además sean responsive. A continuación crearemos un componente navbar funcional usando reactjs con Hooks useState.

Para diseñar un menú animado responsive  en React JS aplicando CSS debemos crear un componente Navbar

Pasos para crear un menú en React JS con Hooks

  1. Preparando el entorno React JS
  2. Creando el componente Navbar
  3. Aplicando estilos CSS
  4. Integrando la interactividad con React JS useState

 

Preparando el entorno React JS

Dando por echo que ya tienes instalado ReactJS con ViteJS  empecemos a programar, agregamos a nuestro archivo App.jsx el componente Navbar será el contenedor del menú.

App.jsx

import './App.css'
import Navbar from './Navbar/Navbar'

function App() {
  return (
    <div className="App">
     <Navbar/>     
    </div>
  )
}

export default App

App.css

body{ font-family: Arial, Helvetica, sans-serif;}

 

Creando el componente Navbar

Aqui prácticamente vamos a escribir las etiquetas HTML en JSX para dibujar los elementos del menú Navbar.

Obviamente para crear nuestro compoenente llamado Navbar debemos

  • Primero debe crear una carpeta llamada Navbar
  • Dentro de la carpeta Navbar cree un archivo llamado Navbar.jsx
  • y finalmente crear otro archivo llamado Navbar.css dentro de la misma carpeta

Navbar/Navbar.jsx

import React from "react";
import "./Navbar.css"

const Navbar = () => {
    return(
        <div className="navbar">
            <div className="nav_logo"> CODEA.APP </div>
            <div className="nav_items">
                <a href="#"> INICIO</a>
                <a href="#"> BIO</a>
                <a href="#"> PORTAFOLIO</a>
                <a href="#"> CONTACTO</a>
            </div>
            <div className="nav_toggle" >
                <span></span>
                <span></span>
                <span></span>
            </div>
        </div>
    )
}
export default Navbar

 

Aplicando estilos CSS al componente

Codearemos las reglas necesarias para dotar de un diseño amigable al menú de navegación tanto para la versión escritorio y la versión móvil, además escribiré las clases que intervendrán en la interavidad del botón toggle o en este caso el icono de hamburguesa, cuya principal función es visualizar o no los items del menú la animación del mismo. 

Navbar/Navbar.css

.navbar{
    background:#ff8d01;
    height: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.nav_logo{
    font-weight: bold;
    font-size: 20px;
    margin: 15px;
    color: white;
}
.nav_items a{
    margin: 15px;
    color: white;
    position: relative;
    text-decoration: none;
}
.nav_toggle{
    display: none;
}

@media (max-width: 768px) {
    .nav_items{
        position: absolute;
        top: 60px;
        left: 0;
        background: rgb(255, 128, 0);
        display: flex;
        flex-direction: column;
        width: 100%;
        height: -webkit-fill-available;        
        transform: translateX(-100%);
        transition: 0.3s ease all;
    }
    .nav_items.open{
        transform: translateX(0) !important
    }
    .nav_toggle{
        display: flex !important;
        flex-direction: column;                
        margin: 15px;
    }
    .nav_toggle span{
        width: 30px;
        height: 4px;
        background: white;
        margin-bottom: 5px;
        border-radius: 2px;             
        transform-origin: 5px 0px;
        transition: all 0.2s linear;
    }
    .nav_toggle.open > span{
        transform: rotate(45deg) translate(0px, 0px);
    }
    .nav_toggle.open > span:nth-child(2){
        display: none;
    }
    .nav_toggle.open > span:nth-child(3){
        transform: rotate(-45deg) translate(-5px, 1px);
    }
}

 

Interactividad con React Hooks | useState

Agregaremos un estado con useState, el onclick nav_toggle escuchará dicho evento lo que permitirá renderizar los cambios necesarios para mostrar o no mostrar los items.

import React, {useState} from "react";
import "./Navbar.css"

const Navbar = () => {
    const [isOpen, setIsOpen] = useState(false)
    return(
        <div className="navbar">
            <div className="nav_logo"> CODEA.APP </div>
            <div className={`nav_items ${isOpen && "open"}`}>
                <a href="#"> INICIO</a>
                <a href="#"> BIO</a>
                <a href="#"> PORTAFOLIO</a>
                <a href="#"> CONTACTO</a>
            </div>
            <div className={`nav_toggle ${isOpen && "open"}`} onClick={ () => setIsOpen(!isOpen)} >
                <span></span>
                <span></span>
                <span></span>
            </div>
        </div>
    )
}
export default Navbar

 

Finalmente,  Ha creado con éxito un menú de navegación personalizado en una hoja de estilo React with CSS.

En conclusión

En este ejemplo práctico, hemos visto cómo diseñar un menú de navegación personalizado con una hoja de estilo React con CSS.

Agregaremos un enrutamiento al componente Navbar, que veremos en el siguiente tutorial en unos próximos días.


Leido 8661 veces | 15 usuarios

Descarga del código fuente React JS de Menú Responsive Hamburguesa en React con CSS

52 descargas

Para descargar el código crea una cuenta

Crear cuenta

Compartir link del tutorial con tus amigos


ReactJS y Laravel Directorio de Empresas

USD 27.00

Descarga del código fuente

ReactJS y Laravel Directorio de Empresas
Curso práctico de ReactJS - Carrito de Compra

USD 10.00

Descarga del código fuente

Curso práctico de ReactJS - Carrito de Compra

Más tutoriales de React JS

Codea Applications

México, Colombia, España, Venezuela, Argentina, Bolivia, Perú

© Copyright Codea::App Cursos de Programación Online | LATAM | 2020 - 2025