Responsive Navigation Menu Bar Tutorial with HTML5 and CSS3

hey guys what's going on is clever ticking and in the figure we're going to be creating a responsive navigation bar in CSS and HTML which is going to look like this and if i go to developer and click on responsive design mode this is what i mean is going to look like on the model devices and as you can see here at the top the show menu button has been showed up and i can click on it to show and hide the menu and the reason we want to include that is because space is limited on the model devices so we want to provide that extra functionality for our users if i reduce the screen size is going to collapse the menu automatically and I can keep reducing the screen size and it's going to look good on all the model devices and this is as responsive as a man you can get so let's go ahead and create the menu now so what i've done here is i've created two files indexed HTML and style that CSS and the reason I have these windows split like this is when we're going to be creating our styles i want to make sure you guys understand how is selecting all the HTML elements using are cascading style sheets which is the important part what goes inside the CSS selectors is pretty easy to understand and i'm going to just go over there really fast but i'm really going to explain how we're selecting all HTML elements ok so let's go ahead and type all HTML first first of all we want to make sure that we telling the browser we type in html5 by typing doctype HTML and then just typing up all of our basic HTML elements who can name this Frances navigation menu then we want to include the style right away by using a link tag that would relative style sheet and a trafficking style that CSS ok here is where we want to include the menin viewport tag and the meta main viewport is supposed to be included on all the web pages that are responsive and I'm a w3schools here and this is exactly what they say so just go ahead and copy this HTML and paste it into your index shtml or go ahead and type this line yourself and if you scroll down here in our webpage they show how the web page is going to look without the mana tag and what it's going to look like with amanda tag so just make sure you included on all the responsive web pages say you're designing ok so now that was down with that we're ready to create our menu go ahead and create the menu now so the main menu links is going to have five items so it's going to have Tom about this folio news and contact ok so those are all the main links under about we're going to have to drop down links so make sure you're within that list item element and then create two new look to new links under portfolio we want to have three links so I'm going to include both and you guys going to include as many links as you like of course i'm just using this as an example ok so all of our links are created also i'm going to specify what the main gonna tap this to make it look better and this is our main UL tag so i'm going to say ID equals menu for our main menu and for the drop-down links i'm going to call this glass hidden because these links are going to be hidden initially make sense to the mainland hidden okay next up above the menus where we want to create that show menu button and the show menu button is going to consist of the label and a checkbox so that's going to be our label for show menu classical show menu and then we want to type text which is again show menu close the label and then we're going to have a chat box input type equals checkbox ID equals show menu for articles button okay the reason we have a label and a checkbox is because using the label we're going to apply CSS style to make our label look pretty and whenever we click on this label since we use the for attribute and we have a checkbox which has an ID show menu which is the same as here clicking on the label is going to show the check box is gonna I'm sorry it's going to check the checkbox so our label is going to look like a button and we're going to hide the check box using the CSS that way it's going to appear like are like we have a button and we're going to show the menu by clicking on the label button so here's what we have so far and if i click on the label here you can see that it's checking it and I'm taking the checkbox later in CSS we're going to detect this check box property and we're going to show the menu and hide the menu when the checkbox is unchecked ok so that's it for the HTML now let me go ahead and expand the style here and now we're ready to create our style so so far i have the background image for the style and that step is optional ok so now we're going to go over all of our ul and my elements and apply styles that and so the first thing we want to do is strip the URL of adding and lists styling and we select our first date which is the main ul and i just wanna show you guys more of HTML ok so this is the main tag that was selecting ul and list with style type of bond is a non margin zero padding 0 and position absolute we also want to create a horizontal list with spacing for our list item elements so here is just Li so this is the LI they're selecting which like in all the Allies display inline block slow to the left-hand margin right 1px let's see what it looks like so far and so far it looks pretty messed up but now we're going to style our actual main menu links and it's going to look a lot better in order to style our main menu links we have to select that a element so na na element inside is inside the LI element so that's exactly how we selected li eight so Li and then a which is the link element inside of the list item and i'm just going to copy this whole CSS inside of it don't worry too much about I mean this is really easy to understand we're applying all kinds of styles to the list link element and refresh the page here here's what our list item links is going to look like if you if you guys want to play around with us he can go ahead and open the inspector tools and click on this icon here and you can roll the mouse over all these elements then click on one of them and here on the right-hand side it's going to show you all the CSS that we just applied to it so you can uncheck all these checkboxes and it's gonna remove the CSS that is applied to it so you can easily see an experiment with all these tags and see what every one of these properties due to the style of our HTML so these are all elements go ahead and play around with them to understand them better and decide inspector and web developer tools of the great way to understand what's going on with it CSS and HTML ok let's keep going here so we have created a style for the going to add a common so this is a style for menu links next up let's create a harbor state for the top level link so that's whenever we roll the mouse over our main length is going to change the background color so however state for top-level length and we select the harbor property by I'm England we select the mouse over property by using the harbor keyword and li Colin harbor and then the element so this is going to select the l.i.e mouse over and then we selecting the a link element which is inside the mouseover offer element ok so here we just want to change the background college another color 19 c 589 okay let's see what we've done ok so that's exactly what it's doing what we what we specified is changing the background color of the amounts over of the LI element ok let's apply a style for our job downlinks now styles for a job down the length and the way we select our job downlinks is first of all we got to make sure we're in the harbor when the mouse over off the main list item here and then we follow that by the UL li and a because because this is where the drop-down links are so we have a li mouse over which is hovered and then we'll have a UL li and a and that's exactly how we get to our job downlinks yeah that's exactly how we get to the drop-down links and here i'm also going to just copy and paste this code and that's it for the drop-down links now let's not let's also add the harbor state for the job down links so that they're also have their own background and color our slaves for a job down links so we we do the same thing as we did here but we have the harbor selector and then we just say the background he calls 19 c 589 which is the same background and color is white okay let's see what we got so far and here you can see that that's exactly what we wanted so but now all these links are shown out so we want to hide the job downlinks initially otherwise our menu is looking pretty ugly so let's go ahead and hide the menu drop-down links right now I'd throughout down link's until they are needed ok and the way we get to the drop-down links or just a li UL and then display display month so that was just going to hide all the links i refresh the page you can see that all the job down links are hidden ok next I want to make sure that all the drop-down links are vertical and this is just going to style our drop-down links so that they look neat the block and float on also want to make sure the text is centered in the job now links and we want to prevent text wrapping on drop down and drop down links so again li UL li a is how we selected and then we apply all the with our men with pickles 200px batting 0 20 PX so this is all just to make our links all our drop-down links look good okay let's see what we got so far ok they're not shown up yet but we're going to add that style to show the links in just a little bit actually let's go ahead and add that style right now display the drop down on hover ok this is a sort of a tricky part but i'm going to explain how it works ok so first of all inside the UL and li a hover so UL li a hover so oh it is ok ull IA and hover so it's the main mouseover of the main link like about so once we're there we want to show the drop-down links and the the way we do that is we use the + selector and then follow that by our our class which is hidden and that's going to show the whole hidden UL class that's underneath our main links hidden and also want to include the hidden hover as well because otherwise it's going to hide the mouse-over of the hidden element so just include both of them and the plus selector is basically if you go to w3schools is gonna say select and style every element that are placed immediately after another element and that's exactly what we're doing here and then we just want to say display block and that's it that's all we want to do now let's see what happened i refresh the page ok the hover is not showing ok so i forgot the dot here so you saw a perfect example of what will happen if we didn't include this part here ok so now all the links are showing up and they look good so let's keep going and under padding i think yeah is this part up ok now they were good alright cool ok let's keep going here what do we got next ok so for the let's start working on the show menu button now so we want to hide this checkbox it's invisible first of all because we don't really need that chat box we just what i needed to be visible on page ok so let's go ahead and hide checkbox and the way we selected as input and then inside the square brackets type icles checkbox and that's how we select the checkbox and will say just play called not so that's going to create our invisible checkbox and next is the cool part is where we actually we we show the menu when visible checkbox is checked so that's why we created the checkbox in the first place so want to say input signals checkbox and then column checked and then kill the menu display block ok so here's what we've done is we've selected checkbox and then we using the selector and column checked to make sure that the checkbox is checked and then the tilled it works in a very similar way as a plus is going to say everything that's underneath that checkbox which is our main menu here is going to be is going to select that menu and apply in the Foley says to that HTML so that's how that works and let's go ahead and see what happened here ok so now I now i can show you how this works yet so let's go ahead and actually create the style for our main menu for our menu label which is show menu and i'm going to go ahead and peace all the CSS of the main menu here so so this is all the CSS for the label of the menu which is going to look like a button so it's this we're applying the CSS to this HTML right here okay fire fresh the page nothing's going to happen because right now the menu is not being responsive because we haven't included the responses style yet so when we add all the responses stuff all this menu stuff is going to make sense for you guys so let's go ahead and let's go ahead and add the responsive styles which is the last part that we need to do responsive styles and for that we want to use the media selector and then media screen and max max width and the max with is where we want our money to collapse into a responsive menu and now we want to apply some CSS to the drop-down links or soil we want to make sure they're appear in line position static display not we also want to create the vertical spacing for our links because they're going to be displaying horizontally I mean they're going to be displayed vertically instead of horizontally so want to add some vertical spacing so our list items margin bottom 1px and we also want to make sure that all our links are full with so they stretch across the whole free UL li and la klia2 with hundred percent and that's going to select all of our all of our list items and links as well and make them a hundred percent finally here's the best part of it off this whole video we're going to show the menu using a simple show many selector class that we created display block and this is going to show our menu button which we're going to use to show and hide the menu on on the model devices when the main has collapsed into responsive menu and we also want to hide the background because background going to look weird in the small mobile devices ok that's it for the CSS let's go ahead and see what the menu looks like if i click on the model is here is going to show our menu button that was created and now let's click on it and the menu shows up and it looks good so that's how we create a responsive menu in HTML and CSS if you guys like this video please like share subscribe and I'll see you next time we're taking out