Burger Menu

React JS

App

// src/App.js

import React from "react";
import "./App.css";
import BurgerMenu from "./BurgerMenu";

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

export default App;

BurgerMenu

// src/BurgerMenu.js

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

const BurgerMenu = () => {
  const [isActive, setIsActive] = useState(false);

  const toggleMenu = () => {
    setIsActive(!isActive);
  };

  return (
    <nav>
      <div
        className={`menu-toggle ${isActive ? "active" : ""}`}
        onClick={toggleMenu}
      >
        <div className="burger"></div>
      </div>
      <div className={`menu ${isActive ? "active" : ""}`}>
        <ul>
          <li>
            <a href="#">Home</a>
          </li>
          <li>
            <a href="#">Features</a>
          </li>
          <li>
            <a href="#">Blog</a>
          </li>
          <li>
            <a href="#">Careers</a>
          </li>
        </ul>
      </div>
    </nav>
  );
};

export default BurgerMenu;

CSS Burger Menu

React TS

App

// src/App.tsx

import React from "react";
import "./App.css";
import BurgerMenu from "./BurgerMenu";

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

export default App;

BurgerMenu

// src/BurgerMenu.tsx

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

const BurgerMenu: React.FC = () => {
  const [isActive, setIsActive] = useState(false);

  const toggleMenu = () => {
    setIsActive(!isActive);
  };

  return (
    <nav>
      <div
        className={`menu-toggle ${isActive ? "active" : ""}`}
        onClick={toggleMenu}
      >
        <div className="burger"></div>
      </div>
      <div className={`menu ${isActive ? "active" : ""}`}>
        <ul>
          <li>
            <a href="#">Home</a>
          </li>
          <li>
            <a href="#">Features</a>
          </li>
          <li>
            <a href="#">Blog</a>
          </li>
          <li>
            <a href="#">Careers</a>
          </li>
        </ul>
      </div>
    </nav>
  );
};

export default BurgerMenu;

CSS Burger Menu

React JS + Tailwind

App

// src/App.js

import React from "react";
import "./App.css";
import BurgerMenu from "./BurgerMenu";

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

export default App;

BurgerMenu

// src/BurgerMenu.tsx или src/BurgerMenu.js

import React, { useState } from "react";

const BurgerMenu = () => {
  const [isActive, setIsActive] = useState(false);

  const toggleMenu = () => {
    setIsActive(!isActive);
  };

  return (
    <nav className="relative">
      <div
        className={`fixed top-5 right-5 w-10 h-10 cursor-pointer flex items-center justify-center z-50`}
        onClick={toggleMenu}
      >
        <div
          className={`relative bg-lime-500 w-8 h-1 rounded transition-all duration-300 transform ${isActive ? "bg-transparent" : ""}`}
        >
          <span
            className={`absolute bg-lime-500 w-full h-1 rounded transition-all duration-300 transform ${isActive ? "rotate-45 translate-y-0" : "-translate-y-2.5"}`}
          ></span>
          <span
            className={`absolute bg-lime-500 w-full h-1 rounded transition-all duration-300 transform ${isActive ? "-rotate-45 translate-y-0" : "translate-y-2.5"}`}
          ></span>
        </div>
      </div>
      <div
        className={`fixed top-0 left-0 w-full h-full bg-indigo-500 flex items-center justify-center transition-all duration-300 transform ${isActive ? "translate-x-0 opacity-100" : "translate-x-full opacity-0"} z-40`}
      >
        <ul className="list-none text-center p-0">
          <li className="my-5">
            <a href="#" className="text-white text-2xl font-bold">
              Home
            </a>
          </li>
          <li className="my-5">
            <a href="#" className="text-white text-2xl font-bold">
              Features
            </a>
          </li>
          <li className="my-5">
            <a href="#" className="text-white text-2xl font-bold">
              Blog
            </a>
          </li>
          <li className="my-5">
            <a href="#" className="text-white text-2xl font-bold">
              Careers
            </a>
          </li>
        </ul>
      </div>
    </nav>
  );
};

export default BurgerMenu;

React TS + Tailwind

App

// src/App.js

import React from "react";
import "./App.css";
import BurgerMenu from "./BurgerMenu";

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

export default App;

BurgerMenu

// src/BurgerMenu.tsx или src/BurgerMenu.js

import React, { useState } from "react";

const BurgerMenu = () => {
  const [isActive, setIsActive] = useState(false);

  const toggleMenu = () => {
    setIsActive(!isActive);
  };

  return (
    <nav className="relative">
      <div
        className={`fixed top-5 right-5 w-10 h-10 cursor-pointer flex items-center justify-center z-50`}
        onClick={toggleMenu}
      >
        <div
          className={`relative bg-lime-500 w-8 h-1 rounded transition-all duration-300 transform ${isActive ? "bg-transparent" : ""}`}
        >
          <span
            className={`absolute bg-lime-500 w-full h-1 rounded transition-all duration-300 transform ${isActive ? "rotate-45 translate-y-0" : "-translate-y-2.5"}`}
          ></span>
          <span
            className={`absolute bg-lime-500 w-full h-1 rounded transition-all duration-300 transform ${isActive ? "-rotate-45 translate-y-0" : "translate-y-2.5"}`}
          ></span>
        </div>
      </div>
      <div
        className={`fixed top-0 left-0 w-full h-full bg-indigo-500 flex items-center justify-center transition-all duration-300 transform ${isActive ? "translate-x-0 opacity-100" : "translate-x-full opacity-0"} z-40`}
      >
        <ul className="list-none text-center p-0">
          <li className="my-5">
            <a href="#" className="text-white text-2xl font-bold">
              Home
            </a>
          </li>
          <li className="my-5">
            <a href="#" className="text-white text-2xl font-bold">
              Features
            </a>
          </li>
          <li className="my-5">
            <a href="#" className="text-white text-2xl font-bold">
              Blog
            </a>
          </li>
          <li className="my-5">
            <a href="#" className="text-white text-2xl font-bold">
              Careers
            </a>
          </li>
        </ul>
      </div>
    </nav>
  );
};

export default BurgerMenu;