How To Make A Dropdown Menu From Scratch

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

Рет қаралды 168,805

2 жыл бұрын

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

Пікірлер: 154

@quickcodingtuts 6 ай бұрын

Take a look at a more polished version of this dropdown here: kzfaq.info/get/bejne/irWfrbCbnLiwf4U.html

@cold_ Жыл бұрын

Fantastic video! Your dropdown is working excellently!

@anthonymelohorstmann1238 11 ай бұрын

Wonderfully edited, along with splendid code; congrats!

@vijayd5551 Жыл бұрын

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

@mukaddastaj5223 Жыл бұрын

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

@MuhibAfridiWeapons 9 ай бұрын

Thank you so much dude.

@Kenshiro_IT Жыл бұрын

Fantastic info, thank you !

@jenso413 2 жыл бұрын

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

@quickcodingtuts 2 жыл бұрын

Thanks for watching!

@ob5804 Жыл бұрын

@@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??

@quickcodingtuts Жыл бұрын

You can set the flag img source in the select to the source of the clicked option.

@ob5804 Жыл бұрын

@@quickcodingtuts Eng / $ Ukr / ₴ Tr / ₺ Eng / $

@_Fantom_. 7 ай бұрын

Thank you bro! Very beautiful!

@jorta257 2 жыл бұрын

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

@quickcodingtuts 2 жыл бұрын

Glad i could be of help

@user-fi2up8gz2q Ай бұрын

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

@quickcodingtuts Ай бұрын

Really glad to hear that. Thank you!

@oscarcollerde4375 Жыл бұрын

Its wonderfull, thanks..

@PatriciaSL 7 ай бұрын

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

@quickcodingtuts 7 ай бұрын

Glad to be of help!

@s4njan Жыл бұрын

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

@quickcodingtuts Жыл бұрын

That's awesome man. Glad I could help.

@frejaaleniusjonsson4620 Жыл бұрын

thank you so much for this!!

@quickcodingtuts Жыл бұрын

You're welcome!

@jabeztadesse 3 ай бұрын

I tried it! And it works flawlessly!

@quickcodingtuts 3 ай бұрын

Great to hear!

@daelntechsolutionlda4343 Жыл бұрын

i liked this projet is verry simple and fast!

@iznaur_18 Жыл бұрын

BEST CHANNEL

@sarahkay2656 11 ай бұрын

Love the music

@codingwithobidjon1193 Жыл бұрын

Good bro. but it's not working😐😐

@Wanderer2035 Жыл бұрын

Double check spelling, one spelling mistake or misplaced curly brace can break the whole code

@justfisher2920 4 ай бұрын

Check your code more carefully, likely you've made mistake

@luispedroordonez9134 9 ай бұрын

thank you so much for help me

@samithegayfrog6213 Жыл бұрын

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

@arashdeepsingh7559 Жыл бұрын

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

@mithunkinarullathil643 11 ай бұрын

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'); });

@nishantsarang9884 Жыл бұрын

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

@GrowingShorts Жыл бұрын

great video😍 what text editor do you use?

@quickcodingtuts Жыл бұрын

I use VS code. But what you see in the video is an app I built myself.

@satoupendragon7329 Жыл бұрын

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.

@saintmuchacho6464 Жыл бұрын

Same here

@saintmuchacho6464 Жыл бұрын

The other dropdown doesn't work 💔💔

@JonThomasslaps 3 ай бұрын

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',() =>

@pejcaa_ 6 ай бұрын

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

@mhassankhan8677 9 ай бұрын

is this html code semantic? is it going to have accessibility issues?

@enchantedstudiosmk8970 Жыл бұрын

thx! also how do you make the options actually do something?

@quickcodingtuts Жыл бұрын

You simply put the code that you want to run in the options event listener.

@markjensen7489 7 ай бұрын

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

Жыл бұрын

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?

@quickcodingtuts Жыл бұрын

Have you assigned the querySelector to the dropdown element? That allows you to use more dropdowns that work independently from each other.

@cyprienrubio8058 10 ай бұрын

love it

@sheranivazquez2320 Жыл бұрын

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?

@quickcodingtuts Жыл бұрын

I would try adding more dropdowns to see what happens then. One working while the other one doesn't is pretty weird though.

@aguegea2661 Жыл бұрын

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

@quickcodingtuts Жыл бұрын

I could release a new video with that and many more features I overlooked in this one. Would that help?

@Meetinglink Жыл бұрын

red>background< red what can i install or what do I do

@igoriguisz5558 Жыл бұрын

how can i click outside and it close?

@jabeztadesse 3 ай бұрын

I have a question, what is the source for the Caret? Is it an SVG or a PNG or what? (Love your Video!)

@quickcodingtuts 3 ай бұрын

Thank you. The caret is made with CSS entirely. No images whatsoever.

@DeepakYadav-bm1ks Ай бұрын

From where i can get code of this video?

@facundoperez265 Жыл бұрын

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

@snime7772 3 ай бұрын

do you use a plugin to actively update the page while you're coding? if so what is it?

@quickcodingtuts 3 ай бұрын

Just something i put together with HTML, CSS and JavaScript

@Ali-ho1ji Жыл бұрын

hello, where should add the js? head body or inside the div?

@quickcodingtuts Жыл бұрын

Add it just before the closing body tag. I recommend learning the basics of HTML before recreating projects like this one.

@mette6093 Жыл бұрын

This is nice but: how can i add that js file to my html so my html understands to read my js file too

@quickcodingtuts Жыл бұрын

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

@_benk Жыл бұрын

how do you get the value from the selected option?

@quickcodingtuts Жыл бұрын

We do that with the "innerText" property, which will get the inner text of the option we click on.

@aleksism9449 Жыл бұрын

Is dropdown.querySelector a function? I thought only document.querySelector and .querySelectorAll exists

@quickcodingtuts Жыл бұрын

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

@quickcodingtuts Жыл бұрын

You can use the querySelector function on any element just like with the document

@pranavprajapati5737 Жыл бұрын

will it work for me i have 3000 elements in list to add to dropdown

@quickcodingtuts Жыл бұрын

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.

@jayceetan3704 Жыл бұрын

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

@quickcodingtuts Жыл бұрын

Do you have any errors in the console, after clicking the dropdown button?

@fit-pull-kit 10 ай бұрын

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.

@priyanshiagarwal1424 5 ай бұрын

I am not able to get all the drop down

@eamontanner6778 7 ай бұрын

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!

@narinnarin5244 Жыл бұрын

hi..please can you make web mapping tutorials ... or give me resources.

@User_4_2_1 11 күн бұрын

Good 👍👍👍👍👍 How to download this code

@kobifclip1792 Жыл бұрын

quelqu’un pourrait copié coller sont script java cars moi je n’y arrive pas

@umarmughal3297 11 ай бұрын

hi my dropdown list arrow not show please tell me how to do it

@quickcodingtuts 11 ай бұрын

Carefully follow the CSS code for the caret class

@czarscrib3680 Жыл бұрын

Does this works with image-icons?

@quickcodingtuts Жыл бұрын

Of course

@nawatitiumesh6546 Жыл бұрын

First dropdown works fine but 2nd is not working? how to fix that ?

@quickcodingtuts Жыл бұрын

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.

@aricwilliamsdeveloper 2 жыл бұрын

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

@quickcodingtuts 2 жыл бұрын

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

@mehemmednezerli38 Жыл бұрын

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 :)

@quickcodingtuts Жыл бұрын

I have this exact project built with React. You can find it on my channel.

@mehemmednezerli38 Жыл бұрын

@@quickcodingtuts can you pls share the link to the comment?

@mehemmednezerli38 Жыл бұрын

@@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?

@quickcodingtuts Жыл бұрын

You can insert them like any other image, with the img tag.

@mehemmednezerli38 Жыл бұрын

@@quickcodingtuts but how?const dropdownList = options.map((option,i) => , {option} ) like this?

@yuanfanglu Жыл бұрын

I only have the first dropdown works. 😪 The console shows error: "Uncaught TypeError: options.forEach is not a function". Any advice?

@billng1527 Жыл бұрын

please help ^^ I have the same error as well

@quickcodingtuts Жыл бұрын

When you created the options variable, did you use querySelectorAll?

@billng1527 Жыл бұрын

const options = dropdown.querySelectorAll('.menu li'); Make sure its querySelectorAll and not just querySelector

@yuanfanglu Жыл бұрын

@@quickcodingtuts yes, I followed your code strictly

@silentt2143 Жыл бұрын

@@billng1527thanks!

@thomasluk4319 Жыл бұрын

I followed the step, but the dropdown doesnt showup when I click it.... what will be the issue?

@quickcodingtuts Жыл бұрын

Can't know for sure. Can be a lot of things. Any errors in the console?

@thomasluk4319 Жыл бұрын

@@quickcodingtuts where should I put the log for debugging? thx

@thomasluk4319 Жыл бұрын

Is all the source code mentioned in the video? I have watched 3 times to ensure there was no typo.

@quickcodingtuts Жыл бұрын

@@thomasluk4319 Of course. The final result is made from the code in the video

@thomasluk4319 Жыл бұрын

@@quickcodingtuts Then I really dont know why... I will try this for a complete new project and double check it again

@s1nk428 Жыл бұрын

It doesn't work, I did 1 in 1 as in the video, but nothing happened, the dropdown does not appear

@quickcodingtuts Жыл бұрын

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?

@AllinOneBox8 2 жыл бұрын

How to add scroll bar inside

@quickcodingtuts 2 жыл бұрын

Add a fixed height for the menu and add overflow: scroll;

@AllinOneBox8 2 жыл бұрын

@@quickcodingtuts ❤️ thank you it's working

@user-zf9yk3rk6o 11 ай бұрын

i am getting errors...

@sakhianwari9168 Жыл бұрын

is it possible to add a database form mysql workbench to this dropdown menu and use it as a filter?

@quickcodingtuts Жыл бұрын

Don't see a reason why it wouldn't. You can just switch the static data with whatever else you need.

@bekirovtimurlan8446 Жыл бұрын

Doesn’t work. Skip the source code

@anagomes9877 Жыл бұрын

I subscribed but can't find the source code for this one. can you please send me a link?

@quickcodingtuts Жыл бұрын

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.

@arshiyanshaikh4878 Жыл бұрын

@@quickcodingtuts can you send it to me also??

@quickcodingtuts Жыл бұрын

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?

@irvanaryrenaldi2361 Жыл бұрын

how to calling javascript ?

@Saki4Now Жыл бұрын

in your html file

@user-gw4xs1gw5l Жыл бұрын

👍👍

@gregospeak2670 Жыл бұрын

Let the github, please brather ?

@user-wt2mk3ex1w 4 ай бұрын

Nice dropdown but not working.Could you please help me to figure it out .

@quickcodingtuts 4 ай бұрын

Sure. What kind of problem are you facing?

@user-wt2mk3ex1w 4 ай бұрын

Thank you so much .I have resolved the issue.

@user-wt2mk3ex1w 4 ай бұрын

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

@quickcodingtuts 4 ай бұрын

You can use Local storage for that.

@user-wt2mk3ex1w 4 ай бұрын

@daniyamary5862 Жыл бұрын

hii i need help

@quickcodingtuts Жыл бұрын

What seems to be the issue?

@daniyamary5862 Жыл бұрын

@@quickcodingtuts its all good but i want to be able to filter them out accordingly to the menu. could you give me some help?

@quickcodingtuts Жыл бұрын

@@daniyamary5862 I have a JS filter tutorial. Its one of my newer videos. You can use it to apply the same methods here.

@daniyamary5862 Жыл бұрын

@@quickcodingtuts okie thank youu!!

@isseifalcon4044 Жыл бұрын

song: kzfaq.info/get/bejne/kJeBnMJzl6mdl3k.html

@TheNormMan 4 ай бұрын

Is it really that complicated? If yes i hate html and css

@quickcodingtuts 4 ай бұрын

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.

@buntyagarwal7717 7 ай бұрын

Its not working

@quickcodingtuts 7 ай бұрын

No way for me to help you with just " its not working"

@jabeztadesse 3 ай бұрын

Exactly@@quickcodingtuts

@dey2302 Жыл бұрын

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

@quickcodingtuts Жыл бұрын

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.

@_just_mcs_ Жыл бұрын

Aint working bro, checked multiple times

@quickcodingtuts Жыл бұрын

Have you checked the console for errors. Linked booth the stylesheet and script into your HTML?

@_just_mcs_ Жыл бұрын

@@quickcodingtuts yes ivevcgecked multiple times, it says that the there is error where it says "addEventListener" even tho there aint nothin wrong

@quickcodingtuts Жыл бұрын

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.