How to Code a Sliding Dropdown Button using Javascript, HTML, and CSS

how's it going everyone hope you guys are having a great day welcome back to another web dev junkie video so if you're new to programming or new to javascript i think building out smaller components is a great way to learn javascript and how to manipulate the dom and just do simple stuff so in this video it's kind of important to know how to build something like a drop down and i'm going to show you how to do that with just a little bit of javascript and a little bit of html and then of course some styling to kind of give it that animation look so if you're interested in learning how to do this i definitely recommend you stick around and learn a few things all right so of course the first thing you probably want to do is make an index file right and i have a web server already kind of hosting this out so let's make an index file and then let's also you know verify it's working so i'll say drop down make sure stuff actually shows up all right and then secondly we want some type of javascript source so i'll say um we'll say call it script.js and we can go ahead and import that in our index file here so before the ending tag of the body i'm going to say script source is equal to script of js and then finally we probably want to import some styling so i'm going to say style.css go back to the index file and then i can say link of css to bring in that so the first steps of building like a drop down button is you probably want some type of wrapper so i'll make a div and call it i know drop down and inside of that drop down we can make a button that says i don't know uh actions i guess and there you have it you have some actions here and when you click it it doesn't do anything but the main idea is we want to have some type of hidden dom element underneath the actions button that you can kind of hide and show so inside of this drop down class let's make another div we give it a class of drop down and i'm gonna use bem here so i'm gonna say drop down underscore menu and then we could just put some links here so i'll just do like i don't know save edit and delete all right so that will make some links show up but notice the issue is that they're all like in the same line horizontally one way you can kind of fix this is we could do some styling so let's just go ahead and target the drop down menu so i will say class inside the style sheet i say drop down menu but what we actually want to do is we want to style those a tags and make them be horizontal so one way you can do is just give it a display a block at least i thought that's how you do it yep okay so make sure you have your chrome debugger open and your cache disabled so that when you refresh the page you can actually see your changes so let's just kind of um i don't know what you guys want to focus on next let's try to actually add some spacing and make this drop-down menu look a little bit better so i'm going to style the drop down menu so make a new class here and we can give this like a border of one pixel solid and we'll make it like it's like a light gray if that'll show up that might have two periods so make sure you don't do that all right and then secondly you see how this is like full width of the screen we don't want that we want to give it like an actual fixed width of let's take 200 pixels for now see how that looks that's a little bit too big i'll try 120. all right so we have some basic styling it doesn't look that great um let's move on to the button let's give this another bim class of like drop down uh button so we can kind of style that going here let's style the drop down button and i'm gonna give it like a background color of some type of blue i'll just give it blue for right now and see what happens uh that's way too that's way too you know let's just steal the colors i'm gonna go to coolers i think that's a cool sight you can grab some colors from and some generate some colors here okay why are there so many pop-ups just to get a button so as i press the space bar it's going to kind of generate different buttons this one looks pretty good uh i know i did blue in the beginning of this but whatever try this green that's cool let's do a color of white okay maybe we should keep the black anyway so we got a drop down button let's get rid of the border so border none and then we can also like add some padding to it and probably give it some width as well so 120 pixels does that look like a button i don't know if that even looks like a button might be too much padding so i'm gonna reduce the padding a little bit and then i'm gonna go ahead and round the borders so border radius of 10 pixels and see how that looks that looks okay cursor is a pointer all right so as you can tell i don't i don't really memorize the styles or anything i'm just trying to play around with it but the main purpose of what we're trying to do is how do you make that drop down menu kind of hide and show right so if i go back to my index file we have drop down menu here and we probably want to add a class hide to it just so that when the page loads it's hidden and inside of this we could probably add a helper utility class called hide and just say display of none so now when the page loads it's the drop down is gone right so at this point you kind of have to ask yourself okay how do i make this so that when the user clicks on it it removes that hidden class from my dom element over here so what we can do is find the class for what we want to add an event listener to so drop down button builder script tag and i can first grab that dom element so like the const drop down button i guess is document.query selector and grab the class of drop down button and then we can add like an event listener to it so i can say drop down button.add event listener if someone clicks it we're going to call a function right in the function what it needs to do is it needs to basically grab the drop down menu and remove the hide so get drop down menu remove hide class so i'm just going to go ahead and grab the drop down menu here just to kind of save some computation but it doesn't really matter where you put it because we're just grabbing one element so it's not going to take too much work so drop down menu make sure i do the tumble underscores let me try that right drop down you drop down yeah make sure i do double underscores now let me just look this up bem make sure i'm doing this right so you guys don't make fun of me sometimes people online can be brutal yeah you just block two underscores an element and then you can do like a modifier with the hyphen hyphen so i think i'm doing it right let's go back and i'm kind of jumping all over the place so i hope that doesn't confuse you but again we are trying to grab let me make sure you can see this code here we are trying to grab the drop down menu and we want to remove the class from it so one way you can do that in javascript i can say class list dot remove and i can say remove hide okay so this let me see if this works and that does you see that it showed up and now we have an issue where if you keep clicking the button at some point you should make it go away right you should hide it again so instead of saying remove hide i can say toggle hide which is a cool little helper and you can see that it's kind of opening and closing now what do you want to work on next i think in the example i showed you before there's like a carrot here what you can do is you go to cdn js and you want to get font awesome okay so let's go to font awesome and we're going to click on this link go to our index file and i'm going to bring it in so i can just type link css and bring in fun awesome here and now we should have the ability to kind of style that button with an icon so it's really easy to start using fun awesome icons you just basically you can do like an i tag and give it a class of fa for fun awesome and then the what you want so i can say fa carrot right i think it is let's see if that works yep so there you have it you have a little button with a little arrow the arrow could probably be positioned a little bit better and i'm in here let's just go ahead and give this a font family of sans serif just in case all right so now you have a drop down that's toggling and hiding is showing so we could just do some more styling here so what i could do is just add some padding to the left of the buttons um so like i said padding and then for top and bottom we'll do four pixels then left and right we'll say 10 pixels and see how that looks looks pretty good i'm going to actually remove the hide class here just for right now so we can just make more progress styling it and as a side note i mean definitely enable live reload when you're doing stuff like this so i don't keep going over here and refreshing the page uh i just i'm too lazy to set it up all right so this looks pretty good i am zoomed in a lot so that's why it looks so wonky but i'm zoomed in so you guys can see it if you're watching on your like cell phone or something so yeah we could just make the font size a little bit smaller because i think the buns okay that's too big let's do 16. it looks pretty good um let's get rid of the underline so i can say text decoration of none and then we can say color of like a gray okay and then as we hover over the rows we could probably add like a hover event so i'll say when we hover over a link we can change the background to let's just try ee and see how that looks cool so it looks uh pretty good at least i think so you may not think so but all right so one thing you'll notice is that as you're clicking on the links you would think that the drop down should kind of go away right so we kind of need to add yet another event listener i believe to the links if you click them or what you could do is basically add an event listener to the window and if you ever click off of the button you could just hide the drop down so let's try doing that i can say window.add event listener you click on anywhere in the window we could simply um hide by simply adding the hide function here let's see if this works so now we have an issue where i think it's working but as you click the button it's gonna fire this and then um do this so one quick fix you could do i think you could like let me make sure i'm doing this right i think it's e.target to figure out what you've actually clicked and hopefully my head's not hiding that but i'll bring it up so if you click it notice that it prints out the actual button that we clicked on well not necessarily if you click on the carrot it's going to print out the carrot but there's probably some workarounds to not make it hide unless you've clicked on the button so i could say if e dot target was equal to the drop down button then we don't want to hide it okay so let's try that or maybe i have it backwards we go so if the target is not equal to the button that's when we need to hide the menu so if you click on this uh the only issue with this is i think if i click on the carrot it's not gonna do what it needs to do so i don't know if i need to add like yet another listener or maybe there's a a better way to do that um if anyone knows let me know i mean i'm sure there's a faster way to check the parent if they have a common ancestor then we probably don't want to hide it but anyway that's good enough this is just a learning experience for you all if you wanted to learn a little bit more about drop downs all right so let's actually change the hrefs to go to something so i'm going to say like down save pound edit and delete and verify that when i click on them it actually changes the url so that's cool that's working um [Music] let me lowercase these that look pretty good now they look better uppercase as you can tell i did not do any practice really for this little tutorial uh one thing i wanted to change though is what did i want to change all right so for the last thing i want to show you all is how do i actually make the like drop down slide out and slide back in so one way you could do it is by doing transitions like i said like transition all of 0.5 seconds and that'll basically allow any css that's changing to slowly transition to the new value and then down here for hide you know how we're like adding the height class and removing it from the button we could simply just make the probably the max height be zero here and maybe opacity could be like zero as well let's see if this actually does anything i think it's kind of working but not exactly how we want it i'm going to make it go a little bit faster so i'm going to say like 0.25 and then i'm also going to yeah it doesn't seem like it's sliding that well so let's try if we can do like a position of absolute this and see what happens uh maybe we also need to say like a max height of 100 pixels you know it's really hard to tell with the opacity so let's just give her the opacity here so it definitely is sliding you can see that sliding in and out but i think i need to say like overflow of hidden so that it actually hides the stuff okay there we go all right so that's one way to do it i'm gonna add back the opacity here again just because it makes it look a little nicer now again this isn't like the most elegant code if you wanted to like put multiple drop downs on the same page like this is not gonna work this is probably gonna break like you see here the second one doesn't work so there's probably not to be like a lot of work to get this working but the main takeaway was just kind of like learn how do you use javascript to manipulate the dom to do something like this then i'm also hoping that you learned a little bit about styling and like how to make something transition out and whatnot so yeah this tutorial was very uh ad hoc and all over the place but i hope you guys learned a little bit of something from it if you enjoyed watching this be sure to give me a thumbs up because it helps my channel grow and if you're new to this channel be sure to click that subscribe button because i'm going to be hosting random videos like this in the future that you can learn a lot about web development html css javascript fun and then uh yeah leave me a comment if you have a particular component or widget that you want to see me build i like to do these like live coding tutorials not um which is why i'm kind of jumping all over the place but yeah let me know all right thank you so much for watching all and have a great day happy coding

Channel: Web Dev Junkie

Views: 1,001

Keywords: web development, programming, coding, code, learn to code, tutorial, software engineering, javascript, html, css, dropdown, drop down, actions button, action drop down, sliding drop down, sliding menu, vanilla javascript, vanilla js, css animations, css transitions, css transition, how to, program, website, web components, common widgets

Id: XnpYMlcKKXQ

Length: 14min 45sec (885 seconds)

Published: Sat Feb 27 2021