dropdown not opening
https://codesandbox.io/s/cranky-brattain-vbdcu5?file=/src/styles.css
hey folks please help me out I don't know why the dropdown is not opening below the button
CodeSandbox
cranky-brattain-vbdcu5 - CodeSandbox
cranky-brattain-vbdcu5 using @emotion/react, @emotion/styled, @mui/material, react, react-dom, react-icons, react-scripts
11 Replies
What should it open? There is only a button, no other content
as you can see there is a box inside the button component
Think you should look at the menu components mui has
https://mui.com/material-ui/react-menu/
React Menu component - Material UI
Menus display a list of choices on temporary surfaces.
no, actually I want to make my own dropdown menu I want it have to have transition like dropdown menu we see clicking on
plugin
button on https://www.mee6.xyz/MEE6 - The Discord Bot
Install our Discord bot to set up leveling, moderation, music, Twitch, YouTube, and Reddit notifications for your Discord server.
yea, think this is perfect for it
https://mui.com/material-ui/react-menu/#customization
you have the content inside the button, but it needs to be outside
hey folks here is my code sandbox link
https://codesandbox.io/s/practical-thunder-ht07e5?file=/src/styles.css
in this you can see a dropdown which appears and disappear when the button is click and vice versa but I want that when the dropdown appear it should come from the top with a little fade transition and also disappear in this manner
CodeSandbox
practical-thunder-ht07e5 - CodeSandbox
practical-thunder-ht07e5 using @emotion/react, @emotion/styled, @mui/material, react, react-dom, react-icons, react-scripts
I want an animation like animation on plugin dropdown in https://www.mee6.xyz/
MEE6 - The Discord Bot
Install our Discord bot to set up leveling, moderation, music, Twitch, YouTube, and Reddit notifications for your Discord server.
in your css (instead of .dropdown and .dropdownBox)
and js
.dropdown is the basic settings of the box, but translated to the top so it's out of the screen,
when button is clicked, the .active class will be attached which will set the transform position back to 0;
if you had a look inside the dev tools of the mee6 website, you would see that the dropdown section has
and when the dropdown is active, it just stops being opaque and moves down a little bit
if you ever find examples that you like, just look in the dev tools to see how they do it
so, I played with CSS of dropdown for a while and this is what I have achieved till now
https://codesandbox.io/s/peaceful-hofstadter-i1hjet?file=/src/styles.css
I think I'm very close to the expected result so If someone will help I will be very thankful my expected result is transition in the dropdown of the https://www.mee6.xyz/ of plugin
AdityaKirad
CodeSandbox
peaceful-hofstadter-i1hjet - CodeSandbox
peaceful-hofstadter-i1hjet by AdityaKirad using @emotion/react, @emotion/styled, @fontsource/arvo, @mui/icons-material, @mui/material, react, react-dom, react-icons, react-scripts
MEE6 - The Discord Bot
Install our Discord bot to set up leveling, moderation, music, Twitch, YouTube, and Reddit notifications for your Discord server.