Скачать или смотреть How to Create a Animated Dropdown Menu on React

===CSS Style Sheet===
#main{
border:1px solid black;
height:90vh;
margin:10px;
display:flex;
justify-content:center;
align-items:center;
}

#dropdown{
border: 1px solid black;
border-radius: 5px;
padding: 5px;
background-color:grey;
}

#rel{
border:1px solid red;
padding:10px;
}

.options{
width: 60px;
padding: 5px;
margin:2px;
}

#optionBoarder{
border: 1px solid blue;
display:none;
width:70px;
top:100%;
right:0;
transform-origin:top right;

-webkit-animation-name: transformScale;
-webkit-animation-duration: 0.3s;
animation-name: transformScale;
animation-duration: 0.3s
}

#check:checked ~ div #optionBoarder{
display:block
}

#check:checked ~ #back{
display:block
}

#back{
top:0;
border: 1px solid green;
width:100%;
height:100%;
background-color: rgba(0,0,0,.2);
display:none;
}

@-webkit-keyframes transformScale {
0% {transform: scale(0,0); opacity: 0}
100% {transform: scale(100%,100%); opacity: 1}
}

@keyframes transformScale {
0% {transform: scale(0,0); opacity: 0}
100% {transform: scale(100%,100%); opacity: 1}
}

===HTML===
❮input id='check' type='checkbox' style={{display:'block'}} /❯

❮label id='back' for='check' style={{position:'absolute'}}❯
Background
❮/label❯

❮div id='rel' style={{position:'relative'}}❯

❮label id='dropdown' for='check')Dropdown(/labe❯

❮div id='optionBoarder' style={{position:'absolute'}}❯
❮input className='options' value='button1'/❯
❮input className='options' value='button2'/❯
❮input className='options' value='button3'/❯
❮/div❯

❮/div❯

DONATE:
---------------
PAT:   / rezatahirkheli  
PP: https://www.paypal.com/paypalme/rezat...
BTC: 3EUQBWZKX9Vcwdffd3cUGATQopxrAQQxJ9
LTC: MBXE6hJgxxFYSD8SjmR7sHCHGTqFXmNGoU