Div from right to left with javascript

Asked

Viewed 811 times

-5

I want to make a menu that opens from right to left with javascript, when clicking on the icon of the menu it will open from right to left.

javascript

1 answer

2


If using jQuery is an option, you can do it as follows:

$('.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>

<div class="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!

Here is also an example in jsFiddle with text behind it, as if it were a normal web page: https://jsfiddle.net/shuffledPixels/br3nttjt/

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.