Kevin Powell - Community•3y ago

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•3y ago

What should it open? There is only a button, no other content

MarkBoots•3y ago

Aditya KiradOP•3y ago

as you can see there is a box inside the button component

MarkBoots•3y 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 KiradOP•3y 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•3y 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 KiradOP•3y 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 KiradOP•3y 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•3y 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•3y 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 KiradOP•3y 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.

Gaming

Programming

dropdown not opening