By
A fullscreen menu adds a dramatic way for users to navigate your site. This tutorial will run you through how to set up the base page that will display the main site content, the menu itself that will be animated onto the page, and how to customise the animation.
The animation will be handled by the transform CSS3 property. Because the transform property is CSS3, compatibility may be an issue on some older browsers. We will focus on animating elements from IE10 onwards, however, you can support IE 9 by using the -ms-transform property. If you wish to support browsers older than this, you may have to look into third-party alternatives such as Transformie. Transformie is a very lightweight framework that animates elements on older browsers using JavaScript you can find out more information about the solution at bit.ly/Jb6Yn.
To keep things as compatible as possible we will only be animating elements in 2D, but it is possible to animate in 3D space as well. You can also manipulate the overlay shape itself by using SVGs instead of CSS solid colours and we will briefly touch on this later.
Create the document
The first step is to create a file can that we can work in. In your text editor, create a new HTML file that has the HTML5 head markup, as per the below. We won’t be using any server-side tech here, so you can open the HTML file directly in your browser.
001 <!DOCTYPE html> 002 <html> 003 <head> 004 <title>Fullscreen animated menu</title> 005 </head> 006 <body> 007 </body> 008 </html> 009
Set up the page
Next, we create a base page that will trigger the menu overlay. The menu overlay will be activated on a user click but we’ll cover rollover events later on in this tutorial. In your HTML file, add the following code to create a centred button. We’ll then add in a bit of style to this.
001 <div id=”container”> 002 <button id=”overlay-menu” type=”button”>Menu</button> 003 </div> 004
Centre the button
We’ll now make our page look a bit more presentable; you can add the CSS in a separate file, or include it within the HTML page. The below code will centre the button and we’ve also added an H1 tag above the button that contains some descriptive information, although this is all optional.
001 <style>
002 #container {
003 position: absolute;
004 top: 0;
005 bottom: 0;
006 left: 0;
007 right: 0;
008 margin: auto;
009 height: 50px;
010 width: 100px;
011 }
012 #overlay-menu {
013 width: 100px;
014 height: 50px;
015 }
016 </style>
Add some style
We’ll now add some additional CSS to create a bold colour palette on the page. This will sit behind our menu, the idea being that the menu overlay on this page will be quite neutral and wash the page out. Add this code to the top of your CSS section.
001 body {
002 background: #A98FD4;
003 color: #12012E;
004 }
Update fonts
We’ll be using Google Fonts to get away from the standard web fonts that are used on other websites. Head over to www.google.com/fonts and pick a font that you like, add it to your collection and then click on the Use tab to implement it into your site. The code below should be placed in the <head> section of your page.
001 <link href=’http://fonts.googleapis.com/css?family=Roboto’ rel=’stylesheet’ type=’text/css’> 002
Apply the font
Next we’ll need to update the body CSS to the following code snippet. This will apply the Google font that we just embedded to the whole of the page. You may find that the button element will need the font-family line added as well if the style is not carried through.
001 body {
002 background: #6BB4E8;
003 color: #12012E;
004 font-family: ‘Roboto’, sans-serif;
005 }
Style the button
The following CSS code block will add some much-needed style to the button. Don’t forget to add the class=”menuButton” attribute to your button HTML so this style actually gets applied correctly. This style also has a subtle hover effect applied as well – feel free to change the colours to match your site.
001 .menuButton {
002 background-color:#2F32A4;
003 text-indent:0;
004 border:1px solid #3c295e;
005 color:#fff;
006 font-size:15px;
007 font-weight:bold;
008 }
009 .menuButton:hover {
010 background-color:#3c295e;
011 }
012 .menuButton:active {
013 position:relative;
014 top:1px;
015 }
Create overlay
Add the following code within your HTML to create the structure of the menu. We will then add some CSS to style this correctly and eventually hide it completely so that it’s only visible when the button is pressed. We have also added a method for users to close the menu and we will need to hook this up as well.
001 <div class=”overlay overlay-data”> 002 <button type=”button” class=”overlay- close”>Close</button> 003 <nav> 004 <ul> 005 <li><a href=”#”>Home</a></li> 006 <li><a href=”#”>Lorum</a></li> 007 <li><a href=”#”>Ipsum</a></li> 008 </ul> 009 </nav> 010 </div>
Fullscreen overlay
We’ll now add another CSS block that will make the overlay fill the entire page. We will also set the background colour of the overlay and apply a slight opacity. We’ll be using an opaque white to wash the site out but, of course, you can use whatever colour suits your preference. Add this code to the end of your CSS.
001 .overlay {
002 position: fixed;
003 width: 100%;
004 height: 100%;
005 top: 0;
006 left: 0;
007 background: rgba(255, 255, 255, 0.80);
008 }
Style the overlay
We now have a fullscreen overlay, but we still have the nasty default link colours and bulleted lists – the close button could do with some attention too but we’ll come on to that later. Add the following CSS underneath the previous step to centre our links and make them much bigger.
001 .overlay nav {
002 text-align: center;
003 position: relative;
004 top: 20%;
005 height: 60%;
006 font-size: 80px;
007 }
Inline menu
The code in this step will make our menu inline, as well as position it correctly in the overlay. If your menu is quite long you may find that your menu drops onto a second line. To get around this either adjust your text size or feel free to skip this step completely.
001 .overlay ul {
002 list-style: none;
003 padding: 0;
004 margin: 0 auto;
005 display: inline-block;
006 height: 100%;
007 position: relative;
008 }
009 .overlay ul li {
010 display: inline-block;
011 height: 20%;
012 }
More style
This next CSS block will style the links to match the rest of the site. Again, you can modify the style to fit your own site. The final step in altering our overlay is to make the Close button more usable, this will be especially important for mobile and tablet devices.
001 .overlay ul li a {
002 font-weight: 300;
003 text-decoration: none;
004 display: block;
005 color: #3c295e;
006 margin-right: 40px;
007 }
Style the close button
Open the ‘close.png’ image from the disc and add it to your project directory. The following CSS code block will remove all the default button styling and replace it with our image. You will notice that the Close icon will have rounded edges that do not appear on the actual image, this is achieved by hiding the overflow.
001 .overlay-close {
002 width: 90px;
003 height: 90px;
004 position: absolute;
005 right: 10px;
006 top: 10px;
007 overflow: hidden;
008 border: none;
009 background: url(close.png) no-repeat center center;
010 text-indent: 200%;
011 color: transparent;
012 outline: none;
013 z-index: 100;
014 }
Hide the overlay
As we don’t want our overlay to appear all the time, we need to hide it until it is actually needed. To achieve this, add the following CSS block, which will overwrite the default opacity and visibility values ready for us to switch back on with a little bit of JavaScript.
001 .overlay-data {
002 opacity: 0;
003 visibility: hidden;
004 }
Add jQuery
Now we have hidden the overlay, we need a way to bring it back up again. In the head section of your page, add the following line of code. This line will load in the latest stable version of jQuery from the jQuery content delivery network, ready for us to make calls against.
001 <script src=”http://code.jquery.com/ jquery-latest.min.js” type=”text/ javascript”></script>
Hook up the button
Now we can make calls to jQuery we can add a <script> tag into our HTML. Add this before the </body> tag to prevent the script slowing page load. This script will toggle the visibility of our overlay. Refresh the page to close the overlay; we will hook up our Close button next.
001 <script>
002 $( “#overlay-menu” ).click(function() {
003 $( “.overlay” ).addClass (‘overlay-open’);
004 });
005 </script>
More CSS
If you’re using Google Chrome, open up the inspection console and click the button. You’ll notice that a new CSS class is added to our overlay element, however we don’t have the corresponding CSS block to make the overlay visible. Add this CSS code block to fix that problem. Now clicking the button should show the overlay.
001 .overlay-open {
002 opacity: 1;
003 visibility: visible;
004 }
Hide the overlay
Much like the last piece of script, we need a way to hide the overlay once it has been activated. We’ll hook the Close button in our overlay up to do the opposite action than the script before. Add the code below before the closing </script> tag in your HTML page.
001 $( “.overlay-close” ).click(function() {
002 $( “.overlay” ).removeClass
(‘overlay-open’);
003 });
004 >
Animate the overlay
The next step is to make our overlay fade in elegantly, rather than suddenly appearing. As mentioned previously, we’ll be using CSS3 transform properties, so this is a key area to focus on if older browsers are a concern. We’ll also include –webkit transform as well to maximise compatibility. Update your overlay-open class to the below.
001 .overlay-open {
002 opacity: 1;
003 visibility: visible;
004 -webkit-transition: opacity 0.5s;
005 transition: opacity 0.5s;
006 }
Overlay fade out
So now we have our overlay fading in nicely, we can fade it out again in much the same way. The below code will apply the opposite transition, and since the <div> is only visible once it has been activated, the animation will only play when our overlay is closed. Update your overlay-data CSS class to the below.
001 .overlay-data {
002 opacity: 0;
003 visibility: hidden;
004 -webkit-transition: opacity 0.5s,
visibility 0s 0.5s;
005 transition: opacity 0.5s, visibility 0s 0.5s;
006 }
Alternative animations
Instead of the standard fade in and fade out animations, we can do something a little different. Updating your overlay-open CSS class with the below code will slide the overlay in from the corner. Don’t forget to update the overlay-data class as well with the opposite effect if you want to apply the same effect on close.
001 .overlay-data {
002 opacity: 0;
003 visibility: hidden;
004 -webkit-transform: translateY
(50px) translateX(50px);
005 transform: translateY
(50px) translateX(50px);
006 -webkit-transition: opacity 0.5s,
-webkit-transform 0.5s, visibility 0s
0.5s;
007 transition: opacity 0.5s, transform
0.5s, visibility 0s 0.5s;
008 }
SVG effects
If you’re only concerned with supporting the latest browsers, you can achieve some very cool effects with the help of SVG elements. The lengthy code below will add path data to an SVG element; you can then call this data from within jQuery to animate along the path variables, giving you the MacBook Genie effect.
