How to Build a Stagger-Animated Hamburger Menu with Divi & Anime.js

so [Music] [Music] [Music] me [Music] hey divination thank you for joining us in this live stream today we're going to show you how to create a stagger animated full screen hamburger menu with divi in the divi theme builder so if you're not elegant themes make sure that you check out divi i've mentioned it in one of the links in the description below and without any further ado let's get to it alright so i want to say hi to everyone on youtube and facebook if you guys have questions make sure to leave a comment uh on both platforms and i'll be checking on those quite frequently so yeah for now let's get started so over here i'm gonna show you guys a preview of what we're gonna achieve within this live stream so you can notice a logo in the top left corner and a hamburger icon in the top right corner now if i click this hamburger icon we have this kind of stagger effect that you can notice on the screen really pleasing to the eye and it's just that kind of advanced effect that you might want to add to your website we also have some toggle items here so we have main menu items but we can also click this icon to have some sub menu items show up and yeah as soon as you exit again these will automatically close so if you open it again the effect will be retriggered and just like that you have this kind of seamless effect that you can use for any kind of website you build really so uh we have a similar kind of outcome on smaller screen sizes so over here i have a preview if i click on it we have the same stagger effect the same you know submenu items and all of these behaviors are triggered on click and yeah we're going to recreate this using divi and the tv theme builder we're combining the best of both worlds we're using some some code in combination with all of these built-in elements so everything you can see over here is built with divi divi sections rows modules and so on and we're combining this with a library called anime um it's a javascript library that you can use for free and we'll show you guys how to incorporate it within your you know design style and within your website itself so let's get started so i'm gonna go ahead and um go to the back end of my wordpress website over here so we're working uh from the divi theme builder if i go to divi theme blur over here i have some templates set up so this one over here the second one where you can see there's a custom header is um the preview that i've shown you guys over here and this is the custom header that will recreate on a separate page um let me just open that page here so we're going to recreate that exact same header over here on this page which has a separate template over here that we're going to start building on so i'm going to add a custom header if you're building this for your own website you can create a global header or custom header it doesn't really matter whatever kind of header you want to build as long as you follow the steps that are to come so i'm going to add a custom header here by clicking add custom header and build custom header all right so when creating a new template you get three options we're going to build from scratch by clicking on the first option over here now this tutorial um will include two different sections so the first section will be dedicated to this logo over here and the hamburger icon and the second section will be dedicated to this entire full screen menu those are the two sections that we're using so we're gonna start off with the first one um as soon as you enter a template editor you'll already notice a section there so i'm going to open these section settings of that section that's already there and start working um you know from that point first i'm going to add a transparent background color so i'm bringing this down to zero opacity and the reason we're doing that is because we have this kind of absolute um header this appears on top of your page content um so it it needs a transparent background color that's why we're adding that to the section settings there we're also removing the top and bottom default padding of our sections so literally what we're doing is we're removing all signs of uh presence of these sections so the only things we want to show up from the section itself is the logo and the hamburger icon and uh yeah to do that we are going to remove all of the space this section takes up by room by adding zero pixels to both top and bottom um padding we're also going to make it fixed so this will you know follow us throughout our stay on the page by going to the position settings of our section and selecting fixed over here top left corner and we're also increasing the z index to 13. now um if i go back over here to the preview if i click this you can notice that this and the logo too but you can see it over here because it's the same color as black so the same as the background color it just merges but um the hamburger icon is showing on top of this section the second section so to make sure that that's the case we need to increase the z index of our first section so the way it works within divi is every section um that comes below another one has a higher z index than the one um above it so lower you go the higher does that index that's basically the point so you can um modify this using the v's building options by just changing the z index so in this case we don't want the bottom section to have a higher z index we want the first one to have a higher one so that's why we're manually changing this to 13. all right now we can add a row so this is the column structure we're going for over here the one that i'm hovering so if i show you guys again this is the option so the fifth one in the first column that's the one column structure we're choosing and before adding any modules i'm going to open the row settings here go to the sizing settings i'm going to use custom gutter with put this to one so we're basically just removing all space between columns we're also equalizing column heights uh 95 percent width of a max width of 100 this just basically means that it will you know stretch the if i zoom out this keeps going there's no max width here we're just making sure that you know it stays on both left and right so the logo stays on left side and the hamburger icon stays on the right side you can easily assign a max width if you prefer that depends on your preferences we're going to remove the default padding of this row as well by adding zero pixels to top and bottom padding so again we don't want this row container to take up any space it's just literally going to serve as a container for our logo and our hamburger icon so we want to get rid of it you know in inside we're also going to add one line of css code to the main element which says display flex and this will just help us keep a responsive view on smaller screen sizes so display flex just um just allows these columns to show up next to each other on smaller screen sizes so this line of css code just does that nothing more nothing less but very helpful all right so now that we have the row settings in place we can start adding modules i'm just going to take a quick look to see if you guys are following along someone's asking hey raphael yeah it's raphael um is it possible to animate the burger icon yes for sure um and it's kind of animated as well because we're changing the way it looks you know when you open and close it but yeah there are tons of possibilities there see people are joining in from facebook as well if you guys have questions make sure to leave a comment i'll be checking out those so yeah let's move on let's start adding modules starting with an image module in column one where we're gonna add the logo let me just grab the logo here really quick we're gonna modify the max width and the sizing settings so we're using 80 pixels on desktop and we're changing this to 50 pixels on smaller screen sizes and we're going to reposition it in the advanced tab so we're choosing absolute and a vertical offset of 20 pixels there we go and we're gonna add a text module in column three this text module represents the hamburger icon so we're moving on to the text tab over here and we're gonna add three spans um each one of these pens represents uh one of the lines within the hamburger icon this will just give us a little bit more flexibility when um you know trying to toggle it and stuff we're going to go to the sizing settings here and we're going to assign a width and height of 80 pixels both we're also using some custom spacing settings and these are all unique according to a different screen size so it's going to be 10 pixels for the top and the bottom padding on desktop and 15 pixels for left and right and then i'm enabling the responsive option and i'm going to switch over to tablet it's going to be 17 pixels here for the top and the bottom and 30 pixels for the left and 10 pixels for the right let me just quickly double check that to see if the values are for sure correct yeah so these are the values for tablet and phone so 30 pixels left 10 pixels right 17 pixels top and bottom all right and we're also going to reposition this particular model by going to the position settings absolute top right corner and there we go now the we're going to style this using um some css later on because we're kind of achieving some different styles on click and when it's not on click so yeah we'll um circle back to this once we've built the hamburger menu and to do that we're going to add a new section let me just add a new section over here i'm going to switch over to wi-frame mode and add a new section regular section and i'm going to open these section settings first before adding any elements if i go to the preview over here you can notice that we have this kind of gradient background where we have this split menu thing going on um we're going to use a gradient background for that so i'm adding a gradient background here and this is the first color code we're using and this is the second one we're keeping a linear gradient type uh 90 degrees over here and 50 for the start and end position this will just create a vertical line which you can notice on the screen right now we're also going to go to the sizing settings and we're going to assign a minimum height of 100 vh vh being viewport height and a max of 100 vh2 then we'll go to the spacing settings and we're going to remove top and bottom padding by adding zero pixels to both options and we'll go to the visibility settings in the advanced app um the horizontal overflow is going to be set to hidden and the vertical overflow is going to be auto so what this does over here and to me it's very important this make sure that a scroll bar appears once the max height is exceeded so 100 100 um viewport height in this case that's very important because we have you know we have a fixed header a fixed menu if something exceeds 100 of the viewport height we want to be able to scroll inside the menu as opposed to just having you know certain items disappear and this is the option that helps you with that auto so if it's not necessary no scroll bar will appear if it's the case a scroll bar will appear and will help visitors go through the other items and we're also going to go to the we're also going to go to the position settings over here and create a fixed menu here as well um top center as a position there and now we can add a row using two columns so i'm going to switch over to wireframe mode just to be able to access it easier um i'm gonna select two columns and i'm going to open the row settings before actually adding modules and i'm going to make some changes to the sizing settings of this row so i'm going to enable use custom gradle width but this is the one equalized column heights a width of 100 and max width of 100 so this means it's touching the borders of my screen at all times um and we've removed the space between the columns we're also removing the default top and bottom padding by adding zero pixels to both options and same as with the section over here within the visibility settings we're gonna set the horizontal overflow to hidden and the vertical overflow to auto all right and we're going to reposition it using an absolute position here top center all right now we also have to style the columns over here you can notice that there's some space and stuff so we're going to go inside each column individually starting with column one we'll go to the spacing settings we're going to use some top padding 24 vh same goes for the bottom 24 vh left and right is going to be 13 percent and we're enabling the responsive options on tablet and phone we need slightly different values for the top and the bottom so 10 vh for the top and 5vh for the bottom and these apply to both tablet and phone then we'll go to the border settings of our first column we're going to use a right border of 2 pixels on desktop let me just grab this color code just to have this kind of separator between them and we're going to bring this back to zero on smaller screen sizes because the stacking order is differently on tablet and phone two columns will appear below each other and instead we're going to use two pixels of bottom border width on tablet and phone so we're kind of creating a substitute there there we go same border color and we'll go to the column two settings where we'll also need a little bit of spacing again 24 vh for top 24 vh for bottom 13 left and right and we're bringing this down to 5 vh on tablet and phone for both options top and bottom all right now we can start adding modules and before we do that i'm just gonna again take a quick look see people are joining in fun right let's start adding modules starting with the first module a text module in column one over here um i'm gonna add some h3 content this this is basically a label which you can notice here as well which helps people know what they can do over there let me just change this to h3 i'm going to go to the design tab h3 settings over here i'm going to use monstera ultra bold so basically now i'm just styling stuff if you like to achieve the exact same outcome follow everything step by step or go to the blog post where you can follow everything step by step or download the json file which is available within the blog post you can find that blog post by clicking on the first link in the description below but we'll go through all of the steps so you basically know how to recreate it entirely from scratch but yeah we're now you know focusing a little bit on styling i'm using a white text color here changing the text size to 1vw on desktop 2.5 vw on tablet and 3.5 vw on phone a letter spacing of 5 pixels and we're using some bottom margin of 5vh and we're going to clone this once and reuse it in the second column so you can notice that here in the previews all we have two of these similar titles of course you'll need to modify um the copy there and now we can add a menu item so to do that we'll add another text module to column one and we're going to use the text tab over here to add different elements to this so you can notice that over here we have two types of menu items we have the ones that are toggleable so i can click this plus icon um and other items appear and i can click the sub menu items and we have just regular ones so we're going to start off by creating one with sub menu items so you can select you can add as many sub-menu items as you want and you can add a link to each one of them so this is the html we're using for that so all of this goes into the content box and you can find this html in the blog post as i've mentioned so go ahead and grab that over there so we're basically just creating different elements within one text module you can notice that here we have the numbering we have the title and then we have the plus icon which will do something on its own and which needs this kind of class so we be we are able to toggle it and then we have the different submenu items so go ahead and grab this and you can reuse this them for all of the menu items you want to have with sub menu items all right so now that we have this in the content box we can make some changes to the style in the design tab so we're using monstera here thin as the font weight 2.7 vw for desktop 4 vw on tablet and 6vw on phone we're using a tiny bit of letter spacing too one point 0.1 em and one em for the text line height there we go we're also using a link text color because all of these are going to be clickable items we're using a white color for it um and then we're going to go to the unordered list text settings over here we're going to use monster again a bold font weight uppercase we're going to change this to 1vw on desktop 2.5 vw on tablet and 3vw 3.5 vw on phone i mean we're changing the line height to 1.5 em and over here we're selecting none and inside this will just help us let me just change this outside inside this this should be it yeah so none and inside and then we'll go to the spacing settings and we're going to create a little bit of space here by adding five percent to the top and the bottom batting of our module now we can reuse this as many times as we want and you know change all of the sub menu items obviously let me just clone this once more and we're going to modify one of these to just be a regular menu item that you can notice over here so if if you don't want to add some menu items to a certain meta item um you can just leave it out obviously let me just show you guys what we're using instead then so instead of using all that html for an item that doesn't have sub menu items we're using this so again a span where we're changing a little bit of the colors um for the numbering here and we're adding a link to the menu item itself so the name of it so you can reuse both of these up to as many times as you want depending on how many um yeah menu items you want to showcase inside your menu so this is column one now we can move on to column two where we're going to add a text module and over here you can add details of your choice let me just grab the copy real quick and a previous over here you can notice a preview we have just like the offices but you can place anything you want really and we're also gonna put these two next to each other so of course first we're gonna change the style over here in the text settings we're using a lot of as a text font let me grab the text color this is the text color we're using different font sizes across different screen sizes 0.8 vw on desktop enabling the responsive option 2.4 vw on tablet and 3.4 vw on mobile and then we're using one pixel of a letter spacing 1.5 vm for the line height and we're changing this to light over here we're also going to make some changes to the h4 settings which is you know the new york over here so the title of is the title inside the vex module so we're just changing the text size over here to one vw on desktop slightly increasing it 3vw on tablet and 4vw on phone then we're going to go to the sizing settings and modify the width so we're using a width of 48 so this in order for you to be able to place these next to each other you're going to need a width that's less than 50 so we're basically going to split a 100 column with uh between two modules that'll each have less than half of 100 of that makes sense so we're just basically assigning a little bit less than the half half of 100 to each one of the modules alongside a display inline block which will allow them to appear next to each other so that's the next step as well we're making sure that um its display property is inline block and we're doing that by adding this line of css code to the main element in the advanced step so display inline dash block will help us you know place two modules next to each other so now i'm just going to clone this and you can notice that it appears next to it and the last module we need over here is a social media follow module but uh basically you can add anything you want for real you can add anything you want within this menu and have it look exactly how you want we're gonna add another one here so instagram or so and we're gonna remove the background color of each one of these individually just to keep the kind of clean look going on and the last one there we go and we'll add a little bit of top margin 5 vh to create a little bit of space between the previous items and this one so now that we have everything in place um we can start focusing on functionality so it is quite important for you to get up until this point so you can focus on functionality and i also am deliberately leaving it to the end so you guys can you know use this approach and other designs that you built so you can add anything you want inside this full screen menu and if i um refresh this over here this is what we have up until now no functionality at all at this point but uh yeah we'll get there first of all the first thing you will need to do is i'm going to switch over to wireframe mode here real quick and i'm going to open the first text module in the first section in the top right corner so the hamburger icon here and i'm going to add a css class to this so i'll go to the advanced tab and add a css class which is called full width open so the reason we're adding a css class is because we want to trigger action um once it's clicked and we're going to identify that action by adding a css class and calling upon it we're also going to add a css class to the second section which is going to be what happens after we trigger action from the first css class which was the hamburger icon so over here the second section in the advanced app we're going to add the following css class which is called full width dash menu and then we'll also going to need to add a custom css class to each one of the items inside the second section so each one of the items inside our full width hamburger menu so we're going to open each one of these individually and they will all contain the same class which is called stagger dash effect and this will just help us create that effect over here let me just re-click this every time we click on the hamburger icon we generate this kind of stagger effect so to do that we'll need to assign that css class to each one of the modules inside the second section all right so let me just do that really quick here if you leave one out it won't be triggered inside the stagger effect so depending on what you want really if you want a certain module to immediately show up without the stagger effect you can do that as well and just skip certain items but if you want everything to be animated you need to add the css sas class to each one of them now the interesting thing is that's basically the only thing we need from a css perspective adding these like say css class to each one of the items because um the library that uh we're using anime you know we'll just follow the order um by default just html wise this module comes first and this module comes last in our html document um so it automatically follows this order where it's first everything in column one then go to column two and um yeah just generate that like effortless stagger effect we're also going to add an extra css class to the menu items in column one and this will just help us trigger the action between the main item and the sub menu items so i'm going to add a space here and add main dash menu dash item to each one of them so in case of that you can always go back to the blog post where you can find everything step by step written down if that helps you get to the final end result you can also download the template json file for free which will help you get started pretty quickly all right now we have everything in place ready for functionality of course we'll need a bit of code and the anime javascript library so i'm going to switch over to wireframe over here and i'm going to add a code module to my first section so i'm basically using a code module to yeah to insert all of my css and javascript code i'm going to start off with the css code which you can find in the description and the blog post in the description below so if you want to copy this if you want to go through everything step by step go ahead and copy this css class and make sure that it's in between style tags so at the beginning and in the end this needs to be in between style tags and then we're gonna add our library which is uh the anime library using um the following source over here you can find this in the blog post as well very important for you to know is that you should insert the script tags with the library before actually inserting your code so the library obviously needs to be loaded before you try to make something work and i'm just going to copy the code that i've written for it and add it right below it so we're doing different kind of things here and i have some comments that show what each bitter piece of code does so there we go each one of these handles something else and you can notice that over there so we're creating variables for each one of the items here um [Music] we're removing not removing but we're just getting rid of the second section on first side so it doesn't show up when people are just you know not clicking on the hamburger icon and then we're opening the menu and we're animating the items at the same time using anime this is the stagger effect over here that we have so we're targeting this um [Music] yeah quite a bit of code you can go through it um you know bit by bit if you want to understand the functionality if you just want to get it done you can just copy and paste it and see the preview so if i refresh this over here and if i click it there we have it the preview this is what we did let me just see what just one second just need to make sure that each one of these has i think i've missed something here in the code i'm gonna grab it quickly but yeah for you guys you can just grab the code in the blog post and the last step would be enabling this over here so the full width menu if you enable this it will just prevent it from loading right away let me just refresh this real quick and there we go and very responsive too and i'm just going to take a quick look to see if there are any questions on youtube or facebook um all right so i see some questions i'm just gonna ask i wanna hey daniel ignacio i hope i'm saying that right i wanted to ask you something that's not related to this designer specific do you use some kind of prototyping software uh fake mascara xd before getting into dv so what's your process honestly at this point it really depends on how complex something is but um i like using photoshop xdl for tutorials in general i just dive into divi directly i love using divi as a prototyping software too also i think it's probably because i know the tool so well i know exactly what every option does so it kind of functions to me in my brain it functions as a prototyping software but sometimes it definitely helps to um to pen things down sometimes i even do it on paper just to have like a kind of structure but most of the time yeah i feel like diving right into tv is is it's great for saving time honestly it helps save time you don't have to go through two processes processes um but it does require you to have like an extended knowledge of divi or a lot of experience basically with the v so you can kind of create a picture a missile picture of the design you have um beforehand and know if something's possible with divi off the pad that makes sense okay so uh is there a way to add a preloader in dv without using that paid plugin which mac showcase for sure yeah i might i'm actually going to write that down to see if i can create a tutorial out of that um you can you can do that and i'm sure there's a some great libraries free libraries out there that help you achieve certain things so i am personally a big big fan of um using free javascript libraries they they kind of you know they require you to have a little bit of coding knowledge but you can do a lot of things um you can do a lot of things with free libraries if you just you know get into code a little bit and if you love web design i'm sure you'll love a little bit of front-end development as well so i'm gonna look into it to see if um i can create some you know free kind of alternative using a library for you guys all right let me just see on facebook if there are any questions don't see any questions but people are joining us so if you guys have any more questions quick quick quick i don't see any more all right that was it for this tutorial if you liked it please give it a thumbs up and yeah i hope you're enjoying this ongoing tv design initiative and i hope to see you in the next one bye

Channel: Elegant Themes

Views: 5,463

Keywords: divi tutorial, divi builder, divi 4.0, divi 4.0 tutorial, divi builder tutorial, divi theme tutorial, elegant themes, business cards, business card design, flip card animation

Id: zrEOrDcwC_8

Length: 40min 10sec (2410 seconds)

Published: Tue Feb 16 2021