News

Unleash CSS to create fullscreen menu overlays

Achieve a fullscreen CSS menu with various different animation effects that are bound to engage your audience

huge950

huge950

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.

DOWNLOAD TUTORIAL FILES

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.

×