fireship-io / 229-multi-level-dropdown Goto Github PK
View Code? Open in Web Editor NEWBuild an animated multi-level dropdown inspired by Facebook's UI
Build an animated multi-level dropdown inspired by Facebook's UI
The forth menu item in the dropdown is always unclickable and unhoverable in the front icon face and it is available when mouse is hovered in the back or clicked. Please take a look into it.
Regards
This was an excellent tutorial, and I managed to get the drop down working, but I'm trying to get some ideas on how to have multiple drop downs on a single page. Currently if i open one dropdown all dropdowns on the page open up. I'm not sure if i need to go down the rabbit hole of setting state for which menu is open, or do i just created a separate DropDownMenu for each menu i need, or if i'm just missing some minor thing from the tutorial. Any leads would be appreciated.
Can anyone explain the {open && props.children}
here? I am having trouble understand its positioning and effect. It is on line 45 of the App.js file for reference
function NavItem(props) {
const [open, setOpen] = useState(false);
return (
<li className="nav-item">
<a href="#" className="icon-button" onClick={() => setOpen(!open)}>
{props.icon}
</a>
{open && props.children} // <- THIS CODE HERE
</li>
);
}
Thank you!
Hello dear freind , this menu is very beautiful and practical, can you put it as a usable component that developed in Vue JS ?
Thankful
229-multi-level-dropdown/src/App.js
Line 60 in 15619d3
the dropdown opacity increases when it is overlaying other components below the navbar and all its transitions and hover effect doesn't work .
it looks fine when it doesn't overlay the elements below but the hover effect and transition effects still doesn't work .
everything still works when there are simple Html elements like h1 .
Hope this Issue gets cleared soon
DropdownItems rightIcon is not visible
I'm not sure this is an issue, but when I try to code along with the tutorial on youtube. I ran into this problem.
Classes added to my element look like this: "menu-primary enter enter-active" instead of "menu-primary-enter-active".
So I have to change my css to this in order to make it works:
.menu-primary.enter {
position: absolute;
transform: translateX(-110%);
}
.menu-primary.enter.enter-active {
transform: translateX(0%);
transition: all var(--speed) ease;
}
.menu-primary.exit {
position: absolute;
}
.menu-primary.exit.exit-active {
transform: translateX(-110%);
transition: all var(--speed) ease;
}
.menu-secondary.enter {
transform: translateX(110%);
}
.menu-secondary.enter.enter-active {
transform: translateX(0%);
transition: all var(--speed) ease;
}
.menu-secondary.exit.exit-active {
transform: translateX(110%);
transition: all var(--speed) ease;
}
I have checked the version of react-transition-group and it is the same with this repo (4.3.0). Can anyone explain why this happened? Thank you
when I click on dropdown its goes top of my page. I cant find solution can u help me?
Hi,
The drop down menu does not gets closed when clicked outside of menu. This could be taken as an enhancement.
--
Thanks
Hi,
I have no idea what happened but when I click on the drop down button, a blank page appears for me. I have no idea why this happens. I haven't made any changes to the code. Please help
When using this code with typescript ans react i get the following errors:
Property 'firstChild' does not exist on type 'never'.
Type 'null' is not assignable to type 'string | number | (string & {}) | undefined'.
Navbar includes multiple NavItems, they could include multiple dropdowns - it all works very well thank you. If I have one drop-down great. However, if I have a second drop-down menu it does not close the first when I open a new one which then appears underneath the first drop-down which is not the desired action. So it is both nonfunctional and looks bad.
An answer to this question could help people to work out how to resolve the other issue which could then be resolved with 'react-onclickoutside' maybe
The menu is rerendering so frequently that the user is not even able to click on it.
The problem is that you are defining a component inside another component and label this technique as "component composition" but this is not, this is component composition
This demo is worth a thousand words..
Btw this project is really awesome, thanks :)
for some reason, 1st menu comes then elements come and it doesn't follow transform 110% to 0% works for only initial two only.
Thank You
The > icons in the menu fail to display correctly in any recent browser.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.