How to Build an Elegant Modal Menu in Oxygen

0:00:00
What’s up everybody? We’re going to do a quick tutorial on how to build an elegant modal menu using Oxygen’s native modal element. And we’re going to model this after the menu that I built for Automatic.css or Automaticcss.com, I should say. Also, there’s a little bit more to it. We have to build two of these. Really, we’re just going to build one and duplicate it, but we have to have a menu for logged in users. And we have to have a separate menu for logged out users. And I’m going to show you how to use Oxygen conditions to display based on the person’s logged in status. All right, so let’s go ahead and get right into it. I’m going to share my screen with our training site here. Let me see if I can get my width to where I want it to be. And then actually what I have to do, hold on, let’s come back here and zoom up to windows. Okay, now we’re ready to rock and roll. I’ll just edit that out. How about that? Okay, so here’s a blank slate. I’ve got a black background. I’m in my primary template where your navigation and header and footer and all that stuff tend to go. So I’m not showing you getting into that. I just want to tell you upfront, that’s where I am. I am in the primary template.

0:01:17
So I’m going to go ahead and add, we’re going to add a header builder. And I’m going to drag that header builder up to the top. There it is. And then I’m going to add an icon. And this is going to be the kind of that hamburger icon. So I’m just going to add an icon element here. And it’s going to default to this little thumbs up. I’m going to go ahead and do linear icons. And I’m going to type in bars. Nope, it’s not as bars and font awesome. I don’t know what it is. It’s not hamburger. I don’t think that’d be too easy. Let’s just scroll down and find it. I’m trying to find the exact one I use. Why don’t I actually show you guys what we’re going to build first? So this is what we’re going to build. You see this little hamburger icon right here? We’re going to click on that. We have this pop up menu. And we have all the links that come in. Now that’s if you’re logged in. Now let me show you. And actually right here, you’re going to see there’s a little link. This is log out. So I’m going to go ahead and do that. I’m going to confirm that I want to log out. We’re going to go back to automatic CSS.com. Now I’m going to click it again. You see a different menu. Right?

0:02:21
So this is a nice little elegant menu. And it’s got links that animate in, which is pretty cool. And it’s got a little strip down here for some copyright stuff and legal links and all that. It’s kind of a nice elegant menu. It’s also super responsive. So if I go to inspect the inspector here, and let me click on our mobile, see, you know, however, whatever size it is, if it’s on a desktop, it kind of attaches itself to that top right side. And then as you come in, you’re going to see it flips to being centered. And then it starts to stack. And of course, you know, that’s not even a device with. But you get the point, right? So nice and elegant, nice and clean, nice and mobile responsive. That’s exactly what we’re going for. Okay, so here we are. Let’s find the icon. All right, where we were we were we were we this is one of them, but that’s not. Oh, I wasn’t in linear, I guess. And I wasn’t in font awesome either. Did I use one of these? No, that’s old. This is my old training site. I don’t know if I have the exact one. Let’s just put in bars here. I know it’s called bars and font awesome.

0:03:32
I don’t really like this icon, but I like that. Doesn’t this one look like much more modern, you know, and like in your face, a little sharper. All right, so what I’m going to do is make this white. First, we need to on our header. Let’s make our header black so it actually matches the rest of our page. So I’m just going to do BG black. And then the icon I’m going to make that white. And then you’re going to notice, so first let me make this a little smaller. So it’s more in control. You’re going to notice that there’s no padding by default in the header anymore when you’re using automatic. CSS. And that’s because you control the header padding by coming over to one of your header rows. Not the header builder. It’s important. Header row. Grab the row. And you add a pad header class. And you’ll see that you have all the standard sizes. So I’m going to do pad header M. And there you go. Your problem is solved. Now what I’m going to do is I’m going to drag that icon into the row right column. Or I’m going to attempt to anyway. There we go. All right. And then what we’re going to do is start to build our modal.

0:04:38
And we have to figure out first, like how do we even trigger the modal? So we’re going to talk about that. I’m going to go ahead and save my work. I’m also going to view on the front end just to see what we have so far. So there we have an icon that’s floating up there and it looks like it’s supposed to do something. But of course it doesn’t do anything yet. All right. So now what I’m going to do is add our modal element. So I’m going to add modal. And it’s going to throw it way down here. And there’s some kind of unique things about the modal. You know, that oxygen does like it does in many cases. It tries to do things for you. And it styles some things at the ID level. And because of that, sometimes people add a class to the modal to try to style it. And if you want to, like we’re only making a menu, I’m going to do classes because we’re making two menus.

0:05:28
We’re making a log.menu and a log.menu. If you’re only making one menu, maybe you don’t need a class because it’s in the template. And it’s only showing up in this one place. But I’m making two menus. And I need them to look the same. So I’m going to use classes. And sometimes your classes won’t override some of the modal behavior because it’s pre-styled at the ID level. You can see already the advanced tab is highlighted. And one of the biggest thing really is this percentage width 70%. So I’m going to go ahead and clear that out. And you see that’s, I think that’s why they pre-styled it. But still, you know, I think they could have figured out a better way to do that. And I’m going to add a class. So this is going to be nav modal, just like that. And then I’m going to go ahead and put my own width on it.

0:06:11
This is going to be 95%. And then my max width is going to be in rims. And I’m going to do probably, let’s do 720. Just see what that looks 72. Sorry. All right. That might be good to start with. No, let’s do 96. Okay. That might be too big. We’ll figure it out as we go. All right. But anyway, the reason I’m doing 95% is because 96 max width is going to make this look great on desktop. The size that I want. But on mobile, as it scales down, I don’t, I want there to be space between the two.

0:06:45
I want there to be space between the left and the right side. If I had this at 100%, then when it went down to mobile, because this is not in a section, right? So there’s no default padding constraining it in. So when I go down on mobile, you’re going to see it touches the sides. And this is just a gap in the builder over here. But this is actually touching the side of the device over here, the side of the device over here. So by placing this at 95% or even like 92%, you can ensure that you don’t touch the edges on mobile. So I do the max width for the desktop, and then I do 92% to constrain on mobile devices. All right. Next, we’re going to do padding. And so we’re going to hook into the automatic.cfs system.

0:07:33
So we’re going to do var space. And I’m probably going to put a lot of, you know, pretty healthy amount of space in here. We’re going to start with space L and just see how that goes. And then I’m going to add a div. Now let me look at our reference here. We’re going to need, this is going to be grid in the middle, a two column grid. This menu thing is just going to be a little text label. So I’m actually going to grab my modal again, and I’m just going to add a text element in there. And that’s going to say menu. All right. And I accidentally just pulled that into the modal div, which I don’t want to do. It needs to be out there. On top.

0:08:11
Okay. So that’s good. And then if you look at our reference, we also need this little copyright line down at the bottom. So I’m just going to duplicate this. And I’m going to drag it down to the bottom. Perfect. So now you can see that we have our top thing, our bottom thing. Let me just go ahead and copy that. And we’ll paste it in. Perfect. Now let’s start giving things classes. Okay. So this is going to be nav modal double underscore heading. This is going to be nav modal double underscore footer. And then this is going to be nav modal double underscore grid.

0:08:55
And we’ll do, we’ll just do inner actually. Let’s just do inner. All right. So what I’m going to do now is I’m just going to add a little margin to the top of a couple of these elements to space them out. So margin top here, I’m going to do var space L. And no, that’s too much. Let me do M. And then on this copyright, I’m going to do margin top the exact same, just like that. So now these are nice and spaced out. This one, I’m going to use the grid builder for. We’re going to do column count to. And we are going to actually, let me see our reference here. Okay.

0:09:31
So that is equal columns. And then we have equal columns on the logged in version as well. So that is all good. Okay. So grid column count is two. I’m going to hook in for the gap. So this is going to be var space M for the gap. My minimum width is going to be zero. My max width stays at one FR. And I am going to stretch these. I’m going to stretch both of them. This gap here is also going to be var space M. And then I am going to add a div. And a div. And then I am going to automatically right away, just come in here and figure out where my break point needs to be.

0:10:09
Probably right there. Maybe even this one. Like that’s maybe even that one. We’re going to have to play around with that in a minute. I’m going to break it right here for now. And if that’s too much, we’ll come back and fix it later. And I did figure out that it actually doesn’t, even though it looks like it resets these to 200 and to 20 pixels, I don’t think it actually does. And that’s why they’re grayed out. So don’t freak out if you see that. I did a tutorial on YouTube and I was like, you know, to be sure, like come and do it all again. Everything you just did at the other break point, I actually don’t think you have to.

0:10:46
I think it’s fine just setting it to one and it retains everything from the desktop version. All right, so we’re good there. Let me add a link. And this is going to say home. So it’s going to be home my account, support community, a new home. And then I am going to add a class to this real quick. So we’re going to say nav modal link. Yep. And cool my account support community contact. All right, so duplicate duplicate duplicate. My account support community. Contact. All right, now because I gave these a class, I can go add a hook, var space, M.

0:11:32
And what did I do? Oh, this is still on VH. Okay, there we go. And that is way too much. All right, S is perfect. All right, so we’ve got this spaced out. I’m going to install them a little more too while we’re here. So we’ll do typography. Color is going to be var, shade. Let’s just do var, shade, black for now. And we’re going to do the hover. And we’re going to do the hover. And we’re going to do the hover. And that is kind of all we need right now. All right, cool.

0:12:03
So let’s tackle this thing. Because you see there’s menu, it’s lighter, it’s smaller, it’s all caps. It’s got this underlined thing. And that’s what we’re going to do. And that’s what we’re going to do. And that’s what we’re going to do. It’s smaller, it’s all caps, it’s got this underlined thing. The underlined thing actually fades out. And then the underlined is way over here attached to the side of the modal. So for a lot of people, that might seem like, whoa, you know, I don’t quite know how to do that, especially since you already added padding. Like, how do we make this ignore the padding that’s in this modal. We’re going to use pseudo elements, and we’re going to use absolute positioning. All right, so this is the heading.

0:12:43
It’s already got its own class. I’ll do the easy stuff right away. We’re going to do a upper case on that. We’re going to do font size, var text s. That’s going to bring it down to make it smaller. It’s going to be var shade, like medium, probably. Yep. And then we can go ahead and do our after. All right, so after is going to be layout, position absolute. And then we’re going to do size and spacing. The height is going to be probably like 1.25 pixels. Somewhere in that neighborhood. Pixel is okay in this regard. It’s such a small little, you know, nonsense element. It doesn’t, doesn’t really matter.

0:13:26
All right, so height is that. Let’s do with it like 70%. I think something around there might help. And then we are going to position it. So we did absolute, but we need to do like bottom zero and left zero. And then we need to go to our main thing, which is our text, the main class, and that’s going to be layout relative. Okay. And we still can’t see it. All right, so let’s go to after. I didn’t give it a color. It might help if it actually had a color. Varshade, medium. That would help if I could spell medium. All right, there’s our thing right there.

0:14:09
All right, now the way that I got it to feather after. I got it to feather out was just by, instead of giving it a background color, you just give it a background gradient. So I’m going to go to my after, my background. I’m going to grab that color and delete it out. And I’m just going to go to the gradient area. And we’ll do that. And then fully transparent. And let’s look at it. Okay. And we, I believe we need. Go to my after. Background gradient. Okay. Angles 90 degrees.

0:14:40
And then let’s do like 70%. Well, not 790. 70%. Let’s save. I’m not even going to be able to see it on the front end yet. Okay, there it is. It’s, yeah, it’s fading out. So we need to refine it a little bit. Instead of, let me go to my after. Instead of shade medium, that probably needs to be more like shade light. Yeah, there we go. Perfect. Alright, so now what we need to do is get that underlying to be over here, kind of attached to the, to the modal. Now, you could make the modal, the relative parent, and then put left zero.

0:15:19
And it’ll automatically attach itself. The problem is, then it’ll attach itself to the top or the bottom of the modal as well. And you’ll have to position it away from the top and the bottom of the modal, which as the response of this happens on, on mobile, this will actually, this element will actually move a little bit. And then you’ll have to constantly at every break point, like reposition the underlying, whereas we attach the underlying to this element itself with the pseudo element, then it’s fine. It’s going to stick with it wherever it goes. And then we just have to make it look like it’s attached to the left side of the modal, which is actually pretty easy. So we’re going to go down to the after. We’re going to go to layout. And instead of left zero now, we’re just going to do minus, like, 10% or something. It doesn’t have to be perfect because literally the modal, and you can also verify this, you can just go to layout on the nav modal and just do overflow hidden.

0:16:14
And whatever extra is over there is just going to get cut off anyway. And then you can just deal with like how long that is. Like I chose 70%, which is just fine. I think it might actually be a little longer there. It might be like 80 or 90. That’s more like 75, 80, something like that. But it’s up to you. And you can still make that after, remember, we put a width on it. So we did 70%. If I wanted to be longer, I would just say 90%. And now it’ll stretch further into the container. You can even go above 100% if you wanted to. So you just need that line moved over enough so that it touches the edge. But if it goes over the edge, you don’t have to do a mathematical equation and figure that out. You just got to make sure it’s touching because the rest is going to get cut off.

0:16:59
All right, so that part is good to go. Where’s our reference? Okay. So we need to do our little tag line down here now. We’ve already added a class to it. We’re just going to go var shade medium so that it’s also kind of grayed out. And we’re going to do var text s. So it’s small text. And then we’re going to take this little legal right here. And we will just pop a link in there. And I’m just going to put a hashtag for now. And then we can style that link as well. So let’s do, I believe we can just use a link class link shade medium. There you go. Just like that.

0:17:43
So now it looks like that. Another way you could do this, by the way, is let me just delete that real quick. If you want to like fully style that, let me get rid of that link shade class. Because like I want to underline it too. So I’m just going to write it again legal. And I’m going to double click it and hit the span tag. And now it’s going to add a span to it. And now I can do whatever I want to that span. So we’re going to add a link wrapper to that span, which in oxygen, because it’s oxygen makes it disappear. But now I have an actual link. And I can say var shade medium. And my hover color is var, sorry, primary hover. So that’s all good. And then I can go to typography underline.

0:18:30
Whereas underline, underline, there it is. Okay, cool. I’m going to hit save. Ignore the fact that you can’t see it right now when we. Seat on the front end, you’ll, you’ll see what happened. All right, next is this little box right here. So buy the framework like that. So we’re going to call this nav modal. And this is going to be CTA. And that is going to have a background color of var shade, shade light. Ultra light. Yeah. And then we’re going to do padding on that. So we’ll do var space M. And we’ll apply all.

0:19:14
We’ll add a heading. We’ll pop that in there. This is going to be an h4. And then we will add text. That text is going to say this. And that text is going to be small. Remember, this is the only double dash. This is the only element of its kind, right? So this isn’t going to be in the other menu. So I don’t really need to use classes here. I can just kind of use utility classes, speed things up a little bit. Margin bottom M is quite a bit. Let’s do margin bottom S. And then I’m just going to grab that whole thing. And because it’s like right here, I’m not going to bother with utility classes. I’m just going to vertical middle.

0:20:04
And then I’m also going to kind of do that here. So we’ll do vertical and middle there as well. Okay, which didn’t actually do anything. Vertical middle. Okay, we’ll figure out why I didn’t do anything in a minute. All right, so let’s go ahead and round the corners there. So I can just hook in. So we’re going to go borders. Var radius. M. There’s my rounded corners. I’m going to go ahead and hit save. I can definitely tell this modal is much wider than the other one. So we’ll go to size and spacing. And we’ll do 72 again.

0:20:46
That gets me something that’s much closer. And then on the modal itself, I can actually go to borders and also do a var radius. M. That gets me rounded corners. I should also probably do a shadow on this. Let’s do it. Well, you’re not going to see it on the black are you. But I can do box shadow. M. And I can save. Okay, so we’ve basically built the modal. I think that’s a little close after layout. So from the top, oh, from the bottom. Okay, so let’s do. Rim and do minus point two five.

0:21:26
And that’ll pull it away from the bottom a little bit more. So that we’re not quite so close. Okay. Great. So let’s look at our reference. We’re pretty, whoops, we’re pretty close to where we need to be. All right, let’s go ahead and get it triggering. So if I go into my ID level on the modal, I’m going to get these options right here. You see trigger content styles, modal styles and closing. First thing I want to do is go to trigger. And we are going to say user clicks element. Now you can do this with a class. But the problem is when I do it with a class, it doesn’t behave properly. Like when you try to close it, it does like a double flash kind of thing. If you use the ID of an element, it doesn’t do that.

0:22:14
But you are limited to only opening it with that one element. I have to ask Elijah about that and see, you know, if that’s a real bug or from doing something wrong or what. I don’t know. But what I do know is if you get choose and you come up here and just click on the thing, it’s going to put its ID in and then it will work very smoothly. So when user clicks that icon, it’s going to open our menu. Let’s go see if that actually happens. So here we are on the front end. I click it and it opens. Problem is when you hover over, nothing is happening there. So what I want to do is come to this icon and go to hover and then custom CSS cursor pointer. And if you ever want to make a hand icon when you hover over something, it’s called a cursor pointer. All right, so we save. We go back. Notice I didn’t even need to really give that thing a link class.

0:23:09
Now when I hover over it, you see the little hand show up. That’s the pointer. Now I click it and I get that. Perfect. Now I can click anywhere out of there and it closes. The problem is if you look at our reference, there is an X. And the X kind of gives people that notion that they can click there and close. And it is real functionality. If I click, I’m clicking right now inside of here and nothing is happening. So you do actually need a close button. So what we’re going to do is go back. We’re going to click on our modal and I’m literally, don’t you love that whenever you click out. It just, it just, yeah, decides to move stuff around on you. All right, so I’m going to click on my modal and I’m literally going to add an icon anywhere. It does not matter because this is going to be a close icon. So I’ll do nav modal, double underscore close icon.

0:24:01
Perfect. This is going to be a cross. No. All right, and font awesome. It’s called a cross and linear. I don’t want linear icons. Oh, that’s what it’s. It’s icon moon is what I have on my other. I was like, why are the icons so thin? It’s because this is linear icons. I’m used to seeing icon moon right there. All right, let’s do font awesome. I just want an X like how hard is that? Okay, I can’t get an X. I know they have one.

0:24:28
You just can’t search for it, I guess. All right, pardon me. Well, I just go through this menu here. It’s usually called a cross. I can just where they have one and font awesome. I know they have a check. Yeah, they really need to improve this search. All right, let’s just use this one through it. All right, so we want that one or this one times circle. Let’s do let’s do this one. I like this one better. All right, var shade medium. Probably going to have to be light on that as well. Yeah, I think so. All right, icon size 24.

0:25:17
Perfect. Okay, now let’s make sure that’s actually too small. I’ll make it bigger in a second. So the modal, I do need to go to layout. Let me make sure I did it. Let’s do it on the nav here. It is that’s a relative. So we’re good to go there. Let me make this icon a little bit bigger. Maybe try 36. And then literally all you do is go to layout. Absolute. And now it’s out of the flow of the document. We’re going to go 5% from the top, 5% from the right. And it’s exactly where it needs to be.

0:25:48
And then if you go to your modal, if I go to the ID and I go down to, true closing, here we go. It tells you right here, elements with oxy-close-modal class will act as a close button. So you just have to click your icon oxy-close-modal. Enter. That will now act as a close button. Our 5% from the right is not even from the top. So let’s try to reposition that. What happens if I put zero? Is it touching? Yes it is. We do 2.5. That looks a little bit better.

0:26:30
Like 5 and 5 should be even. I don’t know why it’s not. All right, let’s go to layout. Let’s just do 3. That’s good. Let’s test it. Then we’re going to get to the fun part. We’re going to do all those animations and all that. Okay. And guess what this needs? It needs a hover. And it needs a custom CSS cursor pointer. Save. Load. Test.

0:27:02
Got it. We’ve got our functionality. We’ve got everything we want. Now we’re going to handle. Yeah, I mean, we’re rated. I think we’re ready to do the fun thing. Right? The fun thing. Oh, no, no, no. We have to position it. Before we do the fun thing, let’s position it. So I’m going to go to nav modal. We’re going to go to modal styles now. And we’re going to use this top right corner positioning. And then because it’s automatically touching the edges.

0:27:29
Now I’m just going to go add some margin. And I’m just going to do percentages here. Just kind of like we did with that little icon. Let’s do two and two. Okay. Save. Now let’s check that on the front end. There you go. So there’s your nice clean behavior. Oh, problem is that’s not going to behave well if we use a percentage. So let’s do rim and rim and save. Still it too. Let’s make sure that that behaves. All right. Now it’s going to act like it doesn’t look right because it’s going to go under the nav.

0:28:10
The admin menu bar. But if we go private window and look at that. You can see that there’s definitely space there. So that’s not a problem. And then as I bring this in, it stays to rim at all times. So we’re good to go. Cool. I can actually make it three just to give it a little bit more breathing room. And now we need to deal with it on some break points. So here is probably where I wanted to actually center. So what am I going to do? I’m going to go back to Models tiles and then modal position here. And I believe that’s where it keeps. No, it doesn’t. Okay. So I’ll keep it in the top right.

0:28:49
And what we want to do is. Forgot how it positioned. I think it’s using Flexbox to position it. So at this container below, let’s just do a auto right and auto left margin. And that should be the behavior that we want. And then I’m just looking at it as it goes down. It’s going to be automatically responsive because we built it with automatic. Right? So I don’t really have to worry about all that. I just have to worry about its positioning. So I think we’re good. Let’s test it out on the front end. All right, there we are. We can close it. We can open it.

0:29:28
We can bring it in. And that’s where it pops the center. And then it stays responsive the rest of the way. I think we’re good. Okay. All right, let’s do the fun thing now. We’re going to animate. And the way we’re going to do this is with classes. All right. So an like specific animation classes. We’re also going to go to we’re going to use we’re going to steal code. No, we’re not going to steal code. We’re going to go this awesome service called anamista. And what anamista does is it literally gives you the code for a bunch of really cool animations. You get to preview them ahead of time.

0:30:05
I’m going to go to entrances and I’m going to go to slide in blurred. I really like this one. And then you can use slide in blurred left, which is what we want because we want it to slide in from the left hand side of this model. So I can choose instead of a circle. This doesn’t really matter. Text, but that’s what it would look like. Right. If I replay, that’s what we’re getting basically. Now we have to do a little bit of stuff on our own because we don’t want all these to do the same exact thing. Well, we want to do the same exact thing, but at different times. All right. So what I’m going to do is click this little button over here. And that is going to give me two sets of code. One is keyframes. That’s for the animation.

0:30:45
And one is a class for the actual animation. I want the keyframes, but I actually don’t want all this nonsense here. I just want that. I’m going to copy that. And I’m going to go to manage style sheets. And I’m going to add a style sheet that’s called animations. And I’m going to make a comment. And that comment is going to say slide in blurred left. Just so I know what this, all this nonsense I just pasted is, right? These are all the keyframes for the animation. Next, what I’m going to do is go do, instead of grabbing this class, because I want to use a different class, I want it to be more in line with automatic type stuff, you see it has slide in blurred left, but there’s no animation, right? And I haven’t decided on a naming convention for these yet. I want to put a lot of these inside of automatic because they’re super useful.

0:31:35
And they’re not, most people don’t know how to do them. And even if you know about anamista, it can be, if you’ve never done it before, it can be a little confusing. It’s also just a time suck. If you just want an animation, you want an animation, that’s exactly the case for utility class. So anyway, what I’m basically trying to get at is, I haven’t decided on a naming convention for this, but it’s going to be something like this. A in for animate, and then double dash, and then kind of like the name of the animation now. Like slide, blurred left, something like that. I honestly don’t know yet. We’re going to, because I don’t want it to be super long, but I want them to have like an animation kind of prefix, which I think Anne probably, is there anything better? I don’t know, you tell me. So anyway, I’m going to add that class, and I’m going to go to custom CSS, and I’m going to paste. And then I’m going to save. And we’re just going to go the front end and see if we have a working animation.

0:32:35
Alright, so I’m going to click this, and hopefully if we watch carefully, look, home, animate it in. Alright, I’ll show you again. There it is. There it is again. And there it is again. Okay, sorry. Alright, let’s keep going. So we have slide in blurred left. I can now just go here literally to every link I want that to, that I want to animate. And I just do A in slide in blurred left. Down here, A in slide in blurred left. And here, A in slide in blurred left. Now it’s getting laggy on me. Cool. Now I hit save, go to the front end, and they’ll all do it.

0:33:18
How simple was that? Now what’s cool is if you can make them delay a little bit, like if one comes after the other, comes after the other. And it’s super hard to do this. No, it’s super easy to do this. Literally, you create a new class. We’re going to create four classes because there’s four elements. And when I do the utility classes on this, there’s probably going to be like ten of them. And there would be 100, 200, 300, 400, 500, 600, 700, 800, 900, and a thousand. And what we’re going to do is, let’s create the first one. So we’re going to do, it’s so simple. Delay, double dash, 100. Then I’m going to come down here and go animation delay 100 milliseconds. I think that’s all you need to do. It’s pretty simple. Now we’re going to do, I’m going to copy that.

0:34:08
We’re going to come down here and support community. And I’m going to say delay, double dash, 200. And then I’m going to go custom CSS. Oh, there is one thing. I believe, I don’t know why because I haven’t investigated yet. But I believe you need important on these. So that’s going to be 200. And then on this element, we’re going to do delay 300. I’m going to come down effects, not effects. We’re going to do custom CSS. And then this is going to be 300 milliseconds. Okay. I need to go back to my first one that’s delayed. And make sure that that says important. And let’s hope this works.

0:34:55
So we’re going to save. Go to the front end. Bam. Let’s try it again. Oh, I don’t even need to refresh. Super. Okay. So the menu comes in right away. And then two, three, and four. One more time. Pretty good. All right. So, yeah, we’re ready to duplicate, I think. That was pretty easy, right? Like, thanks to Anamista, especially.

0:35:23
Anamista makes things super easy. All right. So let’s go ahead and go to structure. And we’re going to name this. Rename. Oh, yeah. You still can’t highlight automatically and just start typing. Logged in modal. And then I’m going to collapse that. And then I’m going to duplicate it. And then this one is going to be logged out modal. So I’m going to rename. Logged out. And it’s cool because I can edit like one right under the other in the same exact place. So in the logged out modal, I’m just going to delete this.

0:35:58
And then literally all I did was I duplicated that. And then you can just change those links. Now I’m not going to bother you with all of that. Because, you know, it’s just training. But that’s all I did. And then down here, I just came and I duplicated this little span. Maybe I didn’t duplicate the span. Maybe I just wrote in a new one. So something like this, legal and then log out. And then I made it its own span. And of course it likes to flicker and disappear and all that stuff. I do have to make it a link which is going to make it disappear. Because oxygen. And then the log out link is forgot what it is. Let me see if I can always forget it.

0:36:50
I’m not logged in. Let me go ahead and log in real quick. Okay. Let’s grab. Okay, inspect. Okay, right here. Copy. Oh, no, that’s not going to do us any good. WP log in PHP action log out. Okay, WP log in dot PHP. WP log in dot PHP action equals log out. Okay, I think that’s it. All right, I’m going to go ahead and save. Be real nice for me to see my link in the builder. I know for sure I have to underline it to make it look like the other one.

0:37:34
I’m pretty sure also in there that was var text, not var text var. Shade medium. Okay, save. Now we are actually going to be able to see both of them. I think they’re going to overlap. In fact, I’m wondering if I can see. Yeah, there we go. Okay, so I can see the logged out one or the logged in one. Or yeah, is that that’s the logged in one? I can see because I made it second. So it’s on top of the first one. So that’s cool. And I could test this this link right now, but I’m not going to blow up our training. And I’m going to have to log in and all that. And it’s going to take me out of the builder and yada yada yada.

0:38:19
So let’s talk about conditions. Oh, look, I close that one. I can see the other one. Awesome. So now I just have to add a condition to the models. I’m going to minimize that. So you can see I have a logged in and a logged out. A logged in and a logged out. So I want to show this one if the person is, and this is actually, I name them backwards because I’m dyslexic. So this is going to be logged out. You guys probably saw that a long time ago, and I’m only seeing it now. I’m going to rename this to logged in. Now we’re good. Okay, so logged out. I’m going to click the little condition button, second conditions, add your first condition.

0:38:56
And I’m going to come down here to user logged in. Very simple. Like it’s already built into oxygen for you. So remember, this is the logged out. So user logged in is equal to false. Okay, so if user logged in is false, I show this menu. Then I come down to logged in and I hit the conditions. And I say, second conditions, user logged in equals true. Then I hit save. I view the front end. I should see the logged in menu. When I close it, I should not see another menu. That works. And then if I grab this and go to a private window, this is a logged out person now. I see the one with the buy the framework. Right? So you can see here.

0:39:48
This one has the double links. The other one has buy the framework. So we are working. So we’ve got animations. We’ve got logged in, logged out menu. We’re rocking and rolling. I think that’s the end of the tutorial. I can’t think of anything else. Sometimes I end these tutorials and I’m like, ah, forgot about that other thing. Okay, I’m shutting it down. Hope you guys like that. Hope you got a lot out of it. Hope I answered some questions for you. You got to see automatic CSS in action with both some classes and some hooks.

0:40:20
Let me know if you have any questions.