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
MarkBoots
MarkBoots3y ago
What should it open? There is only a button, no other content
MarkBoots
MarkBoots3y ago
Aditya Kirad
Aditya Kirad3y ago
as you can see there is a box inside the button component
MarkBoots
MarkBoots3y ago
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.
Aditya Kirad
Aditya Kirad3y ago
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.
MarkBoots
MarkBoots3y ago
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
Aditya Kirad
Aditya Kirad3y ago
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
Aditya Kirad
Aditya Kirad3y ago
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.
MarkBoots
MarkBoots3y ago
in your css (instead of .dropdown and .dropdownBox)
.dropdown{
width: 200px; /*width of box*/
margin-inline: auto; /*align in center*/
padding: 10px;
background-color: #17181f;
color: white;

transform: translateY(-150%); /*move to top*/
opacity: 0;
transition: all 200ms ease-out;
}
.dropdown.active{
transform: translateY(0); /*reset y position*/
opacity: 1;
}
.dropdown{
width: 200px; /*width of box*/
margin-inline: auto; /*align in center*/
padding: 10px;
background-color: #17181f;
color: white;

transform: translateY(-150%); /*move to top*/
opacity: 0;
transition: all 200ms ease-out;
}
.dropdown.active{
transform: translateY(0); /*reset y position*/
opacity: 1;
}
and js
<Box className={["dropdown", plugin ? "active" : ""]}>
<div className="item">item 1</div>
<div className="item">item 2</div>
<div className="item">item 3</div>
<div className="item">item 4</div>
<div className="item">item 1</div>
<div className="item">item 2</div>
<div className="item">item 3</div>
<div className="item">item 4</div>
</Box>
<Box className={["dropdown", plugin ? "active" : ""]}>
<div className="item">item 1</div>
<div className="item">item 2</div>
<div className="item">item 3</div>
<div className="item">item 4</div>
<div className="item">item 1</div>
<div className="item">item 2</div>
<div className="item">item 3</div>
<div className="item">item 4</div>
</Box>
.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;
Coder_Carl
Coder_Carl3y ago
if you had a look inside the dev tools of the mee6 website, you would see that the dropdown section has
.dropdown.hidden {
pointer-events: none;
top: 0;
opacity: 0;
}
.dropdown {
position: absolute;
// This top value is being over-written by the hidden class
top: 1rem;
padding-top: 1rem;
transition-property: all;
transition-timing-function: cubic-bezier(.4,0,.2,1);
transition-duration: .2s;
white-space: normal;
}
.dropdown.hidden {
pointer-events: none;
top: 0;
opacity: 0;
}
.dropdown {
position: absolute;
// This top value is being over-written by the hidden class
top: 1rem;
padding-top: 1rem;
transition-property: all;
transition-timing-function: cubic-bezier(.4,0,.2,1);
transition-duration: .2s;
white-space: normal;
}
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
Aditya Kirad
Aditya Kirad3y ago
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.
Want results from more Discord servers?
Add your server