Responsive Nav Bar Tutorial | HTML CSS JS Flexbox Navigation Menu

in this video tutorial we're going to be building an entire navbar from scratch using flexbox with HTML and CSS mobile view kind of looks like this you can see with the hamburger menu that flies out our menu up and down notice the button styles are different between mobile and our satellite view where we have just the login and sign up links all the way up to our desktop view where we pop in also our additional links so follow along and I hope [Music] new is go ahead and flesh out our HTML now I've just got some boilerplate HTML code here linked off to my CSS sheet so you'll want to go ahead and create a CSS and HTML sheet and link those guys together haven't already done that so what we're gonna do is in our body tag we're just gonna simply have a nav tag and this now is going to be the sort of parent element for our navigation items and then inside here we're gonna have several list items so I'm gonna do Li let's see times I don't know it looks like let me check my notes 1 2 3 4 5 6 looks like I'm gonna have 7 and each of those seven tags are gonna have an anchor so something like that how to do it that's the image secret shorthand there you just type that out and hit tab or you can type it out by hand and for each of these for right now we're just gonna say they're gonna have they're not gonna really go anywhere for right now okay so this first list item is gonna be our logo or our brand name so we're just gonna call this guy follow Andrew dev that's a my website and I'll save and refresh so you can see the changes here over here as we're coding live now we're gonna be starting off building the mobile version first and then we'll scale up to the tablet and then desktop second here we'll just kind of name these links randomly here home about and we'll call this one services and then we're gonna have this one down here be our login this one down here is gonna be our signup and the final one here is actually going to be our hamburger menu so we're gonna do that inside of a span tag and we'll just give it right now the class of bars okay so we're gonna eventually design in some hamburgers with those bars so it's gonna be an empty tank empty hidden tag on the desktop okay let's come over here and define some class names for each of these list items so the first one is going to be our logo then I'm gonna copy this down and we're gonna paste it right here and this one's just gonna be a list item so I'm just gonna call an item a regular sort of navigation item and I'll copy this to this one this so those will be items this one's gonna be an item this one's gonna be item and this one down here is gonna be the class of toggle okay so we have all of these are items a logo and a toggle and then these two the login and sign up because they're designed a little bit differently as you saw from the preview we're gonna have give them some extra classes though so that we can design them so this one's going to be a button and this one's also going to be a button but it's gonna be a secondary button because it's gonna have just an outline instead of a filled background so this gives us all the classes we need to really start our HTML now in order to make this work let's go ahead and just add down here a section called main and we'll just put in here an anchor tag for right now we'll just leave it blank but we'll just call this I don't know we'll link to the YouTube channel how's that slash slash youtube.com slash channel slash follow Andrew so we'll have that little link down there at the bottom and that should probably do it so whoops this well yeah sure let's maybe move that down to the bottom so it's not in the road so we'll say style we'll just give this a fixed a position of fixed and we'll move it move it to the bottom zero so to clear down there at the bottom out of the road so this is kind of the main area right of the website and then we'll be building out the nav in the top so that's pretty much it for the HTML just two regular nav tag a bunch of list items with classes the one thing I did forget to add is our unordered list so we do want to have the parent unordered list tag here so that we remain nice and semantic if you will and then we'll tab all this stuff over oops as well okay so we have our unordered list then we've got all of our list items inside of there so that pretty much does it I'll just squeeze this over so you can see the HTML whoops right there I'm gonna squeeze it over and most of the work now is gonna be done in our CSS as we build this navbar from scratch using flexbox so let's jump over here to our CSS sheet and we will get started with the CSS code so there's quite a bit of it I think let me check my notes in my little notes I have around 160 lines of CSS so this will take looks a little bit of time here but it's well worth it so we're gonna start off we're gonna do a rule member the star rules the catch-all meaning is gonna affect all elements every single HTML element we're going to change the box sizing to border box and the border box makes it so the box model actually changes and our padding and margin go all the way to the the edges now instead of kind of having to calculate that height and width differently so if you're not familiar with the box model I've got videos on that to describe how that works let's go ahead and set padding to zero and we're gonna set margin to zero so that we don't have any padding and margin on any elements okay so you can see now here that is a plane let's just I always like to do this whenever I add a CSS sheet we're gonna set the background color to red just so I can make sure it's working because I I noticed that that didn't do what I expected and you can see it's not working so I have an issue here so let's jump over to my nav bar and oh yep I've linked to the wrong name so this is supposed to be nav bar dot CSS because that's what I called my CSS sheet now you can see once I have fixed that everything looks correct so we can get rid of this a little rule and there so let's just change the font family here to a sans serif font as we're working through this okay so the first thing we're to do is on our actual nav element let's go ahead and set the background I'm just gonna set this to two to two which is kind of a dark dark gray you can see over there on the side and then let's give some padding so we're gonna say padding of five pixels on the top and bottom and 20 pixels on the left and right so that adds a little bit of padding there on our nav that looks fine there so next let's go ahead and change a few of the properties of the unordered list we want to change the list style type to none because we don't want the bullets they were kind of hard to see there but you can actually see the bullets in fact are in place there for our elements so as soon as I save and refresh that you can see all those bullets are gone so that's pretty much what we're gonna do there this is just some base styles we're adding here let's change the color about all of our anchor tags to white so we can actually see them and we're gonna get rid of the underline with text - decoration of none so that they don't have the default underline there on our anchor tags either and let's set up a hover State so when we hover over these we'll have our a colon hover rule and it's gonna be text-decoration:underline so in other words as I hover over them they will underline themselves like so just something really simple okay so let's go ahead and effect a couple of let's do the list items so we're gonna do the now remember we need to actually come back to our HTML I forgot to give my unordered list because I forgot to add that area I'm gonna give it a class name so let's call this class of a menu just so that we can target that class and not just do the general ul selector for this little tutorial so now that I've added that we can say dot menu and for the menu here we're going to add in and this is the unordered list so you kind of have to remember that so let's go back menu Li so all the list items inside of our menu let's change the font size so we're gonna maybe go with 16 pixels therefore the font size which is 16 point is the default font size and browsers and then we're gonna give padding of 15 pixels and 5 pixels so 15 on the top and bottom and 5 on the left and right again we're building the mobile menu first so this is the menu that would appear when we fly it out so we want these kind of well spaced so they're easy to tap with a finger or a thumb we don't want them to have you know be too close together so we give those plenty of padding that's working fine there and last thing we want to do is make sure that the anchor tags here are set to display of block by default you can see the issue here is when I hover over these with my mouse I have to be right on the actual text if I hover over here then I'm not getting the clicker to click so you can fix that by saying menu Li a and setting that to be display a blog and now when I hover over here notice I can come clear over here to this right side and it's still triggers okay let's see now we want to work a little bit on our logo we want it to be a little bit different in our navbar typically the logo element or the the site title is a little bit bigger so let's do that gonna say dot logo anchor tag and we are going to set the font size here whoops font size to 20 pixels so you can see that's a little bit bigger and we're also going to do this as a group selector because we want the dots it's actually we're not gonna do we're not gonna do that we're not gonna change our talk I was gonna try to change the toggle meaning our bar size with the font size but now we're gonna do ours a little bit differently so that won't affect it okay let's go ahead and do a couple of rules here for the secondary button so we want to divide the home and about links or rather the sorry the login and the signup link separate from the three main menu links so to do that we're gonna say dot button dot secondary and we're gonna give it a border bottom of one pixel four four four solid okay so you can see that just gave a little bit of a bottom border to these two items eventually we're gonna move these so they're at the top here above those three using flexbox so that pretty much does it for the default styles now let's go ahead and work a little bit on the menu here for our mobile view so I'm just going to do a little CSS comment here and just call this the mobile menu will then do some rules for the tablet and desktop so on our mobile lets say dot menu again we're gonna be using display of flex so that changes there we're going to set the Flex wrap to actually wrap the items and we're going to say justify content justify content we're gonna set this to space between and save that that's a little bit tricky to see I'm gonna pull this out here so you can scale it better how this is happening it's kind of little bit easier to see when we scale this up but that's kind of what it's how it's behaving right now and we're gonna align the items align items to Center which is the cross axis so line items and flicks box works on the cross axis and justify content works on the main axis if you haven't reversed them so flex box is quite difficult I'm going to be publishing an in-depth the crash course on flex box soon but that's kind of how those properties work alright next let's change the toggle so the toggle right now isn't showing up for us at all because we have that sort of hidden away in that list item but let's just do a little rule here so we can switch its order in fact I'm probably gonna build that and turn that on first so you can see that so let's go ahead and do that first it is worth noting that the toggle I'm gonna be building here is CSS based but to actually trigger the click on and off we're gonna be using JavaScript I have a full video on another responsive menu I did where the entire thing is done without any JavaScript with pure CSS and it's also animated has a really cool effect so check that video out for sure if you don't want to use javascript because you can accomplish the same thing we're doing here without JavaScript but to mix it up we're gonna be doing this one with JavaScript so let's go ahead and build the bar so we're gonna say dot toggle we're gonna actually I'm gonna do this one in a second I'll just leave the rule there to remind me to come back to it cuz this will make more sense after actually build the bar so remember that our element here is a list item of toggle and then inside of there there's an anchor tag and then a span of bars and in fact we actually don't even need this anchor tag so I'm gonna delete it out of here so we just need the span class or rather the span we don't need an anchor tag so that will do just fine so we have a toggle and then a span of bars so let's jump back here to our CSS and let's work on that span tag so we're gonna do a rule for dot bars we're gonna set the background to nine nine nine and we're gonna set the content property to nothing right here actually we're on sorry I got ahead of myself that's going to be on the sooo element we're going to set the display to inline block like so we're gonna set the height to 2 pixels and let me save right here and why did that not show up I expected that to show up right here but I don't see it oh I got to give here a height oh we have to get those give it a position of relative I'm going to give it a width that's the problem width of 18 pixels there we go now we can see it so you can see that just adds one little teeny tiny bar right there for our span tag and we're going to be transitioning this guy here in a minute but I think that's really all we need for the default bars so now we're gonna build the top and bottom bar that was the middle one so here we'll say dot bars before we'll do two colons here because that's the proper syntax both of those actually work and dot bars after so this rule is gonna pick both before and after pseudo elements kind of the same thing here I'm just gonna really copy all this and paste it in here except position is going to be absolute I don't need to read Eclair this and you actually I do need to read Claire that sorry and then we're gonna add in a Content property so let's say content and for right now it's gonna be blank whenever you're working with before and after pseudo elements you do need that content property to be in there and that should pretty much do it now we just need to move them so we're gonna add one more rule here dot bars before and we're gonna say top five pixels and you can see that moves these before element down from the top five pixels to create our third set and we'll copy this paste it call this one after and it's gonna be negative five pixels and now you can see that builds the second one so that's pretty much all of our bar okay so the reason why we had that toggle up here now I can finally say cursor:pointer and save and now you can see when I'm over here I get the pointer when I'm on the top of the hamburger menu so that's what that's for now that we have all the little hamburger menu toggle menu built in place we can go ahead and style out all the styles now for the actual mobile menu so let's go ahead and do that so again we're going to be using flexbox for the majority of this and I'm just going to do this kind of right here after my dog menu [Music] you so the first thing we're gonna do is we're gonna do a rule here for the toggle and it's going to be order of one I'm gonna save that and then we're gonna do a rule for the dot item dot button and it's going to be an order of two so you can see that reversed the order here so now my toggle is ahead of these guys and we're going to work on the items themselves so each of the items and we're going to give them a width of 100 percent and we're going to do a text align of Center and you can see now that's how that's looking so they're all spanning the full width in the text is in the center of the screen and we're going to give these guys an order of three and you can see now that puts this at the top these two second and then these three third because of the order of three and the last thing we're going to do because we don't want our mobile menu to be out by default we're gonna set the display to none and that's going to essentially hide that element until we set up our JavaScript to click this element and fly that out which we're gonna do clear at the very end so I'm just going to invalidate this rule here for a second so that we can see this menu while I also add this last one here dot item dot active we're going to set to display of lock so what we're going to be doing in the end in JavaScript is we're going to be adding this active class dynamically to all of our items when we click the hamburger menu so we're gonna click the hamburger menu javascript is going to add that class of active to all of these guys essentially making them appear that's what this whole rule right here is for okay so again let's go ahead and come back here and we'll just turn this back on so they're hidden by default and that's pretty much it for the mobile menu let's now come clear down to the bottom and we'll write some rules here for the tablet menu we'll call this so tablet menu and start to add some of this so we're gonna do a media query here so at media all and Amen whoops min - width of bot or now 468 pixels it really doesn't matter here what you're doing for your media query just wherever your breakpoints are will work fine and let's add in some so we're gonna override our menu with dot menu so the first thing I want to do on a desktop size says we're gonna say justify content and we're gonna set that to center so that kind of you can see what that does it justifies the content and adds them to the center we're gonna get our logo and it's going to be a flex of one so it's gonna allow it to grow that's basically the flex grow property there if that's the shorthand which is different from the default and our item dot button we're going to give a width of ATO and an order of one and we're gonna say display:block so that's gonna bring in these two elements so that they are now present remember before they're set to display:none so essentially on the media query for tablets we're turning just the items that have the class of button back on so that they're visible here in our secondary size which is for our tablets and let's go ahead and change our toggle so we're gonna say dot toggle and we're gonna give it an order of two just to make sure that it's on the other side of those guys and we want to turn off that little it's kind of hard to see here but there's a little bottom border right there you can see how we want to get rid of that as well here so we'll write a rule for our dot button dot secondary and we're gonna save just order of zero and that gets rid of that border there and then we'll mess around with our anchor tags so now we're actually gonna do quite a bit of styling to really add some dimension to these buttons so we'll just do a rule here for button anchor and we're gonna give it some padding we'll say 7 pixels and 15 pixels you can now see that got a little bit of padding there we're gonna set the background just a teal that's just gonna give it a background color you can see of teal and let's give them a border of one pixel solid and 0 0 6 D 6 D that's the one in my note maybe that's the same colors too I don't know I think that's slightly darker and then we're gonna give these guys a border radius of 50 m/s which is just gonna make them look like pills flips border - radius let's fix that little typo you can see that just kind of rounds off those corners there on those two buttons now let's change this secondary one switch just an outline without a background so da button dot secondary space a we're just gonna set the background to transparent and that's kind of how it looks now so we have a filled in button and we have a secondary holo button so that's working fine now and let's go ahead and add these guys in some hover States so dot button a colon hover so anchor hover let's go ahead and set the text when you do that we'll set the transition transition all 0.25 seconds and that's probably all we need to do on that guy oh when we hover over these we do have the underline so let's go ahead and get rid of that on hover so in fact we're just gonna do this by default on our anchor tag text - decoration none that should follow through because that property is inherited to the these pseudo selected States okay so we have our transition on there let's write another rule here so dot button not so this is the not pseudo-class we're gonna say anything that's not the class of secondary a colon hover and we can you're going to change the background so background we're gonna say is 0 0 6d 6d and the border - color is zero zero five nine five nine oops we need a pound sign okay so now let's try that out so you can see now when we hover over we get that little transition and we have a little animation there for the background color changing and we could do something on the other one as well so let's do button dot secondary a : hover we could do this another way I just wanted to show you really what the not class looks like there as well but and we'll say color D D D so in other words when we hover it's gonna have a slightly different color it's gonna be really hard to see but you can see that font color itself changes on the hover on this one and when we hover on this one the background color changes and the border technically okay so we have a little a couple of states there for those buttons to separate them and that looks great lastly let's go ahead and do our desktop menu but before we get there let's just check out how these two states are working so here we have our mobile of course those two buttons disappear we have our tablet where they reappear and then we'll do now the desktop we're just going to be you know something about this size so another media query @media all and a min width of 768 pixels we'll say for this guy for this media query so the first one we're going to do is the item so we'll say dot item and we're gonna change that to display:block and you can see that automatically of course makes these guys up here again like we did before similar thing to what we did before me move that mic back into view and we're gonna give these guys a width of auto which is going to make them shrink down and not take up 100% a hundred percent wide but really the width of whatever their content is so that's what with Auto does for us next we're going to change the dog toggle because we don't want that at all here so we're gonna say display:none so that the hamburger menu is gone on desktop view and logo oops here's we're going to mess around with the order so we'll say order is zero for the logo which is kind of where it's already at but we want to declare it because we're going to be declaring other orders as well and then we're going to say dot item so anything with the class of item is going to have an order of 1 which is going to be next to this one so now those ones sit in the front and then just to finish off declaring all of these anything with the class of button is going to be set to the order of two which they're already in but of course we want to just make sure we declare each of those individually ok now let's just change the padding here a little bit so let's say menu list item so we'll set the padding to 15 pixels and 10 pixels space those out a little bit more horizontally there and we'll say dot menu list item table button we're gonna set the padding whoops we'll set the padding - right to 0 and that's going to make sure that this guy right didn't have that double padding that padding right on the last one we said 2-0 so there we have that and that is pretty much it for the HTML so we have our desktop we have our tablet and then we have our mobile so you can see how we can show and hide different elements with flexbox we can reposition them left right up and down so that's pretty much it for the design now we're going to move over to JavaScript and hook up this little toggle here so that when we click it we can see our actual menu on mobile view so we're gonna jump over here to our HTML to do that let's cruise up here to the top in our head section and we'll add a couple of style tags not style rather script tags for our JavaScript now you could do this with vanilla JavaScript really easy we're just gonna throw in jQuery to do this and again you don't need to use JavaScript at all to do this in my other video I show you how to do this exact same thing with pure CSS which is really cool so let's go ahead and we're gonna link up to the jQuery first I'm gonna copy that from jquery.com so we'll just head over here and we'll come down to wherever they put the CD in here we go down low and we'll get the compressed production version whoops we don't want the download we want where's the link here for the CDN somewhere down here CND's oh I don't need to know what it's CDN is jQuery just give me a dang link Google okay good enough so we'll copy this a little guy right here and paste it up into our head section so that we can pull in jQuery and now we can jQuery on ready I'm just gonna copy this as well so we can have our unready event so jQuery if you're not familiar with that of course this isn't a course on jQuery but this little function right here makes it so the entire this the code we write won't execute until the full HTML and CSS has loaded so let's go ahead and delete that little test and let's write our own code okay so let's the first thing we're gonna do is write a jQuery little jQuery toggle here so we're gonna say dot toggle then I'm going to use the on click events we're gonna say on we're gonna listen for the click event and when that one happens we'll execute our anonymous function here and we're gonna write some code so in other words when we click our toggle button do the following we're gonna write an if statement so we're gonna say if the shayok item so if our items has class of active let's pull this over a little bit so you can see this okay so if our elements that the class of item have the class of active then do the following we actually want to remove the class so let's just write the else here so if they already have the class then take it away so we're gonna say and again this is this is not the best we could probably set this up in a variable instead of having to redo it every time but that's okay dot remove class of active okay so when we click our element if the class if the item already has the class of active this basically takes that away otherwise at it so I just pasted that down there instead of remove class we're gonna say add class so if it doesn't have the class then we add the class of active and that's pretty much it for the JavaScript so let's go ahead and test it out now so what we're gonna do is I'm gonna say inspect element so you can see this down here live so we're gonna open up the main and will it's open up no sorry not main the nav unordered list so you can see all these guys okay so watch all of these list items that have the class of item so we're gonna come down here so when I click this notice how all of those got the class of active because they didn't already have it when I click this again they all lose the class of active and that's basically all there is to showing and hiding the little menu on mobile again we're not doing animation we're not animating the little hamburger menu bars and all that stuff just real basic JavaScript to show and hide that menu and now our navbar is finally fully complete so let's go ahead and take a look here so there's our desktop there's our mobile we can still toggle out just those three on the tablet view and then finally down to mobile we can toggle out all of them notice the order changes on mobile they're not designed and there's a little bottom border there the login and sign up on a tablet view we just have login and sign up and then these three links are in the menu here and then on desktop view these three links appear before the two buttons and all of that is done with the beauty of flexbox and just with the couple of properties of flexbox we could easily if you wanted these three links right here in the center we could do that we could swap things around really cool what you can do with flexbox as far as positioning your elements in a one-dimensional axis so that's the end of this tutorial I hope you lump-sum well I hope you learned something subscribe comment thumbs up and we'll see you in the next one [Music]

Channel: FollowAndrew

Views: 93,803

Keywords: navbar, navigation bar, nav menu, flexbox, html, css, responsive, web design, tutorial

Id: 6pidsgeLLzE

Length: 35min 50sec (2150 seconds)

Published: Fri Sep 06 2019