Adding slide from right to left animation to the navigation menu when the "hamburger" button is pressed.

Question

Hi everyone,
What is the best way of adding a custom "right to left" animation to the navigation menu when the "hamburger" menu button is pressed? Do I need to use jQuery for this or can I use CSS only to achieve an effect like this (short video): http://d.pr/v/HHuY (sorry for my english).
In my project I am hiding this navigation menu from the user by applying opacity: 0 property until the user clicks the "hamburger" button, which sets the opacity property to 1, thus unhiding and showing the navigation menu to the user. 
CSS:
```
.navbar-collapse {
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        z-index: 2;
        overflow-y: scroll;
        height: 100%;
        width: 100%;
        opacity: 0;
}
.show-menu {
    opacity: 1;
}
```
jQuery:

jQuery(function($){
    $('.navbar-toggle').click(function(){
        $('.navbar-collapse').toggleClass('show-menu');
        $('.navbar-toggle').toggleClass('indexcity');
    });
});

I would like to change the animation direction so that the menu would slide from right to left and I would also want to make this animation smooth i.e. set the time to 0.3s or so.
What is the best way of achieving this effect? jQuery animation property or is there a way of doing it with pure CSS? Any suggestions would be highly appreciated.

Aleksandrs Karevs · Accepted Answer

@Tanja Schmidt (https://teamtreehouse.com/tanjaschmidt) Hi Tanja, thank you very much for your reply to my question. Actually, just a few minutes after I've posted this question an idea came to my mind: why not use a negative value for the right: CSS property e.g. (right: -500px;) and use jQuery together with CSS transition property to get it to work as I desire. I have managed to get it to work like so: http://d.pr/v/1eWzt (short video showcasing the result and explaining the logic of what I have done). 
So what I've done:
1 . I set the negative value of -335px (the width of my iPad menu) to the right: CSS property (i.e. right: -335px);

div#navbar.navbar-collapse {
        position: fixed;
        background: #fff;
        right: -335px;
        width: 335px;
        height: 100%;
        z-index: 2;
        overflow-y: scroll;
 }

2 . I've added a new class called .show-menu with the following parameters:

.show-menu {
    opacity: 1;
    right: 0 !important;
    transition: all 0.3s ease-out;
}

3 . I've added a simple jQuery, which listens for the click event on the "hamburger" button/icon:

jQuery(function($){
    $('.navbar-toggle').click(function(){
        $('.navbar-collapse').toggleClass('show-menu');
        $('.navbar-toggle').toggleClass('indexcity');
    });
});

This is it, really. It seems to work for me. Although I haven't tested cross-browser compatibility, but I guess there should not be a problem either. Hope it helps.

Tanja Schmidt · Answer

I'm glad you've found a way - looks great! Thanks for sharing! :)

Tanja Schmidt · Answer

Hi, 
you should be able to do this with the CSS transition & transform properties. There is a course here on treehouse that might be exactly be what your looking for:
https://teamtreehouse.com/library/css-transitions-and-transforms 
I hope this helps!

Welcome to the Treehouse Community

Looking to learn something new?

Aleksandrs Karevs

Aleksandrs Karevs

Adding slide from right to left animation to the navigation menu when the "hamburger" button is pressed.

3 Answers

Aleksandrs Karevs

Aleksandrs Karevs

Tanja Schmidt

Tanja Schmidt

Tanja Schmidt

Tanja Schmidt

Aleksandrs Karevs

Aleksandrs Karevs