How to Create Transparent Drop Down Navigation Menu with CSS and HTML Tutorial

hey guys what's going on it's clever tikki and in this video we're going to learn how to create a transparent navigation menu with CSS and HTML that's going to look like this let's go ahead and get started right away so I'll create a new folder and inside this folder I have this nature that jpg file that you just saw you guys can use any background you want otherwise you can download this file in the description of this video I'm going to create two new files here index dot HTML as well as style dot CSS and then I'm going to open these two files in the text editor of my choice which is NetBeans ok so now we're ready to create our navigation menu so for the HTML I'm going to use the HTML opening closing tags right away and then I'm going to include the style sheet right away as well using a link tag with href attribute and I'm going to provide the path where the style is located then we're going to say Arel which is another attribute and I'm going to say style sheet because we're including a style sheet okay so this navigation bar is going to consist of a bunch of ul and Li tags which is which means unordered list and list items so here's what we're going to be creating now let's create the first unordered list and this another list is going to be our main menu so when I have stuff like home about things to do contact and let's actually add another one here called news so this is going to be our main menu let's see what this looks like right now by opening it inside the browser so you can see that this is just a unordered list pure in NP or HTML right now so there's not no menu at this point and we're going to add the style we're going to add the all the style inside our style CSS but for but first let's go ahead and add all the submenu items as well so comb is not going to have any submenu items because it's just a home link but the about list item is going to have other sub menus so inside this Li tag we want to add another want to add another unordered list so let's go ahead and do that now and it just okay so for this 100 list I want to have stuff like our team campsites condition and vision so you can just put whatever you want for these doesn't really matter I just want to show you guys that this is inside this li about tag by doing these tabs here okay so you can see that these this li we're still inside the LI about so that UL was putting inside of this li a list item because it's going to have all this sub elements and if i view this in a browser save it first if i view this in a browser you can see how these list items are in fact on their knees about so those are going to be our sub menu items okay so let's do the same thing for things to do make sure you're inside the Li tag I'm just going to copy all of these here and then I'm going to replace those with some other menus menu text activity sparks shops fix that one right there shops and events and let's go ahead and add more to contact make sure we inside the list item copy some of those tags were already created and I'm just going to have two for the contact so map and directions okay let's see what it looks like so far and as you can see this is our complete navigation bar with submenus without all the styling so all the HTML content is ready now we're going to write all the CSS for it okay so this is our HTML code let's start working on CSS okay so let's apply the background image first because it's just going to look at make it look pretty right away I'm using nature jpg put a row repeat on it and for the background size I'm going to put cover which is going to adjust it to the image screen and it's going to cover the whole it's going to cover the whole background of our web browser and for a font family right away I'm going to say font-family:arial let's see what it looks like okay you can see that it added the background image and it changed the font the font family or font whatever font and just change the font okay next up let's make sure our unordered list doesn't have any margins or padding by setting it to zero and also put the list style to none because we don't want to have any kind of a bullets under our listening so you can see that it removed all those bullets and then remove the tab in and everything else okay let's go back here okay so the unordered list list item so these are going to be the main items that is going to apply it it's going to apply the style to all the list items off this UL tag so under here we first of all we want to make sure that our text flows to the left so that's going to align all the text to the left watch this view it in a browser now all the text is aligned to the left and let's specify all the other elements to format this okay let's see what it looks like now okay just so we can see what's going on so far let's go ahead and set the color to white okay so you can see how our menu is style right now so these are all of our main menu items at the top like home about things to do contacts and use and all the other sub menus are underneath so that's that's what we did here float:left we set the width to 200 set the high to 400 pixels and we set the background to black now let's set the opacity to 0.8 and this is what's going to make our menu navigation menu transparent so you can see what it did there it made it transparent okay so what else do we want to do let's set some other elements okay so let's go ahead and set the line height to 40 to Center the text vertically and we're also going to Center the text horizontally by by specifying aligned text align Center and let's set the font size still a little bit bigger okay so now that we have our main menu style let's go ahead and apply some of styles on the on the actual menu link so the menu link is going to be URL Li a right away we want to set text decoration to none because we don't want to have any kind of a underline or anything like that on our main menu links set the color to white and display it as block okay so the next element is going to be our UL li a:hover and this one is going to be where when the user hovers the mouse over our menu so we want to set the color to green okay let's see what happens so this is what we have so far we have all of our elements and when we hover the mouse over its covering the whole block and all the elements are transparent so now we want to do is we want to hide the sub menus and we want we only want to display them when we hover the mouse over the main menu and in order to do that we're going to apply the following we're just going to apply display:none to that element so we're going to say UL li UL li and display none and the reason we're doing this UL li UL li is because those submenu elements are inside UL li UL li so this is how the css3 structure works and in order to get to it this is what we have to type yes that UL li UL li and in HTML UL li UL li and that's how you get to it okay so we said display none and now they're going to be hidden so now they're hidden and now all we have to do is make sure that we're showing them when the mouse is over and again we're going to use ul Li and thence a:hover pol Li display:block so here is what we're doing is we're applying the hover to the list which is previous to that which is the main menu and we we are targeting the hover which is the mouse over element and then we're saying we want to display the list that is within that main list and say display equals block so that's exactly what's going to happen and now we have our transparent navigation menu and everything is working if you guys want to apply some margin here you can easily do so you can just say margin right equals two pixels and then it's going to break the it's going to break down the menu in these little block elements if you prefer your many to look like that okay that's how we create our transparent drop down navigation menu with CSS and HTML if you guys like this video please like share and subscribe and I'll see you next time clever take you out

Channel: Clever Techie

Views: 1,585,346

Keywords: transparent navigation css, transparent menu in html, transparent menu in css and html, html and css dropdown menu, navigation menu css examples, navigation menu css, css navigation, navigation css, css navigation menu, css drop down navigation, css navigation drop down menu, drop down navigation menu css, css menu navigation, css navigation drop down, css navigation menu drop down, navigation menus css, navigation menu css code

Id: 8x1mO1d6-4w

Length: 12min 1sec (721 seconds)

Published: Fri Mar 03 2017