Inicio » Blog » React JS

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 6863 veces

Descarga el código fuente React JS

Recurso descargado 44 veces

USD

Descargar Código Fuente

Compartir link del tutorial con tus amigos


ReactJS y Laravel Directorio de Empresas ReactJS y Laravel Directorio de Empresas

Curso ReactJS y Laravel desarrollo fullstack directorio empresarial

Descarga del código fuente

USD 47.00

ReactJS Básico ReactJS Básico

ReactJS Básico

Descarga del código fuente

USD 0.00

Aprende más sobre React JS

Cursos de programación

Codea Codea App

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

© Todos los derechos reservados Codea App | ...de frente al código!!! | 2020 - 2023