How To Create a HTML Dropdown Menu | CSS Dropdown Tutorial

hello there friends how you doing today someone requested a drop down menu and I thought hey I've never done the drop down menu on my and my youtube series so hey I thought this was really simple so I was like yeah that's my type of code let's let's do a tutorial on this so if you don't know what I mean just like when you click on the button you're gonna see a drop down like this and then you get this hover effect and you have sub links here that you can click and even on this I don't have on the home because home should bring you home and yeah so we are gonna do it on the East too and yeah it's gonna be quite simple we don't need JavaScript we only need a bit of CSS magic and HTML HTML is just just boring so hey let's not waste time let's get into it I highly recommend you following with me cuz hey it's really simple and it's really fun so come on get your come on get your keyboard I'm watching you you ready okay let's go okay so here what we need to do is basically yeah just have an empty HTML as always in a style at CSS and I'm gonna keep this trend going forever and for some reason I don't have a body fat here salami let me close this up because we aren't gonna have some issues from the beginning yeah let's just nope nope like that okay there we go good all right so what I'm gonna do is I'm gonna just create a nav here so a nav tag and in this tag I'm gonna create a drop-down class so in here we're gonna have all the links with all the dropdowns simple as that here I'm gonna have the home so I'm gonna make all the things that you can click basically buttons okay then it's gonna open up with some anchor tags so I'm gonna create the button and then this button I'm gonna have an anchor tag that's gonna take us nowhere because we don't have a real website and this is just gonna be home good so we have the button here which is gonna be stand alone all around me are familiar faces and then we're gonna have a we're gonna create a class here and we're gonna name this I think we had I mean let me see you real quick I think we have projects and products correct so let's go projects like so and here we're basically gonna repeat what we have here but the extra thing that we're gonna need is a list right so here this one is standalone and in here we're gonna have another button and I believe I made it yeah just a simple button here and this is not gonna take an anchor tag because it's gonna open up the b-list so this is gonna be a project and here we are gonna have a ul which is basically on the contain lists of anchor tags so we're gonna create a lists with a lot of anchor tags and here for now this is just I'm gonna put hash tag here which basically means I stay on this page take me nowhere and in here I'm gonna give it no prop let's think about project names we filmed what we filmed the weather app which is actually doing really great so thank you for a for the support on that video yeah so we have weather app I'm gonna copy paste this for now multiple times like so and yeah we can also copy paste everything in here to make another one and the only difference is did I copy paste that correctly let's see drop down and we have the projects here yep this one good copy paste it down here and I'm just gonna rename this to products and we're gonna have products so what products do we offer well we do cloud cloud services we also do Bitcoin mining we also throw on YouTube and then we also film tutorials like so good nice okay so this is all we need in our HTML and all the magic is gonna happen in CSS so again no JavaScript really cool let's also open this up in server I need to yeah I need to close the other one close okay great let's open this one up and buy the bing bada boom Wow amazing so let's actually open the these side-by-side I think we're gonna do that so we are gonna get a better view click nice and we can actually close we're never gonna ever open the HTML tag again and the HTML document so screw you yeah okay so in here I added some basic styling let me make more space in here just remove the margins padding's all the good stuff that we usually do and then on the body I just added a height and a background color just so it doesn't look so bland and on the buttons and the anchor tags I just added this font yeah just this is just all basic styling to make everything nicer but yeah you can just ignore ignore everything up here okay yeah let's start so what we need to do is we need to take the nav because that's the drop-down I apologize so the big drop down in our HTML so we're gonna grab the drop down we're gonna add the height to this let's go 10 vh like so we cannot see this background white let's visualize this okay so I just add a bit of height to this and who the cool thing we can do is well let's say let's let's do something like this and I'll explain what I'm talking about so if we add display flex to this because I want these to come like this in row right and we can do justify content space around which is gonna add space around like so and then aligned items Center is going to Center it vertically good now these are not gonna Center vertically there you're being rude you're not nice to us just because we have a ton of items in here as you can see this works just because it's aligned alone it's just a button but these are are just gonna give us trouble okay so now what was I talking about I wanted to show you something cool and I forgot yeah so let's see our full screen like so like maybe I want these to be closer together so the cool thing you can also do I'm not sure if I'm gonna do it in here but hey if you want these to be closer you can just add a width of like 60% or something and these go closer but hey this is not centered anymore so you can add margin Auto and this is gonna Center everything like so so that's pretty cool that's something cool you can do let's go 80 I'm gonna make a bigger space here yeah that's good and I'm gonna remove the background good nice actually let's keep it a bit yeah good and now what we need to do is well centered these buttons here and just fix this ul that we created because it's just yeah hey it just doesn't work right now so what we can do is we can get the projects ul so this list and we can also get the products ul and here and we need the dot so let's do the Det perfect so what we need to do is well you're gonna add a position:absolute to this that's gonna remove it and look it's right there good now the problem is if we had I don't know bottom zero pixels well it's gonna go all the way down here and the reason why that happens is because it's relative to the document right now so we need to put it relative to to our project section here so what we can do is save products again and projects projects like so and what we can do is just add a position:relative so boom it's relative to that thing nice now we are going to remove the bottom zero like so and it just kind of works everything kind of works we can add a left zero pixels just to make sure it stuck right there but hey even that is maybe not necessary look everything just works though Hey okay let's actually okay now we can remove this one I'm gonna copy this one from here to here just so we can see what's happening and yeah let's let's make this UL a bit nicer let me position myself let's get ready here whoo sleeves up and good to go okay so first of all I want to bring this down a bit so I'm just gonna add a margin top of 10 pixels just slightly down there we go looks nice what we can also do is that just the a width to this I added a 200 yep that's good and let's also add a height I don't know 200 again so it's like a box good looks good perfect so now what we need to do is align these and to do that we are gonna do display flex again oh okay we are it flex but okay and we also can just position everything like we do up here so let's do justify content space around Hawaiian items center now the problem is this goes horizontally so we need to change the direction so likes Direction column and that's gonna put everything like so nice we did it in like four properties great we also can remove the dot because nobody likes to dot we can do that by come on tink it's only seven o'clock and my brain is dead drank coffee and Red Bull today list style there we go list i'll is gonna be none perfect now we kind of want to remove and i remember we have the allies these are the allies and their anchor tags inside of them so what we can do is basically do projects a and products a so select all the anchor tags inside these boxes and we can do color black and then we can to text-decoration:none okay we're gonna remove the underline there and yeah okay good let's also add a border radius to this let's go 5 pixels make it a bit rounder looks a bit I like it it's move I like smoothness in my life good let's see am I missing something well eventually I'm gonna remove the we're gonna make this so it's yeah it's disappeared and then it comes back but besides that let's let's move on and then we'll add the animations at the end let's just style the buttons a bit and for the buttons I'm just gonna remove everything here projects and it's gonna be well now let's oh we have buttons here everywhere so let's just do drop down drop down and I'm gonna do button so so yeah just all the buttons here and what we need to do let's add a background of none let's remove the background good we don't want border none' like so we're gonna add a color of white now the problem with this one as you can see this is not affected because we added an anchor tag in our button and here well let me take a look actually I don't even know what they did but what did I do okay it's just a button I don't know here okay so I added an anchor tag inside the button so that's why this is not being styled so hey let me just add a clasp of home to this and I'll select that as well so just slash home I promised myself I'm not gonna reopen my HTML and I did ah ok there we go it works now so I'm gonna remove the text decoration on this as well so none good let's increase the font size a bit let's go 18 pixels okay better and we can add a cursor:pointer cursor:hand and we have the this one which is always nice to see now if they had a bit of a visual flair you can also do drop drop down button you can add like a hover and then you can add a color of light gray or something lights migrate let's see yeah change it a bit a bit darker yeah so like a bit of a visual cue that you can click on it doesn't work on this I should have added that as well so just add like home hover on this too like so okay there we go just and also I guess for better UI because these don't look clickable you can search up a SVG on Google and just like a small triangle or something and you can place it next here next to here but I didn't want this to be super super long yeah just a small triangle to indicate that hey in fact this is a drop-down menu okay yeah let's let's move on so let's go up to our UL and I'm gonna now we need to also add so when we hover over all of these we need to add these small like like hey I'm hovering over something this Li and it needs to to change its color okay so the thing here it's a bit tricky but it is what it is so anywhere here let's go in this place I'm gonna say projects Li and products Li like so and look if I add a background let's get this color again I'm gonna copy it so if I add this background as you can see this is what we have and let's go a bit lighter on this something like so yeah that's ugly something like that yeah okay just way lighter good now the problem here is well I kind of wanna if we had I don't want this one we hover to look like this this looks kind of ugly so if we add a width of 100 and the height of 100 like this is good but it kind of messed up our styling in this and the reason why that happens is because we're styling the Li but remember we also have the tag inside so once we modified the Li tag here and either the height and width to this well the anchor tag is not centered anymore because hey look this is the Li now okay this this so to fix that if we had a height and a width to our Li we can just add display flex again justify content Center and a line item Center so we're just affecting the child inside and look we have everything back to normal so we can copy this out back and go down here and what we can do is we can add on hover so if we say projects Li on hover and also products Li on hover we can just add this background color so now when we hover over it look we have a nice visual cue okay and the only reason why we need to do add the height and the width again to all of this is because if we would have not done this this is what we get then okay because when we add justify content center a line item Center well the height and the width of the li is gonna be basically the size of our text inside of our Li so the size of the element so we are just making that bigger and then we just display flex justify content the anchor tags inside this list so again this is the list and we just modify this okay okay let's move on I want to get rid of this cuz it's bothering me let's go back to our projects ul to get rid of this opacity zero and pointer events none has remembered look these are still applicable here capacity not a zero this is gonna make it not visible but hey there is still there and we can click on them so high pointer events none what you gonna do now because you cannot click on anything and that's what we want perfect and also let's add a transition to this zero point four seconds ease and well what do we want animate I need to specify Oh 0.4 seconds yeah yes there we go and let's also move this a bit up so when we click it's gonna come down a bit so for that all we need to do is add a transform translate Y let's go 10 pixels just a slight slight movement so how do we make this without JavaScript you might ask well let me show you let's go all the way down here what we can do is we can select the projects button so this one and on focus which means if I click on it something's gonna happen then we can use the plus operator is it operator I'm not even sure I'm I know it's in JavaScript so I'm not sure if it's the same as CSS but we can get the UL here so what's happening here is I'm going over the projects button so let's look at projects button projects button here and if I add the plus symbol well what this basically means is hey when you focus on the button effect the element below it so in this case the element below the button is d UL so what we can do is just add styling to the UL when we focus on the button so hey what do we want in here well we want not not that we on the opacity to come back to one and the pointer events to come back to all let's see boom boom now this doesn't work so let's also do products button focus + UL let's take a look nice looking at I also forgot to transform translate why back to 0 let's see refresh quick and actually you know what it's the other way around we need - then not plus okay let's see boom boom again I like I don't know I've seen like 10,000 drop down effects and people make super complicated things like when you click the whole page transitions and Jesus comes and it's just a mess just keep it simple it's yeah just create like this and why do you need to do super crazy things on drop downs I will never understand but yeah you can just do it with some CSS and HTML so yeah this one is quite quite simple I hope you enjoyed this one hope it works if it doesn't work I will promise I will commit this on github or I'll post the code on code pen or something because I know a lot of you guys request that and I'm being super lazy and I'll try I'll try my best to post everything up so thank you again so much for watching hope hope you love this ad drop a subscribe we are getting close to 2,000 Dan that's crazy Wow I'm just I'm just amazed I'm surprised I guess see you later guys peace [Music]

Channel: Dev Ed

Views: 117,365

Keywords: how to create a dropdown menu, how to create a html dropdown menu, create a dropdown menu, create a website dropdown menu, create a dropdown menu in html, how to create a dropdown menu in html, html dropdown menu tutorial, how to create a drop down menu in html, how to create an html dropdown menu, html, css, html tutorial, create a website drop down menu, css tutorial, drop down menu, dropdown menu, dropdown menu tutorial, drop down menu tutorial, learn html, html menu

Id: o0YiZF9XZL0

Length: 21min 15sec (1275 seconds)

Published: Thu Feb 07 2019