I wanna make my dropdown menu just like this and i spent days trying do so, I wanna add the black, hollow arrow that rotates and the animation when I click the button (slide up animation)
https://www.veed.io/view/308a765c-bb6e-4cbb-9611-64e37acbb17e?sharingWidget=true&panel=share
Top comments (4)
Hello @bloxy_aaron
While I think your question is better asked on StackOverflow as it's centered more around a question-answer format, I do have some insight on how to achieve the result you want.
Assuming you're just using HTML/CSS/JS with no libraries, you can make use of the transform property in CSS and apply a rotate to it. Have the arrow be pointing one way and when the dropdown opens, transform it to be rotated.
Hope this helps!
My issue is with images, the image doesnt wanna be placed right next to the dropdown button
Not sure what layout option you're using but both grid and flex can help you align those items. I'd recommend looking into both of those as they should help resolve your concern.
If you want an interactive way to learn that, you could look into FlexBox Froggy and CSS Diner
This will look fantastic when you have it working. Do you have a project in mind to use it on? Welcome to dev.to, by the way!