Build a Hamburger Menu with Slider Revolution 6

[Music] hey i'm kez bracey and in this tutorial for slider evolution you're going to learn how to create a hamburger drop down menu i'm going to start by giving you a quick demonstration with a preview of this template that i've already built i'm going to go into the mobile preview when we hit the little hamburger icon we get a drop down menu you can hit the x icon to close that menu again this is available at different sizes and then when we are at a normal desktop size we just have a regular horizontal menu so the reason that this is called a hamburger menu is because these little lines here typically three lines look a little bit like a hamburger the reason that hamburger menus exist is that sometimes there's not enough room to have a full width menu on a smaller screen so we hide the menu collapse it into a smaller space and make it available on demand with this touch friendly icon here we can make this hamburger menu with no coding everything is going to be done with visual tools right inside slider revolution we're going to be putting this hamburger menu together in four steps in the first step we're going to create this header area here and the burger button in step 2 we're going to make the menus the vertical drop down menu here and the horizontal menu that we have in the desktop mode in the third step we're going to add animation to our vertical menu so it animates its way open and closed and in the fourth step we're going to connect our hamburger icon to this vertical menu so that it triggers it to open and close when it's tapped all right let's get started so i'm here in the admin area for slider revolution if this is your first time using the plugin then after you've installed it and activated it you're going to see a menu on the left side here which you can click to enter this part of the plugin we are going to be making a brand new module from scratch so to do that click this button here and we're going to use this quick start wizard this guide to help us get started with this module so i'm going to click start guide from here i'm going to click scene we're not making a slider or a carousel so basically everything that isn't a slider or carousel is a scene so we'll choose that and click next step we're going to choose full width because we want our menu to stretch the full width of our website and then we'll click next step and as for how we're going to handle resizing the menu for our four different sizes desktop notebook tablet mobile we're going to choose classic linear resizing and then we're done now we can click go to editor all right now the first thing you're probably going to want to do before you even get started making your menu is to give your module a name so that when you want to add it into a page you can find it easily so we're going to call this one hamburger menu and we'll give it an alias we'll just call it burger menu so now when we want to add it into a page all we have to do is look for the module that's called hamburger menu alright so now let's get started on the actual building process step one is to make the header and the burger icon so what we're going to do is start by adding a new group because we're going to have a site title a button all contained inside this header area so we'll set that up as a group from the very beginning so that we can keep things nice and organized so going to come down here to the timeline and double click and then we can rename this layer to header it's always a good idea to name your layers as you go along to help you keep track of what's going on in your module now let's set up its sizing and its alignment make sure that you have it selected and then come up to the right sidebar and choose size and position you need to make sure that you have this tab active the layer options tab so that you can edit the layer we're going to click this button here to align this group to the top we want it to stretch the full width of our content so you can see this blue dotted line here represents the width of the content at the desktop size to make the group fit that full size we're going to come down to size presets and we're going to choose full width so then that automatically stretches that group out to the full width of our content now the last thing that we need to do is set a fixed height for our group and in this case we're going to give it a height of 65 pixels so we're going to come up to this height field and just enter 65px and hit the enter key at the moment by default this group is just transparent it just has a transparent background we want to give it a colored background though so we're going to select it choose the style button here here are our background controls and we're going to change this from transparent so we're going to click this little swatch icon here this gives us the color selection dialog and from here we can pick any color we like but to make things quick and easy we're just going to choose one of the presets we're going to choose this blue here and then to commit that change we'll hit this tick button so right now by default we are viewing the desktop mode of this module but if we come up to this little area here and hover you'll see that we've got notebook tablet and mobile views as well so we need to start by activating all four of those and we're going to go through and make sure that our hamburger menu works on all four of those sizes so first we just need to toggle all of these on and then to preview how our header area looks so far we can click this button here to switch to notebook view so there we go you can see how that has adjusted its width but it's kept its height and its position for the notebook size we can do the same thing for a tablet and the same thing for mobile and for most of the things that we're going to work on in this burger menu we're going to start in the desktop mode because automatically the settings that you add to an item in desktop mode will be inherited by notebook tablet and mobile mode so generally speaking you're going to start by creating your layers in desktop mode and then make adjustments to the smaller sizes afterwards okay so next up we're going to add a site title in pretty much any header on any website is going to have the title or the business name in the header area so we're going to need to add a text item so just come up to add layer and choose text so here's our new layer let's drag this up into the header group and you'll notice that when i drag the text inside the header group on the canvas it automatically became nested inside the header group on the timeline as well so let's start by renaming this layer also we're just going to name it site title and we'll do the same thing with the content we're just going to replace this with the words site title just a placeholder now let's give it a little styling so we're going to go into the style section we'll leave the font set to be roboto that's fine and the white color is fine as well but we're going to increase the text size so we're going to up it to 25 pixels and we're also going to make the text bold so in this area click this drop down and then you can choose 700 bold so there's our site title that's all the styling we need for this but now we need to fix up its alignment so what we're going to end up with is in the desktop mode the site title is going to be aligned on the left and in the other sizes it's going to be centered the way that we're going to set up this alignment is first we're going to left align this text for the desktop mode then we're going to center it for the notebook mode and the reason that we'll do that is because the tablet and mobile modes can then inherit the alignment for this text from the notebook mode so if that doesn't make sense yet don't worry we're going to step through it so we're in desktop mode right now let's select our site title again we're aligning so let's choose size and position now we're going to hit this button here to push the text over to the left and we'll hit this button here to make sure that it's correctly vertically aligned now we don't want the text to be sitting flush against the edge here so we need to offset it a little bit from the edge so in this field here marked x x represents the horizontal axis we're just going to enter 30 pixels and that's going to offset that text 30 pixels from the left now let's switch into notebook mode we still have the left aligned text which was inherited from that higher size so now we need to override that here all we need to do is press this button here to centrally align our text and now all the smaller sizes will inherit that setting that we just changed we'll go into tablet mode and there it's centered mobile mode it's centered but if we go back to desktop mode it's still aligned on the left so just bear that in mind make your changes from the largest size through to the smallest now we have only one more thing to add to our header area and that is our burger button so we're going to come up to add layer again and we're going to choose button now here we've got a bunch of pre-made buttons that we can use and if we scroll down a little bit further then we've got a bunch of ready-made burger icons that can just be used as they are everything is already set up to trigger animations so there's nothing extra to do you just click the burger icon that you want to use this one is a good fit for the colors that we have going so just click that and that has entered that onto the canvas and you can see the layer down here as well now we can close out this pop-up sidebar now we just want to drag this over to the right here once again that has allowed that to be automatically nested inside the header group and let's rename this to burger button now let's align it we're already in size and position so let's hit the right align button to get that flush with the edge we'll hit the middle align button to get that vertically centered now we don't want that to be right up against the edge because it looks a little bit odd that there's so much more spacing above and below the burger icon compared to how much spacing there is on the right side so we're going to select that now we're going to change the x offset again just like we did with the site title this time the value that we input there is going to determine how far the button is being pushed from the right side so because this is active this field now is going to push the icon away from that right side we're going to offset this by 15 pixels so just type in 15 px and hit enter and now our icon is nicely aligned and we are going to make one more adjustment to this alignment if i select the button again and i click inside this field here we can see that it shows us what the x offset values are on the different sizes and you'll notice that it's decreasing that number and the reason that happens is usually it's very helpful if you decrease the amount of spacing there is on the left and right of items as the amount of space that you have decreases in this case though we do have plenty of space in our header area here so we're going to override those settings so we're going to go into notebook mode and we're going to change that to 15 pixels as well then we'll go into tablet mode do the same thing 15 into mobile mode 15 and now our spacing is consistent across all of our different views all right now we don't actually want this icon to appear when we're in desktop mode it doesn't need to be there because we're going to have a horizontal menu showing by default anyway so we're going to select our burger icon and we're going to go into the visibility section here and you'll see this shows us which of the different views this currently selected layer is visible on we don't want it to be visible in desktop mode so we're going to turn desktop off here so now it's hidden on desktop mode but it's visible on all the other modes so let's save that and we'll have a quick preview of how it looks so far so there we go desktop mode with the left line title and no icon and then we have the center aligned title and the burger icon on all of the other modes all right so that is step one complete step two is creating our two types of menus so we have our vertical drop down menu that we're going to have in our mobile device views and then we have our horizontal menu that's only going to show at desktop sizes so once again we're going to start in desktop mode and we're going to add another group just to help keep everything organized so let's add another layer and we'll add our group we're going to name this one vertical menu we're going to make the vertical menu first then we'll make the horizontal menu so vertical menu and what we want to do is position this vertical menu so that it's directly underneath the header area that we just created so we're going to go into size and position we know that our header is 65 pixels high so if we want this group to appear just at the bottom of our header then we need to have it positioned at 65 pixels on the vertical axis y represents the vertical axis so we'll just change this number to 65 and that positions it along the bottom of our header now we want it to be the full width of our content area just like our first group so we're going to choose size presets full width again we need to add a background color to this just like we have our header area so we're going to go into style we're going to choose background color and once again we'll just choose that same blue and press the tick box now we're going to add in some link items inside this group that'll be the menu items so we're going to go up to add layer again and choose text we'll drag that inside our vertical menu group and just checking down on the timeline here this one hasn't automatically nested itself so let's just drag that inside our vertical menu and we're going to call this one home we're just going to make a home link out of this text now just to pause before we go on editing this text you'll notice that now that we've added something inside this group we can properly see the background color of it in comparison to the header and you'll see that there's not really any distinction between the header and the menu here so to create a bit of visual distinction between the header and this drop-down vertical menu we're going to select our group again and we're going to add a border just along the top so make sure that you're in the style section and then down here in the border section hit the border style drop down and choose solid and then this box here you'll see that there's a little square with a line across the top that represents the top border so we're going to change that top border size to 1 pixel and then we're going to change the color we're going to start with white but we don't want it to be a really strong color we just want it to be subtle so we're going to take our white color and we're going to reduce our opacity so we're going to change that down to 25 opacity and that's going to let a bit of the background blue come through so it'll be a nice blended soft color so we hit that tick box and now you can see we've got this nice subtle line in between our two groups to help give us that visual distinction all right now back to styling our link so this is going to be our home link so first we'll go into content and we'll just change the text so it reads home let's control the style a bit more we don't need to do too much to this the font size is already fine but what we will do is just change it to a bold weight and now we just need to set up its alignment so we're going to size and position you'll recall that a moment ago we set our site title to be 30 pixels from the left so let's do the same thing with our home button we'll change the x offset value to 30 pixels as well then you'll notice that we already have the top alignment button set here so let's change it to be 30 pixels offset from the top as well so 30 from the top 30 from the left gives us a nice amount of spacing around this item now to make sure that visitors to the site know that this is a link it's always a good idea to give some type of interactivity so when they hover over this link we're going to want it to change color so to do that let's select the link and we'll come into this hover section here you can leave these two settings as they are and just come down to the animation drop-down list and change that to enabled and then all we need to do is change the text color so that when the item is hovered over the text color will change so we'll click this little swatch here again we're just going to choose one of the pre-baked colors so we'll choose yellow and we'll hit the tick box so now when we hover over the item you'll see it turn yellow and that will fade in and out as you hover over and then leave the hovering state and then the last thing to do because this is of course a link is to add the actual link functionality so we'll click our link item then we'll come to actions and then there are typically two things that you're going to choose from here one is you might choose a simple link if you click that it will add this pink line in here where you can decide what you want to happen when somebody clicks on this link in the case of a simple link you enter the url of the site that you want the person to be able to visit so that might be something as simple as the home page of your website so if that's the case you might just do something like https mysite.com for example and the other thing that you might want to do is if you are building a landing page of some description out of multiple slider revolution modules then you can give each module an id and then you can add a link to scroll to that id then if you provide the id of a module that's on the same page in this field here the page will just fluidly scroll down to the location of that module within the page but for the purposes of this we're just going to keep things simple and we're going to add a placeholder link which we can do by just adding a hash symbol that hash symbol can then be replaced later with real urls when you're ready to go live alright so let's close that out that's our first link is ready to go let's add a couple of extras so it's more like a proper menu so we're going to select the home item and we're just going to right click and duplicate it we'll come down to the timeline here we're going to rename this layer we're going to call it about we'll come into the content section we'll change the content so that it also says about and now we want to select the item again and we're just going to use the arrows on your keyboard to move this into a better position hold down shift and hit the down arrow key to move it 10 pixels we are gonna move it down 50 pixels so hold down shift and hit the down arrow one two three four five times and then we'll just have one more button so let's right click that one again duplicate and we'll go through the same process we'll double click down on the timeline to rename and we'll call this one contact we'll change the content to read contact and now make sure that's selected hold down shift and hit the down arrow one two three four five times so now that's just about right the only thing we need to tweak here is we've got a little bit less space at the bottom of our group than we do at the top so we're just going to increase the height of our group so we'll select the group choose size and position and we're going to increase the height over here to 190 pixels all right now because the smaller sizes are all going to inherit everything that we just did if we save and preview we're going to see a nice drop down menu on every different one of our sizes so that is our vertical menu all done and good to go now we can create our horizontal menu that's going to show in desktop mode so for that to happen the first thing that we need to do is make sure that this menu does not appear in desktop mode so we're going to select it and then go to visibility and turn it off on desktop mode now with it still selected we're going to right click and duplicate so that we get all of our menu items recreated we don't have to make them all over again let's just collapse these to make some space so now we can rename this layer and we're going to call it horizontal menu and then with the visibility pane still open we're going to turn this one back on for desktop mode and we're going to turn the other three off now we want to put all three of these menu items inside the horizontal menu all in a line so they're horizontal instead of vertical now to make that process easy we're just going to use the shift button and arrow keys again helps us to make sure that we're keeping everything in line so let's move the about link up until it lines up with home and then we're going to move it across until it looks like there's about the same amount of space in between these two items as there is the edge so right now that looks like there's probably a little bit less space let's just move that across one more round of 10 pixels that looks about right now we'll do the same thing for our contact button holding down shift and hit the arrow key until we get in line with the other two items and then across to the right until it looks like we have about an even amount of space now we're going to want this group to sit up here inside our header which means we want it to be the same height as the header so let's select it and we're going to go into the size and position area again and now we're going to change the height to 65 pixels to match our header now you'll notice here that our menu items are now a bit out of line so let's just select each one of them and vertically align them this is another one of the reasons that we're using a group because it gives us something to align all of our items relative to so these are vertically centered now relative to the group that they're sitting inside of so groups are a really helpful tool for alignment and now because we only need about this much space to fit these items into the header we don't need all of this width so we're going to make sure we have a horizontal menu selected and then we're just going to drag in this right edge and now what we want is once again to make sure that there's about an even amount of space so we want the space here on this right side to roughly match this space and this space okay so now we want our menu to be positioned up in the top right corner so all we need to do is hit the right align button and the top align button and now it's in the correct location and just for good measure because we already have a blue background on our header group we don't really need a blue background on the horizontal menu group as well so we're going to go into style into our bg color and we're going to clear this color to turn it back into a transparent group all right so now let's save and preview okay so there's our horizontal menu in our desktop mode and we have a vertical menu in our notebook tablet and mobile mode that's the first two steps done those two steps are the longest steps steps three and four are pretty quick in step three we're going to add animation to a vertical menu so that it can animate its way open and animate its way closed the largest size that we have our vertical menu on is the notebook size so we're going to switch into that we're going to select the vertical menu group go into the animation section and there's already a pre-built animation that you can just apply to this that will handle opening up the vertical menu automatically for you so go to this in button here and hit the drop down and then in here we're looking for masked transitions so click that to open it and now what we want to use is slide from the top and you can see how that makes the whole menu just slide down from the top and it fades it in really smoothly as well if you want to see that play again just move your cursor off that item and back onto it so we're just going to click that and now that animation is applied and if we hit the play button here we can preview that animation running and there's only one thing that we want to change here because we're using this to reveal a navigation item we want it to be fairly snappy we want the animation to run long enough that it doesn't look rushed but we also want to give people what they're looking for without making them feel like they have to wait right now our duration setting down here is 1200 which is represented up here in the basics panel as well we're going to reduce that down to 800 and that's just going to make that reveal animation just a little bit snappier so that handles the open animation we're also going to need a close animation to hide the menu again so to do that what we can do is locate our layer on the timeline and then go up to the end here and click the out animation that will turn up blue and that's when you know that you have it properly selected and then all we want to do is reverse that opening animation so we can come up into the basic section and you'll see we have this item here reverse in so that just plays our opening animation backwards so we're going to turn that on and then we want the duration to match the duration of our in animation right now it's set to 300 we want to change that to 800 so now the animation being played in reverse you see it slide up and go away is going to take the same amount of time as the animation opening so that is step three handled we've got our animations in place and now all we need to do is step four where we connect our burger icon to the vertical menu and make it trigger that opening animation okay so let's select the burger icon if you're having trouble selecting it up here you can actually just come down into your timeline expand the header and then select the burger button directly from the timeline here now we're going to go to actions we're going to add a new action by clicking this button here you'll see that it has already added a click interaction for us which is exactly what we want when we click on the burger icon it opens up the menu but we're going to change the action type from simple link and we're going to scroll down and we're going to choose toggle first or last frame and what toggle first or last frame does is every time you click the button that you're adding this action to it triggers another layer to play either it's in animation or it's out animation so with our vertical menu we've set up our in animation to show the menu and we've set up our out animation to hide the menu so this toggle is going to switch between those animations to create the opening and closing effect so now what we need to do is target the correct layer so we have this target layer box here we'll hit this drop down and it's going to show us all the layers that we have in our module we want to animate our vertical menu so we select our vertical menu here and you can see that that has worked because in the background you'll notice that a pink highlight was added around where our vertical menu is you've got the pink highlight around the button as well so that shows that these two are connected so now we'll close out of that and that is everything that you need to do to make this work so let's save and we will preview and now when we click our button there's our opening animation so that toggle has jumped straight to that first frame of our layer and played the opening animation now when we hit the button again it's going to jump straight to the out animation of our layer and it plays that closing animation and now that is going to be the same on every one of our sizes here except of course our desktop size where we have hidden these elements now there's one more little tweak that we need to make here if you watch closely when i close this vertical menu for a moment you'll see a sort of a flash on the menu items there you go did you see that i'll just show you one more time you'll see them just briefly fade out for a second and the reason that's happening is because each of our menu items has this really short little fade animation applied to it by default so what we need to do is just eliminate all animation on those text layers now we could have actually done this at the start of the process when we were creating our menu items but i wanted you to see that effect first so that if you come across it when you're making your own modules you know what's going on and you know how to correct it so i'm going to select the in animation of one of our menu items here and i'm going to come up to the in animation drop down let me just collapse this from before i'm going to go into simple transitions and set it to no animation and then do the same thing for our other menu items so same again in simple transitions no animation and then for our third one as well in simple transitions no animation now we'll save and preview open up the menu and close it and now we don't have that brief flash of the menu item just fading out for a second and that is now our completed hamburger menu so to recap we've got our desktop layout done with a regular header a site holder that's aligned on the left and a normal horizontal menu on the right and then in our other views we have an automatically adjusting layout with a centered site title and an expanding and collapsing hamburger menu that works on all three of our mobile device preview sizes so that is just one example of the kind of rich interactive content that you can make using slider revolution without needing to write a single line of code everything done with a visual interface and without needing any prior experience anybody can learn how to use this tool to make any kind of website that they like alright so i hope that that comes in really handy for the next website that you're working on thank you so much for taking the time to watch this video and i will see you in the next one [Music] [Music] start your slider revolution 6 experience now the world's most powerful wordpress builder

Channel: Slider Revolution

Views: 9,030

Keywords: WordPress, Webdesign, Webdevelopment, Plugins, Slider Revolution, Tutorial

Id: iiUe9ffjIYw

Length: 31min 21sec (1881 seconds)

Published: Mon Jan 11 2021