How To Make A Dropdown Menu From Scratch | HTML, CSS, Javascript

Learn how to build a custom dropdown menu from scratch, using HTML, CSS and Javascript. A simple guide to making a more interesting dropdown UI element with subtle animations, hover effects, and much more...

Get The Source Code From All Of My Videos:

Don't hesitate to ask for help if you face any trouble re-creating a project from any of my videos. I will gladly help :)

All of my project are made from scratch by yours truly. I don't take anyone's code as my own, but I do often see my code being copied and pasted into other channels for their tutorials, so of you see an exact copy of a project on another tutorial, just know that the one on my channel is the original one.

Extra Links:
-----------------

Follow me on Instagram:

My Products:

Support Me To Keep Creating And Improving My Content:

Tags:
-----------------
#dropdown
#javascript
#menu

javascript dropdown menu
custom select menu
html css javascript dropdown from scratch

[quickcodingtuts]

Take a look at a more polished version of this dropdown here:

[vijayd]

tried and works fine. looks easy to expand for many more menus.. liked it much.

[anthonymelohorstmann]

Wonderfully edited, along with splendid code; congrats!

[cold_]

Fantastic video! Your dropdown is working excellently!

[mukaddastaj]

Wow, thanks for the vid - exactly what i was looking for!

[jorta]

thank you so much bro, really helped me and your explanation of the code is 100% clean

[fiupgzq]

not only beautiful and polished video you made but it was also direct and right to the point thank you so much

[jenso]

Awesome video! I love the format, and the menu looks awesome too

[nishantsarang]

My code is working on code pen but not on any other compiler what could be the issue please help

[JonThomasslaps]

Hello im having issues, console log shows syntax issue on everything that does not end in endcurly brace. Ex: dropdowns.forEach(dropdown => {

another ex is option.addEventListener('click', () =>

[arashdeepsingh]

What parameters would i change to change the location of the button?

[PatriciaSL]

Thank you so much! This was so easy to follow.

[samithegayfrog]

My code isn’t working and I’m not sure why haha

[satoupendragon]

Could you help me, when typing transition: background 0.3s; the word background appears in red (typed background-color for now). Also when clicking the drop down arrow, it rotates fine but no dropdown options are showing. Any help with this would be great.

[snjan]

Amazing Video, I had a class contest and came first, love this so much. ❤

According to your project:
I choose Figma from one menu and Twitter from the other. I assign a choice to variables. But querySelector ('. selected') overrides the second selection. How to solve it?

[pejcaa_]

Cant open dropdown, also have little problem in code... transtion: background 0.3s; the background is all red

[facundoperez]

Como puedo hacer que funcione en un servidor json, en un archivo ejs

[sheranivazquez]

Thnk u so much. I just have a little problem, I have 2 dropdowns in different positions, everything works right except for the caret. First dropdown works right, it does the 180 deg transform correctly, but the caret for the second doesn't, I mean, it does rotate, but it ends in a different position when rotated. Is there anyway to change that?

[markjensen]

I get an error about the document not being defined in the Java-script "Error: document is not defined".