No JavaScript, No Hacks Hamburger Menu Interaction

Key Takeaways

this right here is a very simple menu you click a hamburger icon and it opens up a navigation now the thing that makes this really cool is that there's no JavaScript no weird checkbox hacks it's entirely just HTML and CSS this here is the future of frontend development but you can't use it just yet as it's not supported in Firefox and there are accessibility issues however it's still intriguing to see how we'll become HTML programmers in the future if you enjoyed this video check out designc course.com where you can learn uiux CSS and more with my custom interactive platform that makes learning fun and easy all right so let's get started here I'm in a HTML file and of course this is where it all begins and we're going to wrap the uh hamburger menu and the menu in the navigation itself inside of a header element now next up we're going to have the button all right so this is the hamburger button and we're going to use a button element for this now this is real important this is the logic portion we want to put in an attribute that's specific to this use case called pop over Target and then we want to bind it to something called menu of course this could be any name that you wanted to give it now inside I'm just going to use an SVG graphic I'm going to paste in just the three you know kind of stylized design for hamburger menu nothing important happening here but this however you want to pay attention to so after the button we're going to have a nav and that's going to have a few attributes as well so we have to Define an attribute called popover letting us know that this is the actual pop over the thing that will pop up now we also want to put a rule attribute and bind it to menu and it will also give it an ID of menu as well all right menu menu menu so after that we're going to also have a close button so again we're going to use the button element and we can also use the popover Target menu as well so let's go ahead and just copy this stuff all right and then we're also going to put in popover Target action I know it's kind of a big mess I equals hide so hide and then I'm going to put in another SVG graphic for a close sort of button and then we're going to have an unordered list which is be our typical navigation structure home preferences my account support whatever and that's it I mean that's literally all we need to do just to fill out the page a little bit I will put a main with an H1 that says no JS menu reveal oopsie right there yeah all right perfect so now that we have that I we can go ahead right click open with live server and we'll see if this thing even works let's click it yeah it actually does work look at that so this is the default styling that's present I when you use this popover here in Chrome all right uh it you can see it's centered it has an outline we can override all the stuff and even apply transition animations with CSS so let's go ahead and focus on that so I'm going to paste in just some basic rule sets here nothing nothing exciting happening here um we're also going to go ahead and give our buttons styling here again nothing is crazy is happening here with respect to this new way of dealing with menus um now we're going to have a nav element okay so everything's going to be pretty much typical uh when with this rule set so you know as you can see I'm just using uh a width left bottom Auto you know we're just moving things around giving a different background color no border like that white border or that black border you saw height 100 viewport height we're just kind of getting the menu itself when it comes out styled all right so if I Sav this now when we go back and look at it I it should look like this all right look look at that okay so we're getting somewhere now what we want to do is I want to specify a translate property 100% on the x axis so when we do this and I go back we can't see it because we've moved it out of the way it's off it's off to the right out of the browser you can't even see it now we also want to apply if we wanted to have a transition um when it comes back we also want to apply a transition property but what's what let's wait for that part um let's actually get it showing up again and the way we can get it styled back to 100 or to to zero on the x-axis is simply we're going to say an pop over hyphen open and we say translate 0 0 all right now let's save this and see what happens at this point so we click it all right so it's basically the exact same behavior that we had before I but it doesn't look like it's different because we're not actually animating it at all so to do that we want to put it in a transition so our transition property here is going to be translate 0.5 seconds and then also display 0.5 seconds ease out and allow hyphen discret so if you don't specify this this will basically not work it won't work correctly we also need to specify in at roll starting hyphen style and we simply take this value right here and paste it in here so it's kind of defining and it's it's letting this new system know that translate is 100% on the xais axis rather when you know uh in its default state or starting state so if we save this and we go back look at that so now we have a nice transition and it works exactly as you expect except without any JavaScript um we'll find on a final note just because this looks so ugly I am going to paste in just a few more rule sets right here again it's not really pertinent to the purpose of this tutorial but I'm just going to go ahead and do it because I'm a designer I'm a little bit I can't leave the tutorial looking like that so if I click this there we go much better you could add some hover interactions if you wish but this is exactly how it works so our Clos button works this button works it opens it up we can also use the ES Escape key and we could also just click anywhere on the outside of it so all this functionality is built in to the system in the browser simply using HTML in CSS which is freaking awesome of course you can't use this right now or you shouldn't rather uh because there are accessibility issues like I mentioned at the beginning of the video and obviously Firefox this doesn't yet exist but anyhow it's fun to look at the how things will be done in the future so that we can worry less about having to program stuffff with JavaScript all right everybody if you enjoyed this make sure to subscribe and I will see you all very soon goodbye