Responsive Pure CSS Menu Tutorial (No Javascript)

all right welcome to another video tutorial in this tutorial we're going to be building the entire responsive CSS and html5 menu without the need javascript we're gonna be looking at some fancy CSS tricks with some transitions some media queries and I hope you learned something so come on in and join along [Music] focusing on just appear responsive menu here and it's going to be a menu that doesn't require any JavaScript or CSS so the starting point files you can look in the description and download these starting point I also have the ending files if you want to take a look at exactly what it looks like in the end as well so I'm just going to do a quick demo of what the menu looks like and then we'll jump right into the code and get started so here's what the menu looks like in its completed state so you can see we have this little simple menu there's one two three four buttons there we have our little logo here on the left and as we move the browser window down so we're going to go down to a specific breakpoint at this point you can see it toggles into the hamburger menu and when we come up into the hamburger menu this is kind of a fun little thing here that we're going to design but this is all done with CSS and CSS animations but as we click the hamburger menu it flies out you can see we have now a stacked menu here and it automatically turns into an X and you can see there's a little bit of a transition there so when I click this again watch you'll see this thing sort of animate back into the hamburger menu and when I click it again it animates back into the mobile menu so that's kind of the way this little thing works and if I scale back up it pops out also what's nice here is if I scale down and I open the menu and I scale back up it switches back correctly as well so it's fully responsive and there's no JavaScript it's just done with a couple little CSS tricks with sibling selectors so that's the finished product and let's go ahead and get started on the beginning now the opening files here are pretty blank they just have let me just squeeze this over here there's just HTML so the CSS file you can see for the starting point is completely empty we're going to be doing the majority of our work in the CSS file for this responsive menu and this is what our HTML is going to look like so I'm just going to quickly cover the HTML as we're going to be spending most of the time in CSS I just want you to kind of look at the structure here so this is a very basic see other HTML document I don't even have a doctype I just have an HTML tag a very simple head tag just linking to our CSS file and then a header tag so the header of course is a new html5 tag and then inside of the header this is kind of where it gets important that you need to realize this structure here so we have an anchor tag that's just our logo that was on the left here and then we have an input tag so this is just a regular old check box and this is what's going to enable us to click that little hamburger menu on and off so there's a checkbox and then right below that we just have a label for that checkbox and that label is going to be turned into the actual three line hamburger menu with CSS so that's the two sort of magic things right there that are going to be the most important for our code so then we just have a regular old unordered list with some list items as our actual menus with anchor tags just like all the standard menus on the web so that's kind of way our structure looks header a couple of tags than an unordered list for the actual four items there so let's jump order the CSS and let's get started here so I'm going to kind of pull this back a little bit as we're not going to be paying a lot of tension here to the structure we're mostly going to be working in the CSS sheet so we can kind of see these side by side so what we're going to do is just do some really basic styling to kind of make it not so boring we'll add in just a few basic grades so you can kind of see some of the menu style so the first thing we're gonna do is just come in here and do a new tag for the body and we're gonna set the margin to zero to get rid of that default white margin around the body edges and we're gonna set our font family and we'll just go with the arial helvetica on here that should work fine now and we'll set a background color of some light gray so BBB okay so we're gonna save that and refresh over here and you can see that that colorize is everything great so let's go ahead and add just a little simple rule here for anchor tags I'm not going to specifically order my CSS in a fancy way we're just going to kind of go through it and you can definitely rearrange your CSS as you want but let's just set the color of our anchor tags to black so that's zero zero zero for a hex code and we'll save that and refresh so that looks fine there now I'm just switching back and forth I'm doing command tab and refreshing there are some plugins available for the code editor I'm using today is called vs code I'll link to that in the description as well there are some plugins that do live reload so as soon as you hit command s it'll automatically refresh your browser and there's a few things like that but I don't have those turned on today I'll just be switching back and forth okay now let's flesh out the header now the header tag also has this class of header if we jump over here to our HTML you'll see that the header has a class of header so I'm gonna use that class to target this specific element and let's just give it a background color so we can kind of see its dimensions and we're just gonna go with white so FFF for our color and then let's save and refresh my kind of refresh each time so you can see the menu start to be built as we go here and I'm actually gonna zoom in a couple of clicks there on the browser so you can see that a little bit better as well okay next let's give this guy a box shadow and so the box shadow property has the horizontal the vertical the blur and the color values so we'll start off with just a one pixel one pixel and then we're gonna do a blur of 4 pixels and then zero for this bread and then RGB a so instead of declaring a hex code like we did right here in this mint and this property we're going to be declaring this one with red green blue alpha this allows us to give our box shadow a transparency so that alpha value so that's why I like to do this for shadows and the color is just going to be black so it's zero zero zero zero red 0 green zero blue comma and then we'll just say point 1 which is basically 10% transparency so that will do it for that so let's save and refresh now it's gonna be pretty subtle here but that added a shadow right under there you can kind of see it along the bottom edge that one pixel by a-1 pixels shadow all right next we're going to fix position this menu so we're gonna position this guy won't spill that wrong position fixed that's going to anchor our menu at the top fix positioning and we're gonna give it a width of 100% so it stretches and we're gonna give this guy a z-index right now of let's just say three because we want it to be above content if we had content later on and we scroll we want that content to slide underneath our menu so that's what we're gonna give our header higher Z index so that it kind of appears in the stacking order on top so that's pretty much it for the header tag and now let's move down and work with the actual menu items here so the menu and there's our checkbox you can see that's the input tag so let's jump down there and add those so next is going to be a header UL so this is the unordered list that's inside of the header in other words the actual main menu so let's just set the margin to zero and the padding to zero and you can see when i refresh there that gets rid of the margin and padding now even though we can't see the bullets in this specific menu they actually are still there so we need to turn off the bullets as well and we do that with a property called list style so we're going to set list style to none that basically turns off bullets or numbers whatever the listing is and we're gonna set our overflow property to hidden so if anything flows out of bounds it will just be hidden and we don't necessarily need this but I'll set the background color to white as well just in case you wanted it for some reason change the color of your menu I suppose later you could but we'll just leave as white the same as our header for now okay let's refresh over here that's looking fine next we're going to be styling each of the individual anchor tags within the menu so we're gonna do a new rule for header UL a excuse me go above a horse invoice today so we're gonna set this guy to display:block in other words our anchor tags are going to be block level elements the reason we do this is an anchor tag by default is an inline element so it doesn't have padding and margins and what that means is if you were to hover your mouse over the menu notice how that I can click on this element even though I'm clear over here so if this was not display:block notice that when I hover my mouse over here can't click that you have to be exactly on the words in order to click an anchor tag so by setting that display:block we allow ourselves some padding or some you know margin in order to click on that button so that's kind of a purpose of the display block next we're going to just give this guy some padding so this will Pat out each of these and just so you can kind of see what's going on before I do this I'm going to turn on outline so you can kind of see it happening in the browser window there so one pixel solid red we'll just say for now and refresh you can see all those guys are now outlined in red so now we can go ahead and turn on the padding of 20 pixels that's the top and the well let's just leave it at 20 pixels all the way around so that adds 20 pixels in the top right bottom and left to all sides and now we're going to give this guy a border just on the right side of one pixel solid and I don't know we'll just go with [Music] I don't have that same color let's go with a a so just kind of a little bit of a gray now what this is gonna do you can't see it now with that added a one pixel border on the right edge of each of these anchor tags now right now our menu is stacked but in a desktop view that's going to add a little divider in between each of our elements you'll see that here in a second once we add the code to make these guys spread out instead of stack so that will pretty much do it we do want to get rid of the underline on anchor tags because this is inside of a menu so I'm gonna set the text decoration to none that will remove all the default underlines of those elements I'm going to leave this outline on here just for a minute okay so now what we're going to do is we're going to take this logo element and float it to the left of our menu so that it floats left so we're gonna say a dot header dot logo whoops logo and we're gonna float left we'll set the display to block which actually probably he's not gonna do anything font size of two M's so that's just gonna be you know probably thirty two point it if your browser default is set to sixteen which most browsers are and will give us some padding let's just go with maybe ten pixels on the top and bottom and 20 pixels on the left and right ok let's save and refresh you can kind of see that so there's our logo and it's a lot bigger you can see it has a little bit of padding and it's floating over to the left so that should probably do it there let's go ahead in between these two rules we're gonna add a hover state next for our list items or not our list items our anchor tags so we're gonna say dot header ul anchor : hover so this will effect again this isn't necessarily a rule on CSS selectors video rather I have some other videos on that but this is going to affect the hover of anchor tags that are children of unordered lists that are children of an element with the class of header so that's kind of way you read those from right to left at least that's the way I like to read them and let's go ahead and just change the background color and I don't know let's go to maybe D DD so let's test that out so we'll come over here and refresh and you can see now when I hover over their menu items I'm getting that background color and again I can click anywhere on this entire anchor tag that's because of the display block so that's working fine now and I think that's probably good for now let's go ahead and keep moving on down here all right now because we're designing a mobile first approach we're gonna be designing our mobile menu first and then we'll kind of do the the desktop versions as we expand out so let's go ahead and add another rule here this is going to be for our header and then the menu so the actual unordered list tag so we're gonna say clear:both and let's save and refresh to show you what that does that forces the menu to be cleared below the left floated title core backwards so because we floated that left we need to clear the menu so that works fine there and we're gonna set this is gonna come into play a little bit later but we're gonna set a max height of zero on this menu and then we're gonna set a transition of max height whoops and point two seconds and we're going to do an ease out so this is the actual animation so in other words when I click the mobile menu this menu is going to collapse and expand but it's gonna have a little bit of an animation so that's why we need the max height property here of zero now you can see when i refresh because this is on a mobile menu it should be closed by default so by setting max height to zero our menu is essentially doesn't exist when we click our little button we're gonna set the max height to expand so then it will animate out so that's kind of the thought here so I'll leave that max height at zero for now but that's why we put that in there okay next we're gonna work on these little menu icons here so we have our check box this guy is going to become listed over here on the right side of our page and we're gonna transform it so that it has these three bars I'm gonna use a whole bunch of fancy CSS tricks to do that so let's start working on those elements if you recall I'm going to be using all their class names but you can look here HTML so this input the actual check box has an ID of menu button and the actual label has a class of menu icon this guy has a class of menu button as well so you're gonna be using these two classes specifically to style this guy and then over here one more this span class in the middle is has a class of nav icon so you can kind of see which elements were targeting based on those classes so let's jump back over here and we'll start to do this so we're gonna start with the actual menu icon so we're gonna say dot header space menu - icon so just so you're aware again the menu icon is the span that is inside of the label okay so let's jump let's jump over here so we're gonna add we're gonna give this guy a let's let's give it an outline so you can kind of see this the pixel solid red and we'll save and refresh that you can't really see it right it's right there a little teeny tiny nothing right now but that's where it's at so we're gonna give it some padding so we're gonna say padding 28 pixels by 20 pixels and refresh now you can definitely see it so now we have some padding inside of there that's our little box if I switch outlined a border you'll be able to see that top elemental yes we can just right off screen that's fine next we're gonna give this guy a position of relative because we're going to be the reason why we give this a position of relative because this is acting as the parent container for the span we're going to be moving the span and doing some designs with absolute positioning so we need to have the parent container have a position of relative so we can use absolute positioning on its child elements here in a minute so that's why we give that guy the position if you have questions on CSS position and I have three or four videos on CSS positioning I'll probably put links to those as it's it's kind of a lengthy topic but let's go ahead and keep moving here so let's I think that's pretty much all we need on there so now let's move down and we're gonna work on the Styles next that are for the so it's gonna be dot menu icon nav icon so once I get this in here let's just go look at our HTML so you can see which element we're working on so this label is the parent you can see it starts there and it ends over here and now we're gonna be working on this child which is the span which is has the class of nav icon so this is the element we're now styling so let's jump back here and add some code to this so for our nav icon we're gonna give it a background so let's just say background and we're gonna make it something dark like just a dark gray something like that so I'm gonna save and refresh so you can kind of see this as I go you can't see anything yet because there's no dimensions to this guy so let's go ahead and give it a disbelieves span text by default or display of inline so we need to switch that to say display of block so we can give it some width and height then it'll work and let's give it a height of two pixels and a width width of 18 pixels and you'll see here when i refresh now with this did it kind of looks broken now but this little teeny tiny bar right there is what we created so it's just a little bar of 2 by 18 with the background color of a dark grey so that's what we created by doing those couple of rules there now we're going to give it a position of relative as well and oops gotta jump back over here and we're gonna be animating this guy a little bit later on so I'm gonna add the transition right now but we're gonna transition the background this will all make sense I'll explain it here in a second Oh point two seconds and the same thing we did before of an ease out animation and that bar eventually is going to become three bars we're going to animate those bars to do a 3d rotation with CSS that's why we're adding the transition here right now but we'll actually see that come into play here in a minute so let's see I think that's all we need on this guy for right now so let's jump down here and do the next little piece so now we're going to take this little bar and we're going to add its top and bottom hats so we are going to be using pseudo elements to do this so pseudo elements are one of those things that are just super cool and very powerful so I'll add all the classes here so this is the menu icon and we're going to be affecting the same element so it's the nav dash icon but we're going to be using the before pseudo element first now I could actually group these into a single one but I'm just going to keep them separate for now so let's go ahead and I don't this thing is actually turning green I don't know that's squawking at me well go have empty rules all right so let's same thing we're gonna give it a background of that same color as before we're gonna set the content to nothing this is going to allow us to add the bars vs CSS programmatically here in a minute and we're gonna say display:block we're gonna set the height to 100% so that it's the same height as its original and here's the trick we're gonna set position to absolute on this before pseudo selector okay and we're gonna set the width guess I should have done this up here so it makes more sense the width I can type that of 100% as well position of absolute and then that is all we need for right now so I'm gonna save and I'm gonna refresh this so what that did is it added another element another pseudo element in exactly the same place as the first one because we did position of absolute and we haven't moved it yet so it's basically height and width is 100% well that means it's two pixels height and 18 pixels as far as the width goes so now we can offset this guy and move it so we're gonna set the top to five pixels okay and save and now watch what happens when i refresh a minute zoom in here so I'm gonna refresh and see how that added my second bar for the hamburger menu so in other words top five pixels means it moved down five pixels from the top of where it was normally positioned with absolute positioning and it stuck it right there so basically I'm gonna copy this exact same rule so I'm gonna copy everything in ink here I'm gonna paste it right below this again here's where I can probably leverage your leverage a group selector to not have so much redundant code but I'm not going to and we will switch this before to an after so pseudo elements have two pseudo elements there's always a before and an after and that's all there is so now that I'm going to use the after one I'm gonna do the exact opposite I'm gonna shift it negative five pixels to move it above the original one five pixels again so let's zoom in here and we'll refresh and you can see that added now my third bar so that's how you build a basic simple hamburger menu with just CSS you just use two su elements shift one up shift one down and you're off to the races and because we used pure CSS for this we'll be able to animate those bars here in a minute and do a cool little transition so that is our hamburger menu now set to where we want and because we will be animating these bars here in a minute again I'm going to add the transition right now so we'll set transitioned all 0.2 seconds just like we've done before and ease out and I'm gonna copy this rule down here to my after whoops I'll do whatever I did my after element as well so now we'll be able to animate these guys okay now this little checkbox over here we want that to disappear so we don't want to have a checkbox here the only reason we have this is so that we have an ailment we can click because you can't click on a span tag right but in an input tag you can click on and it also is accessible so building your responsive menu this way it has a much higher degree of accessibility than like doing some weird jQuery hiding and showing of menu elements as well so that's our next goal we need to get rid of this little guy right here so if you recall it's jump over here to our HTML that little checkbox is inside of an input and it has the class of menu button and also has the ID of menu button but we're going to be using the class so back to our CSS will do a new rule here it's going to be dot header menu - BTN and we're just gonna say display of none because we don't want that guy there so let's save and refresh and now that makes our little check box disappear just like we want okay one thing we need to just fix up here so we want to get this little guy a little hamburger menu over here on the right side so let's do that we're gonna come up here to our header menu icon and we're going to float him to the right so whoops I can switch over here to Firefox there we go and refresh so now that guy's floated there over to the right we should publish it to them that long time ago we've been easier to see than jammed over here against the logo but you can see that little menu guy so when I hover my mouse over the menu I'm just getting the default arrow and not the hand the pointer so we need to also change that right here so let's go ahead and just set this guy to have a cursor of pointer and now when we refresh over here you can see that I hover over here and I'm actually getting the pointer so that I can click on this guy so that's looking pretty good we can now delete the border that was just so you can kind of see where that guy is so let's delete out that border and refresh so things are looking pretty nice so let's go ahead and come down here to the bottom and now we're going to be adding quite a bit of CSS to do this little magic transition so that we get our X to appear when we click on our mobile menu so there's some fancy things in here and let's go ahead and get started okay so let's write a new rule for the header and this is going to be when our menu is checked and I'll explain this selector in a minute because it's kind of a complicated selector so menu BTN colon checked sibling dot menu okay so here's where I'm gonna change the max height this is finally gonna make our menu expand to 240 pixels so let's explain this little selector here so I'm now clicking my menu and you can see it actually now finally works I can click the menu i mean--you shrinks I can click the menu and my menu expands now the reason why this works is kind of a little bit tricky but you have to remember the max height is affecting it it's always the last element right so the class of dot menu if we go look at our HTML again that's the actual unordered list so we're changing the height of the UL which is why it's going big now it's automatically animating because if you recall clear up here on our menu we added a transition of max height so we already have the transition set up in the original selector that's why down here on our selector here in the pseudo selector for checked it's animating okay just to prove this to you I'm gonna invalidate this so I'll hit X here come here and refresh so it's gonna just appear and disappear in this case so it appears and disappears and appears and disappears in other words max height zero max height 240 and in order to make that transition smooth is when we add the transition so the now it animates okay so that's why that thing is actually animating out and you can see there's a little bit of easing in there it's not a linear motion it kind of slows down a little bit so that's what the ease out does it that slows near the end so let's explain this selector so this checked is of course a pseudo selector it's kind of like the hover so what this means is when the menu button is in it's checked state okay let's go back and look and see what menu button is so menu button is the input tag so remember the input tag is still right here it's just hidden so the reason why this works is a little bit convoluted but I want to really demo this so you can grasp what's happening here it's kind of a tricky thing so I'm gonna do this way down here below this header to demonstrate it so I'm gonna set up a label and this label is gonna be for and I'm just gonna say blah my favorite thing and so we'll say label here okay and then below this I'm going to set up an input of type equals checkbox so this is basically exactly the way our menu is working here and an ID of blah and a name I guess we don't need a name we'll just leave like that okay so let's save and refresh here and oh shoot we can't see this because it's underneath because this is position fixed this guy's actually up underneath there let's do a bunch of break tags this maybe will fix this problem let's see if we can get this guy to come down there we go so the way this works the way that HTML forms work is of course if you have a checkbox you can actually click the checkbox itself in order to toggle the checked and non checked state but you can also click the label so if you click the label it will also toggle the checked and non checked state and this is the real magic here so this only works if your for attribute four equals blah matches up with the ID of the input tag so that's what sort of connects this label with this input allowing you to click the label so what we did in our menus essentially we hid the checkbox and then we didn't have any text in our label instead we've made that three bars so our label is essentially a three bar CSS trick so when I click those three label bars it's toggling the checked state of this input field and that's exactly what we're doing up here so I'm gonna delete this now so you can kind of see what's going on here so now in our code when the menu is in its checked state look for the next available sibling that has a class of menu and change it to max height to 240 so let's look at our HTML here right this is kind of the whole crux of this entire trick so I want to really explain this so when our input is in a checked State so in other words when I click on this it's in a checked State that little squiggly Tilda is a is a sibling selector it will select the next sibling so you can see that anchor and put label and ul these are all siblings to one another so it will select the next sibling with that class of menu and we're changing its height so in other words we're changing the the menu based on the click from the input label so there you go so anyway that's what's happening now that's how this selector works so that sibling selector does all the magic okay let's move down here so what we're now going to do is use that same trick to animate our label or 3 or hamburger menu essentially so we're gonna write another rule so this one's going to be for a header probably can just copy and paste here that's gonna be all the same so let's copy all of this so header menu button checked sibling this time we're going to use the sibling of menu icon and dot nav icon now I'm going to set up the selectors all first and then I'll start adding in the actual CSS okay so there's one and I'm going to copy this and we're gonna do this essentially two more times one two three so we have the nav icon and then we're going to use the nav icon before and the nav icon after remember we've already set these guys up earlier so we're using the before and after right here to actually create our three bars right so now we're essentially going to override those two rules when the menu button is checked so this is where the sibling class comes in so this is kind of really confusing to read but this is where things get complicated in CSS is this is we're affecting the nav icon this is the span tag in its before pseudo element if it's a child of a menu icon class that's the actual label which is a sibling of a menu bun in its check State that's a child of a header class right and so anyway convoluted CSS rule but it will work for us so we're going to do is we're going to say transform and we're going to rotate this guy negative 45 degrees okay and let's just save and refresh and you'll see what happens here so we'll see how that guy ever rotated 45 degrees and now I'm gonna copy this rule and remember he's rotated right now because he's in the checked State if I click this this is in the unchecked state so it's not rotated so when I click it it's in the check State so I'll leave that open there I'm gonna paste this guy and this a is going to be a positive 45 degrees for the after or pseudo selector which is the top one so now we'll rotate that and that goes like that now the problem is when you're rotating these guys with CSS it always rotates from the center right and that doesn't definitely does not look like an X and that's because you have two bars right here and they're both rotating from the center so you're getting sort of this effect like this so we need these bars to be exactly in front of one another so when you rotate from the center you get the X instead of spaced where it looks like this so we need to change the CSS positioning to move those guys down so let's jump back over here and what we're going to do is just set top so member before we said we set top to negative 5 and positive 5 let's just set it to zero to make it right in the middle and you can see when i refresh that's going to move that guy right up and when I set the bottom one over the top one to top of zero and refresh that's gonna move that guy right down so now I have an X so now the problem is of course my middle bar I don't want so we're going to come up here on this last menu and we're just gonna set the background remember that middle bar is appearing because it's a background color let's just set it to transparent so it disappears so now when i refresh now it's gone so that's how we kind of do that trick to make the X so you can see when I click it's got my three bars and when I click it turns itself into an X so that's kind of the magic there for doing this little animation so now what I want is I can actually add the transition to make that guy animate and we're going to do that up inside oh I already have that in there okay I have discovered the issue so the problem I paused that for a second but the problem was I had point two right here and I didn't have point two seconds so there I was missing my unit of measure on my point - I had that issue on both both of these rules so if you're following along fix that so that one should be point to s and that should be point to s this guy has a transition in the background these both have transition of all so with that little fix let's go ahead and refresh over here and you can see how this can work so I'll do in here so let's click the button and it actually does the animation now right so you can see it animate and animate and you get this really nice little transition all built with pure CSS or a fully responsive menu so really we're almost done here I know this is kind of a lengthy video but we're down to the home stretch so the last little bit we need to do is just make it so that our menu responds on a media query so because this is the mobile version right but if I keep going wider and wider and wider my menu is forever mole so let's go ahead and get rid of those actually I'm gonna leave the borders there for just a second we'll turn off those red lines in a minute here and that's pretty much it for the menu so now we just have a couple little bit of work to do on our media query and we're done so we'll create a media query here so at media media and this is gonna be a man width of 48 m's now you can do whatever value you want here this is essentially your breakpoint right but 48 m's if you have a 16 point font is 768 pixels which is basically iPad sort of tablet resolution so that's I'm just gonna add one simple media query here - to do this so we'll write some overrides in here so again we're building our desktop version of the menu so I'm gonna make sure that my screen is wide enough to accommodate 768 in fact I'm going to switch into the developer mode and Firefox so I can resize this without messing with my browser windows here okay so you can see the resolution up here it shows me my current pixels so I can see 768 I'm above it right there okay so let's go ahead and do this so header Li so this is all the list items in the menu instead of having them be stacked which is block I'm gonna float them all left so we're gonna say float left okay I'll save and refresh I'll do this slowly so now they're all sort of stacking horizontally instead of vertically and we'll do another rule here this is going to be for our header li a so all of our anchor tags will mess around the padding I think originally it was just 20 pixels all the way around so here we'll do 20 pixels on the top and bottom and 30 pixels on the left and right so let's refresh that so spaces them apart just a little bit more horizontally on the desktop menu and then we're gonna say header dot menu so this is the actual unordered list tag here we're gonna set the clear to none and we're gonna float the entire thing right so because we had clear left before which is why it's down below this because this is floated left now that we have clear none and we're floating it right it sticks it over on the right hand side of our heterosexual I suppose our menu and we're gonna set the max height to none because we had the max height set to that little override 0 or 240 before so we'll just override that and clear that value out and this is our last rule we're gonna set the header menu icon because right we don't want this little menu up here on a desktop so we're just gonna say display none and now it's a save and refresh so that gets rid of our little X let's go ahead and get rid of that red now that we added way up here on our elements let's just get rid of the red and save and refresh and you can see the little divider there so we still have our hover States that border right now is you know showing up to separate these guys I can expand and then watch what happens when I go down to menu mobile rather let's actually collapse that and show you so here it is so you can watch this as soon as I hit 768 here on this width value it should hit our media query for our break point so we'll start to scale down right there 768 it breaks so then we're now down to our mobile menu we have our animation everything slides out or hovers all work slide all the way down slide all the way up there it breaks back to desktop so that's pretty much it for this tutorial I know it was kind of lengthy but it's a very cool trick in order to build a fully responsive menu with no JavaScript it's gracefully degrades there's no JavaScript it's better for accessibility we have the ability to do cool animations with CSS and a few tricks so anyway this is a really popular menu I've seen it all over the place on the web and lots and lots of website so it's kind of fun hope you learned something to fill out some comments if you have questions I'd love to see any links for your menus that you've created using this technique and your kind of spin on them if you sort of customize it your own way and we will see you in the next one all right [Music]

Channel: FollowAndrew

Views: 88,541

Rating: 4.9545121 out of 5

Keywords: responsive menu, css menu, no js mobile menu, responsive css menu, tutorial, how to, breakpoints, no javascript, html5 mobile menu, hamburger menu, pure css menu

Id: sjrp1FEHnyA

Length: 43min 12sec (2592 seconds)

Published: Wed May 08 2019