Simple Dropdown Menu Using HTML & CSS - EASY TUTORIAL

what's going on guys congratulations on making it through another year we're actually in 2023 now which is crazy because I'm pretty sure I was just making a video coming to 2022 a couple months back so that doesn't add up but here we are regardless so anyway today we're gonna be hopping into this tutorial um we're going to be creating a well it's basically just a drop down menu uh a simple drop down menu and you can add it to the header or navigation bar of your particular website that you're working on um it's very simple it's there's not a lot to it just a very simple quick easy drop down menu that you can create and uh yeah Implement straight away so uh yeah if you guys uh you know want to stick around stick around and I'm going to walk you through the code uh we're going to start off with HTML and jump into the CSS and yeah all right so the first thing you're going to do is hop into vs code or your chosen IDE and create a folder called drop down menu or whatever you like back then you're also going to create a index.html file so this is where we're going to start the skeleton of our program is going to be laid out and I'm going to zoom it in here a little bit for you so you can see then we're going to use the shortcut shift one and it's going to create this little quick template and we're going to create a title and call it drop down menu tutorial so you can call it whatever you like you can call it my dad left me when I was young or you know pancakes are better than waffles whatever you like the most random it does not matter then we're also going to link our style sheet and create our style sheet as you can see I've created style.css and made sure it's in the same folder whilst also linking it in the top of our HTML file here make sure they're the same because if they are different type differently then yeah obviously this is not going to work out I'm also right now just adding a another link it is to the Google API Google fonts API and that's just going to allow us to import some Google fonts that we are going to be using in this particular program so then we're going to hop into the body and create a nav element inside that nav element we're going to create a unordered list element now for the first list item we're going to put an anchor tag inside and give it a href of just a normal hashtag because we're not actually linking that to any other page right now this is just for this tutorial you can change that later though link it to your home page and obviously uh yeah link uh create the label home for that anchor tag so we're basically going to be doing the same thing here except we're going to be adding our locations label onto this anchor tag and this particular list will be our drop down list so I'm going to create an unordered list underneath here and I'm going to give it a class of drop down that's going to come into use later in our CSS whilst also adding another list item underneath and I'm just going to give it a href of hashtag again and I'm going to um copy and paste this another three times so we're gonna have uh four in total in our drop down menu and these are just going to be different locations you can call them whatever you like I chose to do Germany Australia Switzerland Japan it really doesn't matter at this point it's just um for uh you know for the design for the look right now um and then we're also going to create another list element and we're going to put another anchor tag in and call it about us and underneath we're going to do the exact same thing and this time we're going to call it connect so that is literally it guys that is all you need to do for the HTML we uh that is completely done remember you can change up and switch up some things you know if you like it doesn't have to be exactly like mine I'm actually going to go down here and I'm going to start the live server in vs code right now so that's going to open us up in a new tab here and it's going to show us what we've got so far so as you can see it's literally just a white page no styling or anything and it's just got our list elements here and as you can see they're just yeah they just look like normal links so there's nothing crazy about it if I click them they're not going to go anywhere either because we haven't linked them to any other pages so now we want to actually make it look pretty so let's hop straight into our style.css folder so the first thing that you are going to want to do is import the font that you want so when you're over on Google fonts you can choose the specific font that you want and it'll give you this little import URL a bit of uh code and you'll be able to put that into the top of your CSS and depending on what font you choose it'll be different so if you just want to use the font that I'm using uh I'm pretty sure I'm just using pop-ins so yeah that's just a generic one that I use in a lot of my tutorials so feel free to copy this link exactly as it is and that is yeah pretty much the only font we're going to be using in this tutorial anyway so the first thing we're going to do is give our HTML a padding of xero and we're also going to give it a margin of zero this is very important we just want to take away any excess white space that there is at the start of our program um or our web app I should say and then we're going to give the font family and make sure it's spelled correctly as well it's Poppins with a double p and we're going to give it a backup font of mono space so so this is to make sure that you know if Poppins um our Poppins font that we got from our Google fonts API is uh not working it's going to give us a backup of the monospace font so that is actually quite a distinctive font um it will be able to tell the difference between that and the Poppins font if something isn't working then underneath we want to Target the unordered lists elements inside our HTML file and we're going to give them a list style of none and as well as that we are going to give a background of I'm using this specific color it's 8c5 2ff it's just a color that I use in all of my tutorials it's a very nice purple and uh yeah I like to keep my themes consistent so then we'll also be targeting the unorder list and list item elements together and we'll make sure we'll give them a display of inline block and a position of relative underneath we want to Target the unordered list list items and the anchor tags in our HTML file so we'll give them a display of block a padding of 20 pixels by 25 pixels so 20 pixels for left to right and 25 from top to bottom and we are going to make sure our color is white so that'll just make sure that our text over the top of our drop down menus and our navigation bar is uh you know easy to see and then we're also going to give them a text decoration of none and we're going to align that text in the center and give them a font size of 20 pixels so after you've done that you want to Target the unordered list items and the list items but you also want to Target the unknown unordered list section that has the class of drop down so and you also you want to Target the list items within that unordered list class as well so in order to do that make sure that you've copied it exactly the way I have written it here and we're just going to give it a display of block and then after that as well we are going to do basically the same thing um and we are going to give it a width of 100 percent and we're going to give it a uh background of I would say very yeah we'll probably use the same color and we'll use um 8c52ff again and then we'll give it a position of absolute and we'll also give it a z index of I'll do triple nine I don't want to use inherit for this one and after that I will give a display of none and so yeah that's that part done we're also going to Target the anchor tag inside the list items of the unordered list and we're going to give them um when when the mouse hovers over the top of them we're going to give it a background of similar to our hc5 2ff color that we added in there but I'm going to change it a little bit so it's going to be slightly different 630 E9 so that's just going to be a slight offset to the purple color that we've already added and it's just going to be able to show more cleanly when the mouse is hovering over the top of those particular items and after that you're going to want to Target the unordered list elements with the list items inside when the cursor hovers over them and you'll also want to specifically Target the unordered list with the class of drop down and give it a display of block so yeah that is basically it guys that's all our CSS complete as you can see here everything's working the way we like if I hover over these items in the drop down menu they have that little darker bit of purple there so it shows us you know which one the mouse is over at the moment you can change the colors and the names and stuff whatever to suit your website and uh yeah that's it guys literally just the HTML and the CSS no JavaScript today which is really refreshing for once because that language is a pain in my backside um if you guys like this tutorial make sure to uh you know give it a like give the cut give the video a like and uh comment down below what uh tutorial you would like to see next and while you're at it you might as well click that big subscribe button because it really helps me out uh it keeps me motivated and would be a nice little boost to my uh 2023 so yeah um again hope you guys have a lovely uh start to your year and I hope to see you soon in future videos

Channel: Devression

Views: 42,483

Keywords: simple dropdown menu html css, html css dropdown menu, html css dropdown menu onclick, html css dropdown menu animation, html css dropdown menu tutorial, dropdown menu html css, dropdown menu, html css tutorial, html css tutorial for beginners, html css website design tutorial, html css javascript, web development tutorial, html css website, html css navbar, html css projects, html css projects for beginners, html css beginner website, html css project tutorial, devression

Id: dmFC1e_CUAQ

Length: 9min 41sec (581 seconds)

Published: Fri Jan 13 2023