Adam Mustafa
Reputation: 3
How do I duplicate my react megamenu? Every attempt leads to a frozen or poorly formatted megamenus
I attempted to create a megamenu for the first time. I created it for one option in my navigation bar and now I want to duplicate it for the other options I have. Here is the code I have for my current working megamenu, which file am I supposed to work on to create separate megamenus from the first one I created?
App.js:
import './App.css';
import {Navbar} from "./components/Navbar";
import { NavItem } from './components/NavItem';
import { DropdownMenu } from './components/DropdownMenu';
function App() {
return (
<div className="App">
<Navbar>
<NavItem link="Company"/>
<NavItem link="Services">
<DropdownMenu />
</NavItem>
<NavItem link="Products"/>
</Navbar>
</div>
);
}
export default App;
NavItem.js:
import React, {useState} from 'react'
import { CSSTransition } from 'react-transition-group';
export const NavItem = (props) => {
const[open, setOpen]=useState(false);
return (
<li className='nav-item' onClick={()=>setOpen(!open)}>
<a href="#" className='nav-link'>
{props.link}
</a>
<CSSTransition in={open} unmountOnExit timeout={500} classNames="main">
<div className="menu">
{props.children}
</div>
</CSSTransition>
</li>
)
}
DropdownMenu.js:
import React from 'react'
import DropDownItem from "./DropdownItem"
import img from "../components/img/support.jpg"
export const DropdownMenu = () => {
return (
<div className='dropdown'>
<DropDownItem>
<div className='Intro-Products'>
<br></br>
<h4 className='Title'>Products and Services</h4>
<br></br>
<br></br>
<p className='Lorem'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
</div>
</DropDownItem>
<DropDownItem>
<div className='Services'>
<div className='Column-1'>
<div className='Cloud-Solutions'>
<a href='#'>
<li><a href='#'>Cloud Solutions</a></li>
</a>
</div>
<br></br>
<div className='Managed-Services'>
<a href='#'>
<li><a href='#'>Managed Services</a></li>
</a>
</div>
<br></br>
<div className='IT-Security'>
<a href='#'>
<li><a href='#'>IT Security</a></li>
</a>
</div>
<br></br>
<div className='Desktop-Support'>
<a href='#'>
<li><a href='#'>Desktop Support</a></li>
</a>
</div>
<br></br>
<div className='Network-Solutions'>
<a href="#">
<li><a href='#'>Network Solutions</a></li>
</a>
</div>
<br></br>
</div>
<div className='Column-2'>
<div className='Consulting-Support'>
<a href="#">
<li><a href='#'>Consulting Support</a></li>
</a>
</div>
</div>
</div>
</DropDownItem>
<DropDownItem>
<div className='Item-3'>
<div className='support'>
<img src={ img } alt="support img"/>
</div>
</div>
</DropDownItem>
</div>
)
}
DropdownItem.js:
import React from 'react'
export default function DropdownItem(props) {
return (
<div className='dropdown-item'>
{props.children}
</div>
)
}
Index.css:
body {
margin: 0;
font-family: Helvetica;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
:root{
--bg:white;
--bg-secondary:#474747;
--text-color: black;
--border: 1px solid #9c9a9a;
}
ul{
list-style: none;
margin: 0;
}
a{
color: var(--text-color);
/*text-align: center;*/
text-decoration: none;
}
.Intro-Products{ /*affects all items within this section of the right items*/
Width: 500px;
text-align: left;
padding-right: 122px;
border-right-style: solid;
height: 1200px;
margin-top: -30px;
}
.Lorem{
letter-spacing: 2px;
line-height: 25px;
font-size: 18px;
}
.Title{
padding-right: 122px;
}
.Services{
position: absolute;
width: 1000px;
padding-bottom: 10px;
height: 1200px;
}
.Services li{
text-align: left;
font-size: 21px;
padding-right: 10px;
margin-bottom: 40px;
text-transform: uppercase;
font-weight: bold;
}
.Cloud-Solutions:hover{
background-color: rgb(243, 243, 243);
transition: all 0.3s ease-in;
width: 225px;
}
.Managed-Services:hover{
background-color: rgb(243, 243, 243);
transition: all 0.3s ease-in;
width: 255px;
}
.IT-Security:hover{
background-color: rgb(243, 243, 243);
transition: all 0.3s ease-in;
width: 165px;
}
.Desktop-Support:hover{
background-color: rgb(243, 243, 243);
transition: all 0.3s ease-in;
width: 235px;
}
.Network-Solutions:hover{
background-color: rgb(243, 243, 243);
transition: all 0.3s ease-in;
width: 265px;
}
.Consulting-Support{
position: absolute;
margin-top: -410px;
right: 400px;
width: 265px;
height: 25px;
}
.Consulting-Support:hover{
background-color: rgb(243, 243, 243);
transition: all 0.3s ease-in;
width: 265px;
}
.navbar{ /*nav bar itself*/
height: 60px;
background-color: var(--bg);
padding: 0 1rem;
border-bottom: var(--border);
padding-right: 1600px;
}
.navbar-nav{ /*affects every piece of text until the second section*/
max-width: 100%;
height: 100%;
display: flex;
justify-content: center;
color: var(--text-color);
}
.nav-item{ /*container for the nav bar options: company,services, and products*/
width: 180px;
display: flex;
justify-content: center;
align-items: center;
vertical-align: middle;
margin-right: -30px;
}
.nav-link{ /*Seperate Nav Bar containers*/
display: flex;
justify-content: center;
align-items: center;
padding: 10px 0;
transition: all 0.3s ease-in;
font-size: 1.4rem;
}
.nav-link:hover{ /*nav bar links*/
background-color: rgb(243, 243, 243);
transition: all 0.3s ease-in;
height: 40px;
width: 150px;
}
.dropdown{ /*dropdown menu background*/
position: absolute;
top: 58px;
width: 100%;
background: #FAF9F6;
border: var(--border);
left: 50%;
transform: translate(-50%);
padding: 1rem;
border-radius: 5px;
display: flex;
justify-content: space-around;
overflow: hidden;
height: 400px;
}
.dropdown-item{
display: flex;
flex-direction: column;
align-items: center;
width: 300px;
height: 300px;
padding: 0.4rem;
transition: background 0.3s;
}
.support img{
position: absolute;
height: 500px;
top:0px;
width: 700px;
right: -120px;
}
.Item-3{
position: absolute;
height: 2000px;
top:0px;
width: 600px;
}
.dropdown-item h4{
font-size: 28px;
text-transform: uppercase;
text-align: center;
margin-bottom: 10px;
}
/*animations for the dropdown menu*/
.main-enter{
position: absolute;
top: 0;
left: 0;
transform: translateY(-310px);
z-index: -1;
}
.main-enter-active{
width: 100%;
transform: translate(0%);
transition: all 300ms ease;
}
.main-exit{
position: absolute;
left: 0;
top: 0;
}
.main-exit-active{
width: 100%;
transform: translateY(-550px);
z-index: -1;
transition: all 300ms ease;
}
I originally tried to duplicate the DropdownMenu.js file, creating a new one called DropdownMenu2.js. But the megamenu stayed unresponsive on the screen; it also did not have the animations the original dropdown menu had. It blocked the working megamenu.
Sorry if this question is poorly formatted, and I appreciate the help!
Upvotes: 0
Views: 36