I want to copy the transition on the left menu on the page /

Notice how the left menu transitions in (when you click the hamburger) and when you click the X it transitions out gracefully.

I want to copy both transitions. How can I do that using CSS?

Right now I have a div with class left-menu. It initially has a left position of -284px. Then when people click on the hamburger, I set the left position to 0.

I have the following CSS on my left-menu class:

transition: all 0.3s ease;

I don't know how to do the slide in and slide out so that it is similar to the google transition.

I want to copy the transition on the left menu on the page https://privacy.google./

Notice how the left menu transitions in (when you click the hamburger) and when you click the X it transitions out gracefully.

I want to copy both transitions. How can I do that using CSS?

Right now I have a div with class left-menu. It initially has a left position of -284px. Then when people click on the hamburger, I set the left position to 0.

I have the following CSS on my left-menu class:

transition: all 0.3s ease;

I don't know how to do the slide in and slide out so that it is similar to the google transition.

• javascript
• jquery
• css

2 Answers 2

You will also need to define the CSS properties that will be animated for that transition. Google uses the transform property in that instance with a translateX value. You will also need a little JavaScript to handle adding and removing the necessary class that gives the transition the new property values or removes them in the case of removing the class. In this case its the open class. Breaking their exact code down to a much simpler form you are left with:

Fiddle: https://jsfiddle/aavf64s8/

HTML:

<header>
    <nav class="home" id="menu">
        <a class="nav-trigger" href="#">menu</a>
    </nav>
    <nav id="nav-content">
        <div class="nav-background">hello</div>
    </nav>
</header>

CSS:

header {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 15
}

header #menu {
    display: block;
    height: 58px;
    padding: 0 1.95em;
}

header #menu a {
    position: relative;
    z-index: 3;
}

header #nav-content .nav-background {
    background: #fff;
    height: 100%;
    left: -330px;
    position: fixed;
    top: 0;
    transition: -webkit-transform .5s ease;
    transition: transform .5s ease;
    -webkit-transform: translateX(-110%);
    -ms-transform: translateX(-110%);
    transform: translateX(-110%);
    width: 100%
}

header.open #nav-content .nav-background {
    -webkit-transform: translateX(330px);
    -ms-transform: translateX(330px);
    transform: translateX(330px)
}

JavaScript:

var menu = document.getElementById('menu');
menu.addEventListener('click',
    function () {
        var header = document.getElementsByTagName('header')[0];
        header.classList.toggle('open');
    }
);

You can now pretty this up with some nicer styling but this is generally what they are doing on that page.

EDIT

To add the overlay google does this (they don't actually animate it in anyway):

Add this HTML:

<div id="curtain"></div>

Add this CSS:

#curtain {
    background-color: #fff;
    height: 1px;
    position: fixed;
    top: 0;
    width: 1px;
    z-index: -1
}

#curtain.menu-opened {
    background-color: rgba(0, 0, 0, .4);
    height: 100%;
    width: 100%;
    z-index: 1
}

Updated JS:

var menu = document.getElementById('menu');
menu.addEventListener('click',
    function() {
        var header = document.getElementsByTagName('header')[0];
        header.classList.toggle('open');
        var curtain = document.getElementById('curtain');
        curtain.classList.toggle('menu-opened');
    }
);

Fiddle: https://jsfiddle/aavf64s8/2/

I solved this for a sliding right menu (the opposite of this question):

.animated-menu {
    position: fixed;
    top: 0;
    right: 0;
    width: 100px;
    transition: transform .5s ease;
    transform: translateX(100%);
}

.animated-menu.open {
    transform: translateX(0%);
}

Add onClick handler to toggle it:

document.querySelector('.animated-menu').classList.toggle('open')