How To Make A Dropdown Menu From Scratch | HTML, CSS, Javascript
HTML-код
- Опубликовано: 19 мар 2022
- 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:
www.buymeacoffee.com/webcode/...
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:
/ quickcodingtuts
My Products:
www.buymeacoffee.com/webcode/...
Support Me To Keep Creating And Improving My Content:
paypal.me/quickcodingtuts?loc...
www.buymeacoffee.com/webcode/
Tags:
-----------------
#dropdown
#javascript
#menu
javascript dropdown menu
custom select menu
html css javascript dropdown from scratch 
Хобби
Take a look at a more polished version of this dropdown here:
ruclips.net/video/TOozMj7RLOQ/видео.html
tried and works fine. looks easy to expand for many more menus.. liked it much.
Wonderfully edited, along with splendid code; congrats!
Fantastic video! Your dropdown is working excellently!
Wow, thanks for the vid - exactly what i was looking for!
Fantastic info, thank you !
Thank you bro! Very beautiful!
Awesome video! I love the format, and the menu looks awesome too
Thanks for watching!
@@quickcodingtuts I need your help, Please!!! I have a language dropdown, but in each language there is a img flag of that country, I use your dropdown, but I don't know how to make the flag in the select change??
You can set the flag img source in the select to the source of the clicked option.
@@quickcodingtuts
Eng / $
Ukr / ₴
Tr / ₺
Eng / $
not only beautiful and polished video you made but it was also direct and right to the point thank you so much
Really glad to hear that. Thank you!
Thank you so much dude.
thank you so much bro, really helped me and your explanation of the code is 100% clean
Glad i could be of help
Its wonderfull, thanks..
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',() =>
Thank you so much! This was so easy to follow.
Glad to be of help!
I tried it! And it works flawlessly!
Great to hear!
Amazing Video, I had a class contest and came first, love this so much. ❤
That's awesome man. Glad I could help.
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.
Same here
The other dropdown doesn't work 💔💔
Heyo, thank you for the amazing tutorial. A small change in js, once you select an option from the drop down the .select-clicked style is persisting. You can solve by toggling it again.
// Remove active class from all options
options.forEach(option => {
option.classList.remove('active');
select.classList.toggle('select-clicked');
});
thank you so much for this!!
You're welcome!
i liked this projet is verry simple and fast!
My code is working on code pen but not on any other compiler what could be the issue please help
Cant open dropdown, also have little problem in code... transtion: background 0.3s; the background is all red
What parameters would i change to change the location of the button?
I get an error about the document not being defined in the Java-script "Error: document is not defined".
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?
I would try adding more dropdowns to see what happens then. One working while the other one doesn't is pretty weird though.
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?
Have you assigned the querySelector to the dropdown element? That allows you to use more dropdowns that work independently from each other.
is this html code semantic? is it going to have accessibility issues?
BEST CHANNEL
Love the music
Good bro. but it's not working😐😐
Double check spelling, one spelling mistake or misplaced curly brace can break the whole code
Check your code more carefully, likely you've made mistake
thank you so much for help me
My code isn’t working and I’m not sure why haha
red>background< red what can i install or what do I do
do you use a plugin to actively update the page while you're coding? if so what is it?
Just something i put together with HTML, CSS and JavaScript
Hi i am encountering some problem, i have followed exactly on all the codes from html to CSS to Javascripts shown in the video, i have added the before the too, but i am not sure why the dropdown doest work. the hovering seems fine. i think its my javascript not working which idk why
Do you have any errors in the console, after clicking the dropdown button?
Because your javascript is not getting called and it is because you are not calling javascript function on event call from html. In this video he missed this part.
Como puedo hacer que funcione en un servidor json, en un archivo ejs
how can i click outside and it close?
Excellent video! How can I do to close the menu by clicking on any part of the screen? I’m not being able to solve it
I could release a new video with that and many more features I overlooked in this one. Would that help?
For anyone running into the "options.forEach is not a function" error, make sure that you use querySelectorAll when declaring the options variable, not querySelector. Its easy to miss this small detail in the video. Hope this helps!
thx! also how do you make the options actually do something?
You simply put the code that you want to run in the options event listener.
I have a question, what is the source for the Caret? Is it an SVG or a PNG or what? (Love your Video!)
Thank you. The caret is made with CSS entirely. No images whatsoever.
hi, I have a problem. Actually did everything even added pics and it worked very well in normal html,css,js file however when it comes to the react.js it does not work, if you ask me iw say that it is problem of js bcz every single think works except js part when it is clicked it doesnot open anything. JS code is between function and return. It would be very nice if i have a lil help. Thanks in advance :)
I have this exact project built with React. You can find it on my channel.
@@quickcodingtuts can you pls share the link to the comment?
@@quickcodingtuts dude thanks actually i did find it and coded it. but i have to put images near to every li element but i dont know how to do it can you help me?
You can insert them like any other image, with the img tag.
@@quickcodingtuts but how?const dropdownList = options.map((option,i) =>
,
{option}
)
like this?
Is dropdown.querySelector a function? I thought only document.querySelector and .querySelectorAll exists
Yes. This selects only the elements inside the dropdown. I combine this with a loop to have multiple dropdowns on the page work independently from each other
You can use the querySelector function on any element just like with the document
hello, where should add the js? head body or inside the div?
Add it just before the closing body tag. I recommend learning the basics of HTML before recreating projects like this one.
From where i can get code of this video?
I only have the first dropdown works. 😪 The console shows error: "Uncaught TypeError: options.forEach is not a function". Any advice?
please help ^^ I have the same error as well
When you created the options variable, did you use querySelectorAll?
const options = dropdown.querySelectorAll('.menu li');
Make sure its querySelectorAll and not just querySelector
@@quickcodingtuts yes, I followed your code strictly
@@billng1527thanks!
love it
great video😍 what text editor do you use?
I use VS code. But what you see in the video is an app I built myself.
will it work for me i have 3000 elements in list to add to dropdown
Yes, but you should also set overflow of hidden and a fixed height to the menu. There is also the problem of searching for an option amongst 3000 choices. You would need to add a search option to filter the list for a better user interface.
how do you get the value from the selected option?
We do that with the "innerText" property, which will get the inner text of the option we click on.
This is nice but: how can i add that js file to my html so my html understands to read my js file too
Add a script tag above the closing body tag and paste your JS in there. I recommend learning the basics of HTML, CSS and JS before trying out a project like this
I am not able to get all the drop down
hi..please can you make web mapping tutorials ... or give me resources.
I followed the step, but the dropdown doesnt showup when I click it.... what will be the issue?
Can't know for sure. Can be a lot of things. Any errors in the console?
@@quickcodingtuts where should I put the log for debugging? thx
Is all the source code mentioned in the video? I have watched 3 times to ensure there was no typo.
@@thomasluk4319 Of course. The final result is made from the code in the video
@@quickcodingtuts Then I really dont know why... I will try this for a complete new project and double check it again
hi my dropdown list arrow not show please tell me how to do it
Carefully follow the CSS code for the caret class
quelqu’un pourrait copié coller sont script java cars moi je n’y arrive pas
First dropdown works fine but 2nd is not working?
how to fix that ?
Have you followed the query selection at the top of the js file? We do it a little differently here to make multiple dropdowns work. If you made a mistake, it will probably be there.
Does this works with image-icons?
Of course
man i would have $$ brought access, but i clicked on the link and could not find this video's source code, so im on to the next channel
The source code for this video is uploaded and available ever since the video came out. You can find it in the 'UI elements' category
It doesn't work, I did 1 in 1 as in the video, but nothing happened, the dropdown does not appear
Are you familiar with the basics of these languages. Do you know how to connect CSS and Javascript files to your HTML and setup a starting HTML template?
is it possible to add a database form mysql workbench to this dropdown menu and use it as a filter?
Don't see a reason why it wouldn't. You can just switch the static data with whatever else you need.
i am getting errors...
I subscribed but can't find the source code for this one. can you please send me a link?
Hello. I have sent the link to your email. You can find this in the UI elements category on Buy Me A Coffee. And you can also search for any other project you need. I usually name them the same as I name the video.
@@quickcodingtuts can you send it to me also??
Here is the link to all source code:
www.buymeacoffee.com/webcode/posts
But this is a small project. I'm sure there is just a small mistake you made in the code. Are there any errors or anything happening on the page that could give me a clue on how to help?
Doesn’t work. Skip the source code
Nice dropdown but not working.Could you please help me to figure it out .
Sure. What kind of problem are you facing?
Thank you so much .I have resolved the issue.
But one thing is that after refreshing the page or if I navigate to other page and then come back to that page, set option is also refreshed . I don't want that in my project .
Thanks
You can use Local storage for that.
Ok
👍👍
How to add scroll bar inside
Add a fixed height for the menu and add overflow: scroll;
@@quickcodingtuts ❤️ thank you it's working
how to calling javascript ?
in your html file
Let the github, please brather ?
song: ruclips.net/video/Z1Qi_B2C9gE/видео.html
hii i need help
What seems to be the issue?
@@quickcodingtuts its all good but i want to be able to filter them out accordingly to the menu. could you give me some help?
@@daniyamary5862 I have a JS filter tutorial. Its one of my newer videos. You can use it to apply the same methods here.
@@quickcodingtuts okie thank youu!!
Is it really that complicated? If yes i hate html and css
We are building the whole thing from scratch, so that we can customize it however we want. These things are always difficult in the beginning when ou are still learning how it's done, but with enough practice and examples it becomes easier. Always improve with small steps so you don't get overwhelmed.
Its not working
No way for me to help you with just " its not working"
Exactly@@quickcodingtuts
Eldropdown no funciona y se nota que con todo el proposito lo hizo para derivar a los usuarios a otro medio de contacto. La verdad que videos así no sirven
Hello. I assure you that the code in the video works. You can also see that it works for other people in the comments. Surely there is something misstyped in your code that would make it not work. I'm always here to help if I can manage my time. All the best.
Aint working bro, checked multiple times
Have you checked the console for errors. Linked booth the stylesheet and script into your HTML?
@@quickcodingtuts yes ivevcgecked multiple times, it says that the there is error where it says "addEventListener" even tho there aint nothin wrong
Denial isn't going to get you anywhere. If the console has an error, then there is a mistake in the code. Trust me, you want to use the console to your advantage as soon as possible, and get used to solving errors.
😇