@کدبانکCodeBucks
کمک به شما برای یادگیری کد! در اینجا می توانید آموزش های مربوط به توسعه وب را پیدا کنید. کدگذاری را ادامه دهید …
در این پست ، من قصد دارم یک روش ساده برای ایجاد منوی همبرگر در ReactJS را به اشتراک بگذارم. با استفاده از این روش می توانید هر نوع منوی همبرگر را که می خواهید ایجاد کنید.
اگر می خواهید آموزش کامل ایجاد منوی همبرگر با تمام قابلیت های مختلف مانند React-Router با جلوه گرادیان شیب افراطی پس زمینه را ببینید ، می توانید ویدیوی زیر را دنبال کنید.
https://www.youtube.com/watch؟v=XQCuew98W4k
اول از همه ، برنامه واکنش خود را با استفاده از موارد زیر ایجاد کنید:
npx create-react-app HamburgerMenuوابستگی به اجزای سبک را نصب کنید:
npm install styled-componentsاکنون اگر می خواهید پرونده متفاوتی برای منوی Hamburger خود ایجاد کنید ، می توانید در اینجا همه چیز را در فایل app.js برای این آموزش می نویسم.
کار ما با وارد کردن اجزای مدل دار شروع می شود.
import styled from "styled-components";ابتدا یک منوی ثابت و ثابت ایجاد می کنیم. نام آن را MenuLabel بگذارید و با استفاده از اجزای مدل شده ایجاد کنید.
import React,{useState} from "react";
import "./styles.css";
import styled from "styled-components";
const MenuLabel = styled.label`
background-color: #B6EDC8;
position: fixed;
top: 6rem;
right: 6rem;
border-radius: 50%;
height: 7rem;
width: 7rem;
cursor: pointer;
z-index: 1000;
box-shadow:...