From Adobe XD Prototype to HTML, CSS & JS - Making an Animated Mega Menu

today I'm going to show you how to go from prototype all the way to code in the browser to create this before we begin this video sponsor is bookmark com which is a free website builder that uses artificial intelligence to create websites right in front of your eyes the entire process is less than two minutes and it only consists of answering seven simple questions and if you need to sell stuff you can create an online store very easily it's really cool I recommend it so check out bookmark comm today hey everyone how's it going Gary Simon of course Etro so today we have what more of a lengthy tutorial I'm really excited about it because I don't really go from prototype and then show you how to realize it in actual HTML CSS and JavaScript but that's exactly what we're doing today so there's a a modern trend called I its front sometimes referred to as a mega menu where you click on a menu item particularly especially on desktop or tablet versions and you click on it and there's a whole overlay that just fills the entire screen with some sort of elaborate menu so I'm going to show you how to do a really basic version of that and first we're gonna step into Adobe XD and we're gonna design exactly what you see here and I'm going to talk about the considerations that you have in order to try to get this realistically mocked up so that you can show a potential client before you actually go ahead and waste time implementing and then they tell you they don't want that and so if we hit play we're gonna have a real good representation of what this thing should look like and act like when it's in the browser so if we click on this hamburger menu there you go awesome stuff all right so I'm gonna show you exactly how to work with that and then we're gonna step into our code editor using HTML CSS and JavaScript remem using vanilla JavaScript by the way because I don't want I want this to be framework or library agnostic so we don't leave anybody out it's all just a matter of translating and understanding the concepts between behind class binding and click event binding which are two very simple concepts in any of this 3 major frameworks or libraries alright and so we can see here this is the live version in the browser if we click it we can see it's pretty much exact the same with exception to this part when those animations came in real fast I was just screwing around near the end of the tutorial just to show you some different animation ideas but initially you'll see I'm when I cuz I just got finished recording this tutorial you'll see that they do slide in and up real smoothly like they did in the actual prototype mock-up all right so I've been talking way too much so today our question is use any tools or plugins for CSS animations let me know in the comments make sure you subscribe here and let's get started alright so we're gonna start here in Adobe XD the new project this is obviously what starts up when you load it up we're gonna choose web 19:24 the default artboard size and we're not going to I bother with making this responsive that's a kind of outside of the scope of this tutorial would it would just add extra work but of course once we get to the CSS portion you can just use media queries to make it responsive alright so what we're gonna do first is just give a real very extremely simple interface here so I'm gonna take the type tool I'm just going to type in something like my site just for a fictional name I'm gonna use montserrat as always we're gonna change this to bold and we'll make it black alright then we'll come up and increase the size give it some good weight space from the side here and then over here on the right hand side I'll position in a second but I wanted to be roughly the same size we're gonna hold shift and make a 45-degree angle up you know what I'm getting ahead of myself I'm doing the close button I first want to do the hamburger icon so I'm just gonna hold shift and drag out a line right around there maybe 4 for the size and we'll make the border black we'll take this control D hold shift drag it down right around there hold hit control D as well to duplicate it again and then use the alignment just to make sure they're all lined up appropriately and then align all three of them in the center group them hit control B or not control B sorry I'm thinking about different application we're going to change the name of this group will just call this a menu alright so now we'll take that and we'll position it over here to the right very simple all right and then finally I'm just gonna have one h1 element in HTML just for something I there to see and I'm just gonna say this is fancy alright not really but you know and then one final thing just because the designer in me I just I don't want it to look just like this I will use the CSS property of or the selector of but before and will use a content pre or the content empty property to get this border up here so I'll just use this fill something like that this is fancy whatever alright so it'll end up looking something like pretty close to this in the browser alright so now at this point I we have to ask yourself okay how do we want this this this massive or this mega menu to overlay well first before we get to that point let's just change I want to make sure that a few things are changed up I don't like using the default names most of the time so I'm just going to put in h1 border here and that's all good okay so now we're gonna duplicate this artboard but first change the name to home alright ctrl D to duplicate it this is going to be we're just gonna call this overlay and now we're going to design the actual overlay in its final state after it is animated in so we'll take the rectangle tool just put it on top of everything no border make it black now just temporarily I'm going to just drag it down and we're gonna make a close button so to do that I'll just take this right around here I'm just holding shift to get to that 45-degree angle sighs for when we get consistent for now we're just going to make it black but we'll change it to white in a second we're going to duplicate it and then we are going to hold shift and then just drag the one anchor point over to the left and then just position it right there as such all right so it looks pretty good we'll hit control G will call this close and we will also it is to the top so that will work I'll just call this overlay that's this big black overlay down here and we will make it white and we'll drag this up Oh before I do that I want to make sure it's pretty much in the same location awesome all right so then we're just going to have four columns for four different layout or menu items so the first one will be home and we can't see it because it's black so we're gonna make it white and drastically reduce the size I say to around 59 looks good underneath home we're gonna take the type tool left click drag out near you right around there just for some filler text like I come on home already or something something silly and then we'll make this let's see here regular and we'll make it kind of great just to get contrast a little bit more so with the domain home label area alright something like that so once you have that we're just gonna duplicate that put this right around here duplicate that put that around here and then duplicate that as well all right so just real quickly I'll change these up about us services and because I'm lazy I'm not gonna change the other text underneath it you get the point okay so that's the final appearance of what the the menu will look like after it has transitioned in and so I what we can do now is we need to work with the layers a little bit so first the should be groups all right so group here group here group here and selecting both of these and a group there so we have four groups and I we're gonna just name this two menu one menu 2 menu 3 and you guessed it Vandy 4 you're so smart alright and so we ever close let's check it check take a look at all these items here I like the names there oh good and then finally I'm going to make this so that we have to really think ahead I mean you can always adjust things later on if you screw up but it helps to think of ahead in terms of how you want the the menu to really come in in terms of the individual elements do you want I for instance do you want it to be like this you could just die you could just do this if we go here to the prototype section we drag this over here go transition none pick play and click it look I'm gonna make sure this is this is the actual yeah it's a tap transition sorry about that so now if we click this I mean do you just want it to be like that or do you want to have animation come in so in this context what I wouldn't want first is for this black container to kind of just slide out over everything first and when it's doing that though I don't want these menu items to be visible I want them I want it to slide in first and then we'll have each one of these fade up and this X button will also fade in as well and we can apply CSS animation properties to control exactly how each of these four or five different elements will animate in so in terms of Adobe XD and how to get that type of animation you know visible in the prototype where a potential client or whoever can see it then we have to set this up a certain way so the way we're going to do it is we're gonna take these four items or these five items really and we're gonna give them an opacity of zero now we're going from this artboard to this artboard essentially and in in a side note you would normally want to set this up as an overlay in the prototype section but if you do want to have multi-step animations I've found that you can't do that with a normal over light that's just like at a side note if you don't know what I'm talking about do it Adobe XD overlay and you'll kind of see what I mean so we're going from this to this essentially and then we have to have another artboard I that will fade these in so we're gonna be working with three artboards alright so for this first one let's go ahead and get up the layers again real quick I want to make sure everything is in a group that's a part of this so this menu here if I select everything we don't need the my site logo or the actual the menu right here as a part of this group just these things right here so with them all selected we'll hit ctrl G and we'll just call this overlay menu okay so now we have to duplicate this so we have two copies but we have to drag this over and make sure it's inside of home so now it's inside of the home artboard you see we have two artboards home and overlay but both of them now should have a copy with this particular item here so we have home we see we have overlay menu and also overlay we have overlay menu as well they need to have the same names in order for these animations to work properly alright so now I I'm gonna position this down here by the way so that I could take this and I'm gonna take the exposition you could just move it like this you can see how it affects your exposition but I want it to be exact so I'm just gonna type in 1920 it's gonna hang off to the side I which sounds a little strange but you'll see you know how this works now we have to ask yourself how do we want this to end how are we gonna control the animation of this thing right here going into this artboard when we're in CSS well I thought we could probably just use because I want it to slide over instead of moving this whole thing over we can just use the transform scale function to scale it on the x-axis from zero all the way to a hundred percent of the browser browser so what I'll do is just double click into here just to get access to this overlay block container and just put it in basically to zero right there all right so now let's go ahead to the prototype section and see if this actually works so we'll take this menu it is going here but we have to make sure that we're choosing Auto animate for the action type and also a duration we'll save one second all right so we can I ease in out you can experiment with a different type of Evie's easing options and let's go ahead and hit play and see if this works there we go perfect so now for the final setup for this we have to duplicate this i overlay artboard and we'll just call this overlay all and now remember by default all these elements are still here if you hover over these you'll see that they're they're showing up but they're just you know they're all hidden so let's bring them back here oops I'll just double click it and then hold shift left click once left click once left click once these are going to have an opacity of a hundred percent as well as our little icon up here all right so this is the final result now if we want these to animate into this position right here we have to take each one of these and move them down so if I select all move it down maybe just a little bit I know it's kind of hard to see because we're not really looking at it and then hold shift to just deselect this one move this one down a little bit more new this one down a little bit more it would probably help to be able to see these in probably temporarily just bring him back in fact let me do that real quick because ona well looking at this it does look like they're pretty accurate in terms of distance this one could probably be down a little bit more and there we go so let's give this a shot the final thing is to go to prototypes tab we'll drag this over here to the overlay all and the trigger is going to be a time trigger with a 0 second delay so once this artboard is into view it will automatically shift over in Auto anim in over into the overlay all option and so you could do this indefinitely so you could have crazy long animation sequences all right so this duration do we want it to be you know you want to take one second for all these well let's just give it a try and see so hit it there you go I said it's pretty smooth now as a final thing you could reverse this animation and make them all fall out and you can dip completely do that it would require replicating this artboard and sending this over there but just to make things simple I'm just going to double click into there to select the X and we'll just choose tap trigger we're not going to auto animate we're just going to do transition and the animation we're just going to hit none and hit play so now we can try it out and there we go that's exactly what it's pretty much going to look like when we get to the HTML and CSS section which is right now alright so what we want to do is I in a console I'm just going to use it real quickly to create a a folder so we're gonna do make directory we're gonna call this May guy I don't know make a menu CD mega menu at there's created and code period to launch the visual studio code my code editor it's coming off screen here it is and let's get started so index.html we're going to create and I'm gonna hit exclamation point for some boilerplate for HTML we'll call this mega menu we're gonna type in right here link enter and we'll say it's gonna go to a folder called CSS main CSS for the CSS file we reference alright and let's create that real quickly so we have CSS and a main dot sass file we're gonna use sass there's a sass extension that would enable this for you so when it detects that you created a sass file you'll see a watch sass down here and just click on it and now it's watching your sass file and compiling it down to a CSS file right here so we work within the sass file not the CSS file just some basic stuff for you and let's close that out alright we're also going to need two images SVG graphics from Adobe XD so first one is going to be this little icon right here and the next one is going to be the X icon right down there so the name is menu alright so that's the name it's going to be exported ass so we can right click over here and we can actually right click on the name export selected SVG so we're gonna go into mega let's see mega menu we're gonna create an images folder and we'll select folder hit export awesome and then we'll select this one export selected and export it'll remember your previous location and we're done with that alright so now let's go ahead and do the HTML it's very simple so yeah that's a good size right here I think it's do you can still see what I'm saying typing here so we're gonna have a nav element with an ID of overlay and we're giving it an ID because we need to reference this and a little bit in JavaScript and so this nav is actually the nav element will be the black overlay itself that comes in so we'll be specifying that that background property on to this nav element right here we're also gonna have a actually before we get to the nav I'll leave this right here before we get to the nav let's do the everything else that shows up before the menu is clicked so we'll do i header the header element of course just has two elements so we'll have a logo and this goes nowhere and the logo is my site we're gonna give this an ID into a class of logo so we'll style it and then we also have an image source and this is images forward slash menu dot SPG are you forgot the names classes menu - button and we'll give it an ID of open menu it will reference that in JavaScript with a click event listener all right and then we're gonna have just a simple section element for our h1 element which is this is fancy and that's all the HTML is I for our little example so now if I take this right click open with live server this is another extension you can install will now see our big eye hamburger menu so we have to style that obviously you get that fixed up so now let's go ahead and I'm gonna hit control B here get rid of this welcome tab and we're gonna split I've our code up here so that our main is on this side and our index.html is on this side all right so I just some real quick HTML to get us our CSS to get us started we're gonna import the font right here so this is the montserrat font from google web fonts and then we're gonna reference body and HTML real quick and we're gonna say font family is that montserrat and we're also gonna say the margin is zero on these elements and any links is text-decoration:none I think is rid of the underlined so next we have up the header element right here and don't worry we're gonna get to this this nav I did say we were done with the HTML but not quite we're gonna get to that after we style this stuff first so we have our header right here we're gonna say padding to e M that's going to push away the logo the hamburger icon menu from the edges and let's adjust the logo real quick we're gonna make it black hyperlink is making it blue currently and also a font way to bold and then also we'll take we'll take a look at the result in a second menu button we got to fix that because it's so large the width will G be just like 18 pixels we're gonna float it to the right and cursor:pointer so that it changes when you hover over it so now there we go my site and our menu just like in our XD template now let's just real quickly reference our section so our section element is just we're going to put padding like four am just a ton here on the desktop version the a twin element we're gonna say font size is 4 a.m. so we're making it big margin in the top and bottom is gonna be 1 a.m. and on the right left will be Auto to Center it and then also width will say like 70% and let's check that out good stuff I like it and then also we will add in we'll put an before the before selector content there's just a blank content border top it's gonna be 5 pixels solid and RGB let me just show you what I did in this initially I said light grey and let me put display:block if we check this out actually like grey is not even bad but if you wanted to adjust it here within Visual Studio code to something else you just hover over the value and then now you can just change you know to wherever you want it changed it to an RGB function there just to control it and there we go alright so that is it for this part alright so now let's make this thing work and initially we're not going to be hiding it initially we're just gonna let it overlay everything so that we can style it as we need to so now let's go back to the HTML for this nav element and again it's very simple we're just gonna copy actually this part because this is basically almost the same thing this is for the X Icahn so I think we called that what was it closed yep and this is going to be a class of close button and then close menu for the ID finally an honor unordered list with a list item with an a element going nowhere this first one is home and then I'm gonna use a span element for the little text underneath that we designed so hurry get back to the choppa there you go good old are onerous warts and ager and I'm just gonna paste that so we have a total of four quickly adjust these about us services and contact awesome so now if we view it's gonna look like garbage oh okay yeah nothing was wrong that was just died because there's a big white X right here and that's why I was confused initially yeah don't worry we're gonna fix this all up as we need to so now let's revert back to the CSS so first we have our nav element that we need to focus on the nav ID of overlay so we're gonna put in nav we're gonna say position and this has a bunch of properties and I'll try to describe some of some of the ones that won't be so obvious so position:absolute is so that it can really just sit on top of all the other existing elephants we want to be able to do that if it was display:block or something like that background of course we know what that does we're gonna make it not black with a block block but black we're also gonna have a width here now we're gonna use a calc function for this because well before I do the width you'll understand why we're gonna make calc functions we're gonna put padding of TUI m and the purpose of that will be to push away the elements like the the X logo for not logo but the X icon to close out from the edges of this element right here so padding of to e M all around so then we're gonna put in a width we want this width of this container to be a hundred percent of the viewport right that's how we designed it but if we do that it gonna give a scrollbars because it adds in 100% plus 4 a.m. on the right and left so you don't want that and also on the top and bottom so you do calc and then we put in a hundred percent minus 40 M very simple you can also with SAS you can do this with variables to make things a little bit more dynamic but I'm just kind of going quick here height we're gonna say calc is 100 viewport Heights and - 4 a.m. as well the same and I find that viewport Heights work better than for height Nod than percentages next we're gonna have let's see a dis next we're gonna leave it exactly as in we're gonna put display:none initially but we don't want to do that because I want to see the result in the browser so now if we do this we have this massive overlay so let's go fix that horrendously ugly icon so the close button class is a width of 18 pixels the same as the hamburger we're gonna float right that's just the same cursor:pointer just the same and eventually we will play opacity 0 on that and there it is so let's keep on going we can see our text right here looks horrendous so let's fix that so we have our unordered list oops why am i doing that and we're not in HTML I ordered list right here list I'll type 9 this gets rid of the bullet points that we can't see currently because it's black on black but it's just good to get rid of them anyhow margin on this we're gonna have at the top we're gonna push it down by 10% and then we're gonna auto the right and left but zero on the bottom I don't want 10% on the bottom so that's why I'm putting all four of these values like that also our padding is going to be zero there is some default padding added on by the browser for unordered lists we're gonna display grid this because we have 4 columns and I like the grid way of arranging columns and such so we're gonna put grid template columns alright and this is gonna be let's see repeat 4 times 25 percent so we're creating I just equal I or you could just do Auto as well really equal for column parts for our navigation and then a width of about 80% so let's see what's happening so far there they are right there now you may be wondering to yourself how exactly did I know to use 10% and all that stuff well I didn't initially I was looking at the browser as I was designing and I decided to add these in to try to structure things and make the layout a little bit better and more consistent with the prototype that would be designed and Adobe XD okay talking a lot so now let's add in the eight elements that are within our our list items we're gonna make them white font weight is bold and font size is 1.4 am so there we go we're getting close also we have our span elements the color is gonna be gray the display block this span elements don't have any type of block elements so that we're gonna do that font size point 7 5 a.m. and margin top is 20 pixels there we go and then finally we will have a reference to the list item of opacity zero but we're not going to do that just yet so this is it for now this is what its gonna look like when it's done animating in the obviously nothing works you can't see the other design it's behind everything right here so let's make this start to work and we're gonna do a little bit of JavaScript now at this point so back in our HTML file come out at the bottom and type script we're just going to do this in line just to make things simple you could obviously link a different jas file but we're not going to do that and so what we're gonna do is first create a couple variables to give us access I t's aliy reference the the the overlay button are the overlay ID and the clothes menu button so we're gonna do var overlay equals document and we have a bunch of methods that we can use one is get element by ID you can see it's the first one selected here alright and so which ID do we want to get well come up here nav ID of overlay this is the one that we want to get so we're gonna say overlay I'm gonna hit shift all in the down arrow key to duplicate that and this one we're gonna name the close menu get element by ID we call this close menu alright so nothing's happening now we just define some variables now we're gonna say document dot get element by ID the open menu we're gonna say add event this is all pure vanilla JavaScript stuff obviously if you're using something like react angular or view and there's going to be a different way to go about this and this deals with class binding that's all we're doing click events click binding and class binding this is the vanilla JavaScript way of doing it so add event listener what type do we want well we want to click event alright so when somebody clicks on one of these elements here or the open menu element rather then we're gonna have something happen so we declare a function and we open it up like this so oh we have to also have to put a comma there so then we'll say what what do we want to happen when the open menu ID is click the open menus right here this is the menu with the hamburger menu that shows up over here on the right that we can't current can't currently see well we want to open we want to open this overlay element up right well in other words we want to attach a CSS class that will apply animations to it so what we'll do is type just type in overlay because we defined it as a variable here we're gonna say dot class list and this is something that exists on these Dom elements here dot add and we're gonna add one called show sorry I was like burping for a second show menu and that's it so then while we're here actually I don't want to get too ahead of myself well just save it right here and in order to make this work we have to make some adjustments in the CSS so the first one is is we're going to have display:none on our nav element this means it goes away and we're back here then we have to create this class that we're adding called show menu so if we come down here we're gonna create this class and it's going to be show menu this is the one that we're attaching when somebody clicks on that button we're gonna say display block because we had display:none initially so let's save this there we go now this doesn't work yet so let's make the close button work alright so for that to work we're simply going to copy all of this alright so this is going to be close menu and we're going to do an overlay class dot remove show menu save it look at that now it's kind of boring so let's matte let's like make the actual animation work we're done with the JavaScript we will never have to touch that again in this tutorial all right might as well I guess at this point just hit X here and that way we can just look solely at all the CSS that we've written so far all right so for show menu we have to ask ourselves you know how do we want this animation to be applied well let's go here and we're gonna type an animation property so we're gonna set in the animation with an animation name we can name it whatever you want we'll just call this slide - menu alright and for a duration of but I'd say 1 seconds that's what we did in the prototype I will make it ease in and we're gonna say 4 words because we don't want it to loop but it just plays the animation and that's that alright so then we're going to go ahead and create our keyframes and we reference slide menu so we're defining the type of animation occurring here from we're going to say transform scale x0 to transform scale X on the x axis to 1 now this isn't going to work just yet because we have to apply a couple properties onto the nav element itself right here and that is transform scale x0 so we're setting it to 0 by default and then also let me just save this and you'll see how the animation plays out it will be a little bit funky looking but then we'll fix it so we click this it comes from the center I so that means we need to change the transform origin transform origin right so it's going to come from the right and scale out so click this I'll look at that now it does look a little silly when everything is by default just being squashed and like coming out I don't like that so let's fix that first we have to set opacity zero on two different elements I believe and the first ones can be the close button so by default it's hidden and the next one is going to be on our list items which contain both the title and that little span element so if we save this now watch what happens it's blank that's what we want initially and then we want the things to fade in and show up so at that point or at this point we simply in here we say inside of show menu the show menu class the close button we're gonna say animation sorry about that show - X that's the name of the animation I'm giving it point 3 seconds you know what let's make it one second and then also we want it to only start animating after this menu has slid in and it takes one second for that animation to come in so we're gonna give this a delay the next property that we could put in the animation property or the next value rather is the delay so you know how this animation executes we'll say one second once this panel comes fully into view and then I will say four words and then we'll create the animation X and this is very simple I'm not even going to bother typing it out it's just the same thing of here instead of transform we're putting opacity 0 to 1 so let's try that watch up here there it goes you can make it slide up to do whatever you want that's what we're gonna do with these elements here so I just I a little bit more bear with me I know we've been eye on this for quite a while now so we'll say I let's see here instead of giving them specific IDs to control when each one animates in I'm just going to use a different way of doing it so we're gonna press a li n of type selector and so the first one this this will be the home link so this is basically saying the first li on--all element that you find so we'll say animation menu item animate and we'll just say annum for that we'll make these about 0.6 seconds forwards and then also we want to put in the delay of one second and then ease in out you could play around with the easing as well the values alright I so now let's create menu item annum so a keyframes that is menu item annum all right we will let's see here we'll just do it real simple from in to and for the initial one and the reason I don't have this one on my my reference monitor so I'm going to do this on the fly we're gonna say transform translate why on the y-axis because we wanted to move up vertically and we'll say 30% all right and then we'll take this will go to also opacity will be zero opacity will be one to zero at its starting point essentially all right so let's save that there it goes 30% wasn't entirely noticeable so let's do more like 60 so let's refresh all right a little bit better okay so now I what we can do is simply take this change this to two three and four and the delay I can be like 1.2 1.4 and 1.6 all right and let's save it look at that exciting stuff so if you wanted to you could for instance make it so that when you click X it will actually I take these back out and you know kind of reverse the effect but I'm not going to do that I that could be their own little project that you can do but it's still not difficult and you just figure out how to do that in relation to JavaScript and CSS classes just to show you another real quick tip in case you're interested if you want more unique sort of animations I we can use bounce jas calm all right and so what we can do is I they give you presets so I what's slinky okay that's silly we would not want our menu items to do that what's swish okay switch looks cool except I don't want it to come in from the left like it's doing so what we can do is change the two properties aren't I making this thing work so what we'll do is change this from negative 300 here to the Y access and we'll make it positive 300 and then also scale there's something funky happening on the scale we'll take this from one and then make this one 15 now it's working how we want it to right way though I understand one thing it looks cool when you're scaling something like this like a rectangle but when you're doing it to text it looks bad it distorts the text I just realized so what we can do is we don't want this it'll just be the element the type elements itself obviously there's many different CSS tools you can use of course but this is just one so if we choose export CSS we don't need the prefixes we can just copy this stuff only the the values and we'll go back to our project here and right down here will paste it and we have to put opacity one on the 0% and opacity one on the hundred percent so now let's save this and give it a shot we're at localhost 5500 I accidentally closed that out so let me just hit go alive again real quick and let's try it out cool stuff all right so just look at that again really fun stuff so you can obviously have I ton of ability to do all sorts of cool things once you understand how to use just basic JavaScript and CSS properties alright so hopefully you enjoyed that we covered a lot but I assume for real for a lot of people watching it's going to be tremendously helpful to see you know not just one aspect of being a designer but seeing both acts aspects come together when you're going from prototype mock-up to code implementation and those are both two very handy skills to have obviously in this day and age alright so make sure you answer today's question which is do you use any tools or plug-ins for CSS animations there's a bunch of them out there there's browser extensions and really cool things so let me know subscribe for sure and I'll see you soon goodbye [Music] [Music]

Channel: DesignCourse

Views: 563,716

Keywords: adobe xd, adobe xd tutorial, adobe xd prototyping tutorial, adobe xd auto-animate, html tutorial, css tutorial, javascript tutorial, vanilla javascript, mega menu, html css overlay, html css overlay menu, animated menu, css animated menu, css animation tutorial, css animation, hamburger icon, animated hamburger, menu icon

Id: 4G9c5swUyOc

Length: 45min 25sec (2725 seconds)

Published: Wed Oct 31 2018