Div from right to left with javascript [closed]

$('.callMenu').click(function() {
    $('.navBar').toggleClass('slideMenu');
});

body {background-color: #fff;}
.callMenu {
    padding: 10px;
    position: absolute;    /* para poder mover o boão para fora da caixa do menu */
    left: -34px;           /* mete o botão de fora tornando-o clicável*/
    background-color: royalblue;
    cursor: pointer;
}
.navBar {
    width: 200px;
    height: 300px;
    right: -200px;  /* Menu inicia escondido [valor igual ao width] */
    top: 0;
    background-color: royalblue;
    color: #fff;
    position: fixed; /* Todo o menu fica fixo, assim ele acompanha a página ao fazer-mos scroll */

    /* Faz a animação do menu deslizar em vez de aparecer logo aberto */
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
.slideMenu {
    right: 0; /* Coloca o menu na poisiçáo desejada de maneira a ficar visível */
}
.navBar ul {
    list-style: none;
    margin: 0;
    padding: 10px 0 0 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script><divclass="navBar">
    <div class="relativeWrapper">
        <span class="callMenu">X</span>
        <ul>
            <li>Inicio</li>
            <li>Blog</li>
            <li>Contato</li>
            <li>ETC...</li>
        </ul>
    </div>
</div>

Clica no botão azul!