Menú Responsive Hamburguesa en React con CSS

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 10022 veces | 20 usuarios