How to Create an HTML Dropdown Menu | Learn HTML and CSS | HTML Tutorial | HTML for Beginners

today we're going to learn how to create a drop-down menu inside a website that you guys can see in front of me here have a very basic website but nothing special inside of it except for navigation at the top here so today we're going to learn how to create this drop-down effect when we do actually hover our cursor on top of a menu item now the way we're going to accomplish this is only using HTML and CSS so not going to use JavaScript or jQuery just HTML and CSS so what we're going to do to start with is I do like to have a couple images inside my website if you guys want to use the images you don't have to you can go ahead and download them inside the description of this video the images I'm talking about is the background image I have here and the arrow that I'm using right next to my drop down menu so if you guys want to have some kind of indicator that this is a drop down then I recommend you guys do some kind of icon that shows this is a drop down now the first thing we're going to do is we're going to go ahead and go inside our text editor and inside the text editor we're going to go and open up a new document I'm going to go ahead and save it inside a root folder which I have right here as you guys can see I do actually have an image folder in here with the two images in it now I'm going to go ahead and save this file as index dot HTML then after doing this I'm going to open up a new document I'm going to save this one as style dot CSS so now we have a style sheet and we have an index page that has the navigation inside of it so what I'm going to do here is I'm going to go back inside my index.html file I'm going to go ahead and open up all the basic HTML tags that we need to have inside a website I'm just going to consume in for you guys there we go now the first thing we need to include inside this file is a link to the style sheet now we will actually be styling the navigation in this episode because we need to have CSS included if you want to have this drop down effects so underneath my title tag inside my head tag I'm going to go and create a link to the style sheet now you guys should know how to do this by now so I'm just going to go ahead and include it really quickly here style at CSS like so and then inside the body tag I'm going to go and create or navigation so the first thing we need to have is the actual navigation or the container for the navigation so I'm going to say we have a html5 nav tag and inside this nav tag we have an unordered list because we need to have the navigation inside something so the way we do that is by creating an unordered list inside the unordered list we're going to go and create a list item inside the list item we're going to go and create a link now when it comes to dropdowns inside a website we need to make sure the link inside the drop-down only has a hash tag inside the hyper reference so if I were to say this one is going to be the drop-down menu then we're going to go and say we have a hash tag because when we do this if the user which actually click on the menu then we don't get any kind of errors when we do actually get taken to whatever menu they clicked on so we need to make sure we have a hash tag inside the hyper reference so I'm going to go to copy this a couple of times and paste it in like so let's say we have four links inside the navigation I'm going to go and call the first one home the second one is going to be portfolio let's say I'm actually making a portfolio website the third one is going to be about me and the last one is going to be contact again we don't actually need these I'm just including them because we need to have some kind of navigation so I can actually show you guys the full effect of the drop-down so after including this we can go ahead and include some kind of logo perhaps right before the navigation again I want to do something that looks kind of like this one the example I showed you guys and I did actually include a website name right before the navigation so I'm going to go and include that as well here again you don't have to actually make this drop-down I just want to make sure it looks nice so right before I on the list I'm going to save that P tag and we have something like P travels like the one I showed you guys inside the web site this is something I just made up and what we're going to go and do here is we're going to go ahead and from now on focus on creating the drop-down so the way we accomplish a drop-down is by going inside the menu item one of these down here that we want to have a drop-down in and right before we close off the list item after the anchor tag I'm going to go to move down to the next line then inside the list I'm going to go ahead and create another unordered list now some people will tell you that you can also do this using div tags or a button tag or something else inside HTML I'm going to go and use an unordered list to accomplish this drop-down so I'm going to go and say we have another unordered list move it down make sure we have some kind of hierarchy so I'm just going to move it out so it looks nice and inside this unordered list I'm going to go and create another anchor tag so now that we have this I can actually go ahead and say we need to have some text inside the first link here so I'm going to go and say we have digital art perhaps I'm just going to go ahead and copy this a couple of times maybe two more times and so the second one is going to be video production and the third one could be web development like so so not only have this we can actually go ahead and just fill out the hyper references with hashtags again the menus that you do actually want to link somewhere you need to actually include a link to so for example the home link up in the top I'm going to go ahead and say index dot HTML because it needs to take us to the front page but you need to make sure the one that you do actually include the drop-down in like the one in portfolio you do need to include a hash tag okay all the other ones down here you don't need to include hash tags because you need to link somewhere inside the website okay so not only have this we can actually go ahead and style our navigation let's actually go and check it out first I'm going to go ahead and say we have the index page I'm going to open it up inside my Google Chrome browser and as you guys can see now we have a very basic website that may actually zoom in for you guys you can see it now what you guys will notice is that we do get the drop down but it doesn't hide you know because we haven't actually hovered on it so we need to make sure that we can't see the drop down if we're not hovered inside the link that should actually show it so we need to do that using CSS so inside my stylesheet I'm going to go ahead and just do a couple of styling see I'm going to say we have well first one to get rid of the default margins inside the website so I'm going to say margin and set it to zero I'm going to remove the padding inside the website I'm going to say zero here as well and then inside the body tag I'm going to go ahead and link to the background image I include it inside the lesson files so I'm going to say body like so we're going to save background image we're going to link to an image inside my image folder forward slash and then it's called BG dot JPEG like so so now if we go inside the website you guys to notice that we do get an image but it's way too big so Mexico and zoom out to hundred percent so we need to make sure the image actually fits inside the website so I'm just going to go ahead and give this one a background size like so I'm going to call it cover save it and then you guys can see now we'll get something looks a lot nicer so now we need to style the actual navigation up here in the top of the website so inside my stylesheet I'm going to go ahead and go underneath the body tag and I'm going to go and say we're going to style the nav tag I'm going to give the navigation a width as 100% I'm going to give it a height as sixty pixels and a background color as white just to give you some kind of color like so and what you guys will notice is that now we get a white navigation so now we need to style the content inside the navigation the first one I'm going to style is the website name so I'm going to go and say we have a nav tag and inside the nav tag we have a paragraph tag I'm going to go ahead and say we have a font family set to Arial just have some kind of font and we're going to set a color to has tag two to two then we're going to go and set a font desk size to 22 pixels we could actually say 24 pixels if you wanted to that might be better and I'm going to go ahead and set a line height to 55 pixels like so it's actually going to check it out like so and now we're going to go to set a float:left because we need to make sure the the actual name of the website goes to the left side of the navigation so inside my stylesheet we're going to say float:left and now we can start styling the actual navigation so inside my nav tag we're going to go ahead and say we have a unordered list which right now should be floating left because we need to have it floating on the right side of the website name so we need to say float left then afterwards we need to style inside the navigation inside gone or at least inside the list item now I'm going to go and set this one to a float:left as well because we need to have them next to each other and I'm going to go and say they have a list style set to none just to make sure we have no bullet points after the list items so we're going to refresh and as you guys can see now they're going next to each other I can access zoom in figures you can actually see it there we go now before we start styling the text inside the navigation I want to create some padding or some distance between the website name over here on the left side and the right side to get some distance from the navigation so inside my stylesheet we're going to go up to the paragraph and I'm going to go ahead and say we have a padding going zero pixels from the top and bottom and 20 pixels from left and right just to get some distance so for which refresh you guys can see we now get some distance so now that we did this we can actually start styling the text inside the navigation so inside my stylesheet I'm going to go ahead and go down to the bottom here and I'm going to go ahead and say we have a navigation and inside of it we have a honored list which inside we have a list item and inside the list item we have a angar tag so this is the one I'm going to use when we want to style text inside the navigation I'm going to say we have a well we could actually go and copy what we have inside the paragraph egg here like so paste it in now I want to get rid of the line hide as well because it don't actually need it and instead we're going to say padding we're going to set it to I'm guessing 24 pixels to the top and bottom and 14 pixels to left and right that's actually going to include a display block and let's ecstasy out looks like so now looks something like this we need to actually change the font size because you know having it the same as the website name doesn't make sense so let's actually go and change it back down to maybe 14 pixels and see how it looks like there we go now I can see that the padding is a bit too much because when I do actually hover my mouse cursor it activates a link after the navigation bar so we need to actually decrease that amount to maybe 21 pixels refresh and as you guys can see that was a bit too much so maybe we should say 22 and there we have it so now we activate the navigation right before the navigation stops the last thing I want to do about the text is I want to get rid of the text decoration which is the underline that's under the text so I'm going to go ahead and go back inside my stylesheet and inside my anchor tag I'm going to say text - decoration none so now that we have this we can actually go ahead and start styling to drop down because right now as you guys can see we have one two three drop down items and because we have these items the rest of the navigation gets pushed over to the right side so we have a huge amount of spacing in between them which we don't want to do so what I'm going to do here is to get this effect that that allow for the navigation to ignore the drop down until it's actually activated we need to go inside the list item so the first thing we're going to do is we're going to go ahead and say we have a precision set to relative which allow for us to add a position:absolute inside the sub items inside the navigation because if we don't have this position relative then we can activate the absolute later so we need to have it inside of it so now that we had this one we can actually go ahead and style the drop down by saying we have the same path here I'm just going to going to copy it and inside not the anchor tag but inside the list item we have a unordered list and inside the styling we're going to go ahead and keep display:block and just remove everything else inside the styling like so now what you guys will notice is that when I do actually include position:absolute we don't get this weird spacing in between the menu items so I want to refresh you guys can see that now it's actually dropped downwards so the next thing we need to do is actually include some kind of styling to the actual drop down so the way we do that is by going back inside our stylesheet and saying well we want to give this unordered list some kind of background color so I'm going to go and say we have a background color set to white now if I were to go back inside my browser so you guys can now see that we have a white background instead of a transparent one the next thing we need to do before we can actually include the hover effect is to decrease the spacing in between the menu items as well as make sure we don't get the text and two lines so as you guys can see right now the video production and the web development has two words inside of it which makes it jump down to next line so we need to get rid of that so inside my stylesheet I'm going to go ahead and copy the last dahling with it and just paste it underneath it like so and then I'm going to say we have a list item inside donut list and we have a anchor tag so we're basically just going to restyle the anchor tag inside the dropdown I'm just going to go ahead and delete what we have here and instead we're going to go up and see we have a padding right now as 22 pixels from top and bottom and 14 pixels from less than right so I'm going to copy it paste it in and change it so we don't have 22 pixels from top and bottom but instead perhaps 12 pixels I'm going to go ahead and refresh the browser and as you guys can see now we have less spacing we might need some more spacing those I'm just going to go into we have not twelve but perhaps eight the next thing I want to do is also want to include the hover effect so we can actually see when we do actually hover the cursor inside these drop-down items so I'm just going to go ahead and copy what we had here paste it down say we have a hover effect by including the colon hover and then inside of here I'm going to go and say we have a background color set to has tagged f3f3f3 just to give you some kind of light gray color so if we go back inside my website refresh you guys can see that now we do actually get this color here now we have a couple of issues though because right now I need to decide if I want the gray background color will this actually change it to something else because you guys can't really see it like so I need to decide if I want the background color to go all the way from left to the right side of the drop-down or if I want some kind of padding on the sides of this drop down here so I'm going to go and include that because I want to have it inside my navigation here so inside my code I'm going to go and go up to my unordered list which is to drop down menu that we actually get when we hover the cursor and I want to say we have a padding I want to save every padding as 10 pixels meaning that we get 10 pixels from top bottom left and right inside the drop-down so if i refresh you guys consider want to actually hover we get some spacing between the walls the navigation drop-down we could also change this to something else because right now 10 pixels might be quite a lot so you guys can decide that for yourself now the next thing we need to fix is to make sure the words doesn't go on to lines because we want to have one line that fits all the words inside of it now just really quickly want to change it so we don't have a red background color but instead have this light gray color again so I'm just going to say f3f3f3 there we go and now we need to make sure we can actually fit the text so we want to make sure we style not the anchor tag but the list item inside the drop-down and in here we want to say that we have a width set to some kind of pixels I could actually say 180 pixels just to make sure it can actually contain in all the menu items texts so I'm going to save it refresh the browser and you guys conceded now we get a different width and we can actually fit all the text inside the drop-down so it looks a lot nicer now the last thing I want to do about the styling before we activate the hover effect that allow for us to actually get the drop-down is to make sure we have some rounded corners around the drop-down so let's actually go ahead and go back down inside the list item and say we have a boarder - radius set to 4 pixels like so I'm going to copy it and paste it inside the honored list we have here but instead of 4 pixels everywhere because if we were to just show you guys an extreme example here you guys can see you also get rounded corners at the top and we don't want to have that so they'll go back inside the styling say we have 4 instead of 10 just to give you guys an extreme example I'm going to go ahead and copy paste is 3 more times so we do actually get one for each corner that we can style so I'm going to take the first two ones change to zero and now if I go back you guys can see that the top two corners don't have this border radius inside of it but the bottom ones do actually have it now the last thing we need to do is include to hover effect inside the drop-down so right now as you guys considered drop-down is constantly showing we don't want to have that we want to actually hover the cursor inside portfolio and then it drops down and we do that by giving our unordered list you know the actual drop-down a display set to none then I want to say well women to actually hover on top of this menu item we have inside the navigation then we get a display block so underneath the styling I'm just going to go and copy everything from the unordered list and set the display to block then I want to delete everything else inside the styling like so and now I want to say well we need to actually activate the styling when we do hover inside the list item so I'm going to go ahead and delete the last on our list path and say we have colon hover space and then I want to say well women to actually hover inside the list item then I want to activate not the list item hover effect but unordered list inside dis dis title I'm going to go and save this refresh and as you guys can see now we do get this drop down inside the navigation so this is how we can create a very basic drop down menu inside HTML and CSS without using JavaScript or jQuery hope you guys enjoyed and I'll see you guys next time

Channel: Dani Krossing

Views: 450,692

Rating: 4.8880072 out of 5

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

Length: 20min 23sec (1223 seconds)

Published: Tue Apr 04 2017