Tips&Tricks Create a Simple fullscreen navigation menu
Lately we can often find a fullscreen navigation menu on new, modern websites. They’ve become very popular because of their simplicity. In this blog post we’ll describe to you how to create one with a smooth transition effect between showing and hiding it.
Fullscreen Navigation Menu Introduction
Before we start you should take a look at what we’re trying to achieve here.
This is a live demo of our project on codepen. Click on “Open full-screen navigation here” to see full-screen navigation in action.
See the Pen Simple full-screen navigation menu by Alen (@alenvuletic) on CodePen.
We’ll use CSS3 transitions and translations to achieve opening and closing animation. The whole CSS is written in LESS language. If you want to see a compiled version just click on “View compiled” button in codepen CSS section. Also there are useful comments in CSS file which tell you which code is important to include if you want your full-screen navigation to work properly.
The HTML
We’ll start with HTML. In our codepen you can see “.full-menu” div and “.content” div. “.content” div is a block with your content and you can put whatever you want in it. Don’t forget to include “.menu-toggle” in content. Since it toggles full-screen navigation, it’s very important to include it. Besides “.content” there’s a “.full-menu” div with your navigation within it. Include it just after <body> tag.
The JavaScript
After HTML we’ll setup some JavaScript code to make everything work.
We’re going to create toggle that will add / remove “.full-menu–open” class to button with“.menu-toggle” class.
The CSS
In this article I’ll include only important CSS code that is necessary for full-screen navigation to work properly. Now we have to write some CSS code to make everything work. We have to style “.full-menu” div in default state and with “.full-menu–open” class. When “.full-menu–open” class is toggled then we will show our full-screen.
Conclusion
There we go! Finally we’ve finished our fullscreen navigation menu. Now you can play around with it and make it even better. Remember this is just a start. Hope you’ve learned something from this article, enjoy!
