Custom Dropdown Megamenu In WordPress Using Oxygen

hey this is Elijah with the oxygen team and in this video I'm gonna show you how to create an animated drop-down mega menu in oxygen so if you've worked with oxygen you know oxygen does have a built in menu element which is perfect for simple menus but it can sometimes be a bit limited if you want to create something a bit fancier like a drop-down mega menu so in this video I'm gonna show you how to create a drop-down mega menu with an animation from the elements that are available in oxygen and just a little bit of custom CSS so let's jump into the backend and Here I am on a page where I've used our hosting design set and I've used the header and one of the pre-made pages to go ahead and set up a design to work with and you can see in the header we've got a menu element but here we want to go above and beyond so we're gonna actually delete this menu element and we're going to add a div to work with so let's type div in our search box and this needs to be over on the left side perfect now let's give a class to this div because when you're working with oxygen if you think ahead a little bit when you're designing and add classes to things that you know you might want to adjust later it really saves you a lot of work and for this even though we're not gonna have multiple instances of this div where we would want to style them with a class we might need to target some of its child elements in CSS and it will make it much easier if we have a class on there because that's easier to remember then the idea of div underscore block - 116 - 2 so let's click up here by the ID and we're gonna add a class and let's do something that is memorable so let's do hosting menu container with dashes great now we're gonna have our menu items so these are going to be linked wrappers the reason we're using link wrappers is because they allow us to do a lot more stuff like if we want to add icons and things like that we can do that within the link wrapper so first let's click Add in do link wrapper and again we're gonna add a class to this so we're gonna say hosting menu item and let's go ahead and add some child elements so let's go to add and let's just add some text to this and this text is gonna say home great now we have some text we've got the link wrapper so let's select the link wrapper and you can see we have the class selected in the properties pane and let's go ahead and style this let's go to advanced size and spacing and let's add some padding let's do 16 pixels top and bottom mmm that might be a bit much but we'll adjust it if we need to and then let's do 32 left and right to give us kind of a button size yeah that's way too much top and bottom so let's do 8 and 8 and that'll work perfectly okay so we've got that now we need to go to advanced typography and we're going to change the color to white and actually we might go ahead and use this polar color or this white let's use the white from the hosting because it might be slightly saturated to make it fit in a little bit more now we can go ahead and duplicate this link wrapper a few times great now obviously we don't want it to stack that way so let's select the wrapper our menu wrapper menu container rather and let's set it to stack child elements horizontally okay great we're on our way to a menu we want this to be centered with these other buttons here these buttons are not going to be part of the menu because they're kind of called action buttons so let's go and select the div that's wrapping all of these elements including our menu and choose a middle vertical item alignment and that'll Center everything alright so now let's change these links up a little bit let's change this one to say about and this one is gonna be this will actually be where we put our drop-down menu so we're not gonna change that one yet and then this one will say contact okay perfect now let's make sure our styling is exactly what we want so on hover we might want these to do something right so let's go back to one of our link wrappers here and again we have the clasp selected and we're gonna go to advanced effects and then let's do transition and do a transition duration of 0.3 seconds that makes sure that any effects that appear on hover they take 0.3 seconds to transition which would be a much nicer and smoother effect now let's select the state button at the top of the properties pane right next to the class and let's go to the hover state and now we got to figure out what do we want this thing to do when we hover it so one of the you know standard go twos has changed the text color a little bit we can go to typography and we can use this white but change the transparency a bit to make it fade out so now we have a very subtle effect we might also want to go to effects transform and add a slight scale effect to it this might end up being problematic for our drop-down but we're going to start with this and we'll adjust it if we need to so we're gonna do 1.0 to scale because scale can get a little wonky if you do much so let's maybe try 1.05 because we want it to be noticeable but we don't want it to be overbearing so now let's go back to the original state and now when we hover over our elements you can see they change size a bit and say it out a bit okay so it's a nice subtle effect and that's what we're after the other thing to note is because we use classes we just had to do that one time and it applied to all these elements so now we're going to do something a little weird and we're gonna delete one of these menu items because we do not want our drop-down menu parent to be a link wrapper so we're gonna select this class so we can use it for the drop down parent and we're going to select this div our container for our menu and we're gonna add a div instead of a link wrapper which is gonna be our drop down menu item so let's go ahead and add this class to this which is going to give us our styling the same as the rest of the menu items then let's add some text to it and we're gonna call this one services now we can go over and delete this link wrapper that'll get rid of it and then let's select our services menu item and move it over left of the contact okay so now we have home about services contact now in oxygen it's a good idea to frequently save so I'm going to go ahead and save and let it do its job okay now we're getting into the fancy stuff so we're gonna build this drop down menu and to do that we need to do some structural work here so let's open the structure pane and we're gonna see our div selected here and let's hold shift and scroll over to see the full thing let's expand that so we have our text element so this div needs to be targetable uniquely from the other div so we need another class on this so we're gonna call this hosting menu parent item okay that's a little long but I think we'll be able to remember that hopefully all right so let's do that and then we're gonna need another div under this div which will be the container for the submenus so let's go ahead and add a div will see in our structure pane here and it's right where we need it below the text and we're gonna add a class to this and we're gonna call it hosting submenu container now we're gonna add another div inside of that I know we are are kind of opposed to a lot of nested divs in oxygen but for some of the stuff you do need multiple divs and you'll understand why as we get this finished up so let's add another div here and this one's gonna actually be hosting submenu okay so now we have the main one which is hosting menu parent and actually I'm gonna use a a tool I have here for max called unclutter to save all of these so hosting - menu - parent items so I'll go up here and scroll and we're gonna save hosting - menu - parent so that we can reference these later on and then we'll go down to this div and this is hosting - submenu - container and I can actually just copy and paste that work smart not hard right so let's do that one and then for the final div which is the actual submenu we will save that class and you can use notepad or anything else to do this it's good to have a reference and actually when you're designing a site a lot of times I like to make a design system document that lets me know you know margins and padding's and classes and things like that so that I can quickly reference them and keep things consistent because consistency in design can make a very big difference so now I've got my classes up here that I can reference so that will make things easier moving forward now it's time to get everything kind of positioned properly but before I do that to make sure we can see what we're doing I'm gonna go ahead and just add a few items to the submenu so since we're gonna do some icons and kind of a mega menu style we need divs for each item and we're gonna call this we're gonna add a class to this it will be hosting submenu big item okay these are gonna be a little bit larger and contain some more stuff than some of the little items so we'll do that let's copy that as well and put it in our design system notepad and I'm just adding these arrows so that I can understand the hierarchy at a glance okay and then we're also going to add a class for little items too so we'll go ahead and create one of those in a minute but for this one let's do an icon and let's go to icons and I think that this design set uses linear icon SIA so we'll use linear icons here to keep things consistent so linear icons and it doesn't really matter what we pick because this is just gonna be dummy content so let's do that and then let's add another div here because we want some text and some some sub text here so if we want to change our stacking order generally an oxygen you want to add another dip so let's add a text item and then let's add a class to these things so this icon is gonna be hosting sub menu icon let's copy that at class and then go up here and just keep track of that okay and then here we're gonna have this div doesn't need a class I don't think cuz we're not gonna style it too much but this text here we'll want that to be hosting sub menu big text whoops there we go add class and go up here and save that as well okay and again saving that stuff in the in the notepads not a hundred percent necessary but it just saves you some headaches down the road and then we're gonna add another text item it's going to be the sub text item so text and we're gonna call it a hosting sub menu sub text okay and let's add that class whoops you can't actually put the dot in here when you're adding classes which catches me sometimes because I'm used to writing CSS and you always have to have the dot okay so let's add that class and then let's jump up and put it in here okay so now we got a good visual reference for all our classes and we can go through here and start styling this so first on the actual sub menu item big item div we want to stack everything horizontally and then on the give inside of that one want to stack it vertically and that's why we have that dip just to change the stacking order before we style this anymore let's jump up to the hosting sub menu and we're going to set a background color of white and then let's go to advanced size and spacing and let's add some padding let's do 25 pixels all around click apply all and then we don't need any margin or anything but we are going to go ahead and do some border radius so let's do like eight pixels of border radius and then let's add a box shadow to this so let's go to effects box shadow and let's pick a color here and I know this looks kind of funny right now but it's all gonna come together once we have it laid out so let's do zero horizontal offset and then a little bit of vertical offset and then let's add I don't know let's try a big blur at first and then a negative spread of like 15 okay so that looks pretty good alright now we need to jump over and do some styling on that sub menu big item that we created so let's select that and let's go to advanced typography and let's set the font color to this dark blue color and that's gonna give us some readable text here now let's select this icon and let's change the icon size to something more reasonable maybe 32 pixels and then this text let's go ahead and change it and say you know hosting that'll be our first service that we list the font size we're gonna go big with this not too too big but pretty big hosting let's do 32 pixels there as well and then font weight let's go kind of bold maybe 600 and then we want to go to advanced typography and change the line height to maybe 1.2 or 1.1 point over this so that it's nicely aligned with our icon that we've set up now the sub text we're going to say for plans for business great now let's select this and add some advance size and spacing some margin at the bottom let's do 16 pixels nope 8 perfect and then we'll adjust the width of this whole div so that everything isn't so squished as well because here in a second we're gonna work some magic and make this thing an actual drop-down instead of being here and acting goofy like it is right now I've got the icon selected I'm gonna drop that size down to twenty six pixels I think okay so now we can actually select the div that the text is in and let's add some left margin to get it off of that icon a little bit great so now that we have something to look at let's go in and make this thing an actual drop-down so we're gonna select the actual parent div which is hosting menu parent item and we're gonna go to advanced layout and set it to position:relative now let's select the submenu container not the submenu itself but the container and let's set it to advanced layout position:absolute okay so that gets it to where it's not affecting the size of the parent element now let's set the top to 0 pixels actually let's set the top to a hundred percent let's see if that does the trick yeah that'll put us right at the bottom and then left to zero for now we can make adjustments to that later now we have an actual drop down now we need to set the z-index pretty high so let's just do like 999 and now you can see it is a drop down alright so now let's get this thing sized properly we're gonna have to do a couple of things here so the actual hosting sub menu container needs to have some padding so let's go to advanced size and spacing and we're gonna do some padding here maybe like 25 pixels just to space above the actual submenu so next we're going to add some width to this what we can do is we can size the actual submenu here and let's just set the width to like maybe 300 pixels to give us some breathing room and then on this div it's a hundred percent width but we also might want this one yeah that's a hundred percent let's change the size of this text down a little bit to maybe like I don't know 14 don't want to go too small but it is subtext so now let's duplicate this big menu item a couple of times to give us a few items and then we're gonna add some spacing on the sub menu big item so let's go to advanced size and spacing and let's do four pixels on top and four pixels on bottom to give us eight pixels between the items we might also want to add some bottom border to it so let's go to advanced orders and select bottom and then let's go and use this kind of shadow color maybe I'm not sure how this will look so let's try it that looks pretty good but then we're gonna want some padding so let's add some padding on the bottom here there we go so that gives us a little bit of a separator between those items and then we can also do hover effects on these as well so we can go to advanced effects transition and we can do transition duration 0.3 and let's go to the hover State and we're gonna go to advanced typography and we'll do the same dark color but let's do just a slightly transparent version that'll work pretty good so let's jump back to the original state and you might notice that this thing is kind of flickering while we're trying to work with it and that's because hovering over elements like this can be tricky once they're absolutely positioned because oxygen brings whatever your hovered over to the front of the z-index so you can get this kind of in fact and it's tricky so you may while you're designing it you may want to set the sub menu back to static positioning just so you can see what you're working with here okay so now these divs we can actually go ahead and turn into link wrappers by clicking the link button in the properties pane and that'll let us assign a link to those and then we want to make sure everything is aligned to the top like before and then just turn this into a link wrapper as well and this one too and there's our big items now we might want some little items so we can actually let me think we want to duplicate this we can duplicate it but then we'll be fighting some of the big stylings so we may just start with a fresh div or set of divs so now let's go and add some little items to this so let's add a text link we'll just do super simple text links for these and we'll do maybe 16 pixels here whoops 16 and let's go ahead and just add a class and this is an important thing about oxygen you notice that I added the font size of 16 pixels before I added the class in CSS Styles assigned to the ID are more specific than Styles assigned to the class so because I assigned it before I added a class this style is the sine of the ID which means if we add a class and try to change the font size it's not gonna work so if you find that you've styled some elements before adding a class and then decide later hey I need a class on this then you'll want to make sure you clear your ID Styles first so I'm gonna get rid of this 16 and then I'm gonna go up and add a class and we'll call it let's look at our design system here we have big text and then we're gonna do a big item actually so that would be the one in the hierarchy so we're gonna add a new one called hosting submenu little item okay so let's just copy that off you and jump back over here and paste that in okay so now we can style this a little bit so we'll probably want some size and spacing so let's do four pixels of margin top and bottom and let's do let's change the font color to the dark blue that we've been using or maybe maybe a slightly different color we can do a hover effect on these as well so we'll do we'll go to advanced effects and change the transition to 0.3 seconds and then we'll go back to the state and go to hover and we'll do another fade out effect and actually you know what let's do this one in Reverse let's have these faded out in the original state so go to typography which just means we're gonna apply some opacity to this to make these nice and subtle and then on the hover state we'll add the same color with no opacity which brings it up and brings a little bit of attention to it it's very subtle but it's a nice effect now let's go ahead and just change this and this is going to be other services and let's duplicate this item and do Terms of Use and let's do privacy information okay so these are these sub items that aren't as big and prominent let's go ahead and remove the bottom border from this last big item and like we talked about ID styles are more specific in class styles so if one in effect only this item we can go over to the ID and go to advanced borders and do bottom none and that'll get rid of that border so then we only have the divider between those big items which will look a little bit nicer now let's go ahead and go back to the class and make sure these are set to 100% width because it looks like right now they're not okay that looks a little better okay so now we have our basic drop-down set up let's go ahead and change some of this text back up and let's do design okay and let's change these icons real quick to let's go with no that one looks like a backup icon and let's see if we have like a paintbrush or something that linear icons has something like that but I'm not gonna spend too much time looking so we're gonna go with a leaf perfect okay so now we have our link items we can add some more you know hover effects to these if we wanted but we're not gonna go crazy we want nice and subtle and these all do need to be linked up to the appropriate places which you can do by selecting the link wrapper and setting the URL in the properties pane for now we can set these to just a pound symbol and then if we had the pages on our site we could hit the set button and it would give us a list of pages to choose from but for now we do not have any of that let's go ahead and let's put this back to position:absolute now that we're done kind of laying it out so we need to select the submenu container and go to advanced layout position:absolute and then we have it back to drop down mode now is when we get into some of the custom CSS aspects of this type of setup so we need a couple things we need the drop down menu to not be visible initially and then we needed to show up when we when we hover over the parent menu item so we can do that by going to advanced effects opacity we're gonna use opacity here because if we use display:none we cannot animate the appearance so if we use opacity we get it we can do a nice fade effect so we're gonna set the opacity to zero and then we're gonna go to advanced layout and we're gonna set the left to some crazy number like negative nine thousand okay because with it being invisible you can still click the links so we need it off the screen when we don't want to see it now let's jump in and start doing some of our custom CSS so we're going to go up to our structure pane and just at the top of this page we're gonna add a code block and we need to do some CSS here let's drag that up it doesn't really matter where this is at in the structure but I tend to put my code blocks kind of near the top of the page just to avoid losing them and it's also a good idea to rename them so I'm gonna rename this and call it drop-down styles so that I can know at a glance kind of what that thing's doing so now we're gonna reference our design system up here we have hosting submenu actually hosting menu parent item okay so this is the parent and then hosting submenu container those are the two selectors we need so we're gonna do hosting submenu parent item when it's in a hover state by adding : hover and then we need the selector for the submenu container which is here and our little design system note is paying off okay so now when that thing's hovered what do we want to do well first we need its left value to not mean 9,000 so left 0 pixels and we need its opacity actually we can just do 0 we need its opacity to be 1 okay so now we can test that so if we hover over this you can see now that it shows up but it's instant right we don't don't really want it to be instant we want it to be gradual so how do we do that well we can do that with oxygens transition property so we go back over here and find our container submenu container we're gonna go to advanced transition effects transition sorry and we're gonna do 0.3 seconds now let's see what happens all right so it shows up but boy is that fast and we don't want it to move in from the left right I don't want to move in from the left at all so we actually need to define the CSS properties that this transition effects so we want it to affect opacity for sure and now we have a fade in effect let's increase the transition duration this point five seconds there we go now we have now we have a fade in effect but we also want it to move up maybe so first let's set the CSS property make sure we have the top property in this list so that our transition can affect it and then let's go back actually first we need to go to advanced layout and well it the top is set to 100% which is where we want to end up but for now let's set it to like I don't know 300% and just see how far down that is because we want it down a little bit so that it slides up and fades in okay so that's good enough now we go back to our style sheet or our code block where we have this and we're gonna go CSS and we're gonna do top 100 percent which is where we want it to end up so let's take a look at what that looks like perfect okay so now let's save that and jump over to the front end and just see how it looks in action okay so now we have our menu items here that are scaling a little bit and fading and if we hover over services look at that now normally like if you had not wrap this in a container and added that top padding that we have when you go to hover over this you would actually lose the submenu because the main menu is no longer hovered when your mouse gets to about right here so that's the reason for the container it allows us to have some space between the parent item and the submenu without having the chance of losing the menu because otherwise when you got off the parents see it just it goes away so we are in action here we can click these items they have a slight hover effect we can adjust the design all we want we can add whatever we want into these sub menus because it's a div and in oxygen you put whatever you want in divs you could put you know a contact form a login form anything in one of these so while the oxygen built an oxygen menu element is really nice for quick menus that don't need a lot of complexity this kind of a setup really doesn't take too long once you're used to the way you need to structure it and it gives you a lot more flexibility so hopefully this is something you can use in your designs and maybe you picked up a few new tricks during the course of this video so again this is Elijah with the oxygen team and that's how to set up a custom animated drop down mega menu in oxygen using the basic elements that are provided and just a little bit of custom CSS thank you for watching

Channel: Oxygen

Views: 28,445

Keywords: oxygen, oxygen builder, menu, mega menu, custom menu, wordpress, site builder, page builder

Id: r2QgPvhGkBk

Length: 31min 29sec (1889 seconds)

Published: Wed Oct 16 2019