Today’s Tidy Tutorial is going to look at a take on a mobile nav, showcasing a curtain style open and close animation with fading nav links.
We’ve got a couple of elements here that are pretty standard and won’t be covered but you can check the Pen to see these (mainly the nav toggles). Before we jump into the nitty-gritty let’s look at the setup…
A FREE Mobile Nav Tutorial
We’re going to need a HTML structure of the nav, it’s going to look a little like this:
There’s nothing out of the ordinary here, looking at the above code block it’s a pretty standard structure. The only item which could be considered an oddity is the toggle bars being the first nav item – this is purely for some automatically calculated spacing for the closing toggle. Now we just need some initial styling:
This first CSS block will place the nav above the page’s content when we’re ready to show it. Also you’ll see the comment above the ‘height’ declaration, we’re placing this here so we can style the nav. We will need to take this away to hide the nav, but first, before we completely hide the nav we need to write a quick fix to space out the close toggle bar properly and move onto some styling:
Nothing complex here, it just places the cross to the left and moves it into the centre of the li. The reason it originally seems out of line is due to the transforms moving the spans into the cross shape. To see how we’ve created to toggles please see the Codepen Pen of this tutorial.
Everything is quite squished right now, so we need to make the ul the same height as the nav and also space out the links:
Here we’re using the beauty of flex to automatically evenly space out the links, flex direction states we want the links in a column. If you’re unsure on any of the styles around flex then check this post from CSS Tricks, everything you’ll need to know will be covered: css-tricks.com/snippets/css/a-guide-to-flexbox/
Time to add in the curtain effects styles, we’re going to use pseudo elements. We’ll start by creating both and move the positioning of each after:
You’re going to see a rectangle now that takes up half of the page…
::before is our left “curtain”, ::after will be the right. We need to move the ::after pseudo element to the right side. We will do this with the following style:
Now your whole screen should be covered by the “curtains”. These need to be hidden off screen though so they can be animated in later:
Simple transforms are how we do this, adding a minus to the ::before’s style to move this to the left.
Now the majority of styles have been completed but before we move on we need to hide the nav when we don’t need it. A simple few lines will do this:
On our page we should just see the hamburger and whatever other content we’ve placed on the page, for us just a header:
Next we’re going to need to add the only JS side to this tutorial, a simple class added to the nav element will be what triggers the opening and closing of the nav. We just need one event listener which is going to toggle the class, it doesn’t get much simpler than this:
That’s the JS done, everything else is going to run through CSS. All the styles which deal with the open nav are going to be prefaced with ‘.nav-open’. Starting with these following few styles we make it so the mobile nav is able to be opened, the page once you click on the nav toggle will be covered by the “curtain” elements.
Two problems here though – first, we’re stuck here; we’ve not shown the links so you can’t go back. Second, the curtain elements jumped in rather than animated in. Let’s fix the latter first:
You can tweak this style however you like, the timings can make a big difference but the biggest impact can be made through the timing function, we’re using ease-out but play around with other standard timings and even try creating your own cubic bezier (here’s a great site for helping you create your own cubic-bezier.com).
This is where things get a little finicky, if you were to close the nav now you’ll see the whole thing instantly disappears. This is down to the measures taken to completely hide the nav when it’s not in use. To fix this we have to get creative with transitions:
Toggle between the open and closed state now and you’ll see the curtain elements open and close properly. Once the curtains move in we can tackle the links, currently they show and hide instantly, we want these to appear after the curtains have shown.
We’ll start by getting the nav links to show once the curtains have closed, to do this is pretty similar to the above, on the ‘.nav-item’ class we set the transition duration and delay. The delay needs to be set for longer than the curtains’ transition duration:
The reason we’re breaking out the transition declarations into their long form is so we can override them individually. Also as mentioned above, setting the delay on the nav-open class means we can provide different times for both the opening and closing sections of this transitions. We want the nav items to fade out first on the closing – to do this we’ll set the transition delay to 0 on the just the ‘.nav-item’ class:
We’re nearly there! We just need a few final tweaks. The first one to tackle is getting the curtains to transition out after the links have faded out. We need to add the delay onto the nav before and afters, also adding a delay to the nav-open before and after of 0s to keep the curtains opening first on the initial menu opening:
The very last bits run of the same ideas as the previous couple of CSS code blocks, we need to update the time on the nav elements’ transition duration to the total time of the closing transition. This is the nav pseudo elements’ transition duration (.5s) + nav links’ transition duration (.5s) + transition delay difference (.15) which equals 1.15s.
Finally let’s do the double transition timing trick to get the padding of the main nav to visible as soon as the nav opens and be removed once the links fade out – this stops a glitchy looking jump. The reason it’s added after is to help make the nav hide completely, if we were to use display none on the container then the children (nav items) would lose their ability to transition their opacity. The last code block is:
There we have it, a completed mobile curtain like navigation. There’re a few quirks of CSS to overcome along the way but the final product is worthy of that extra effort. Have a play around with the styles in the Pen and see what you can come up with!
codepen.io/TidyDesign/pen/gdvqPp/
Thank you for reading, we hope you enjoyed this FREE mobile nav tutorial, until next time!
Luke
