Mobile site content with jQuery click

Question

I would like to apply the following function in a project.

When clicked on the button (that applied will be the menu button) the entire content of the site that is inside the div CONTEUDO-MOVEL should go left hiding a part of the content, because the Section that it encounters is with OVERFLOW:HIDDEN and the content of div class="MENU" would be visible.

This is the first action.

After that, if the user clicks off the DIV CLASS="MENU", the class MOVE-LEFT is removed and the site goes back to its initial state, hiding the side menu.

Follows jsfiddle structure and link:

HTML:

<section id="conteudo"><a href="#" class="move">MENU</a>
    <div id="conteudo-movel">

        <div class="cont"></div>
        <div class="menu"></div>

    </div>

</section>

CSS:

#conteudo
{position:absolute;relative;width:500px;height:200px;background:#f6f6f6;overflow:hidden;}
#conteudo-movel
{position:absolute;width:700px;height:100px;background:#000;left:0;}
.cont{width:500px;background:#c1c1c1;height:50px;position:relative;float:left;}
.menu{width:200px;background:#c1c1c1;height:50px;position:relative;float:left;}
.move{left:0;}
.move-left{left:-200px!important;}

Javascript:

$( "a.move" ).click(function() {
   $( "#conteudo-movel" ).addClass( "move-left" );
      $( "this" ).removeClass( "move-left" );
});

Model jsfiddle.

Answer 1

You can play this effect using only CSS, this is called off-canvas.

First let’s tidy up your HTML:

<ul class="conteudo">
    <li class="nav-item"><a href="#">Página 1</a></li>
    <li class="nav-item"><a href="#">Página 2</a></li>
    <li class="nav-item"><a href="#">Página 3</a></li>
</ul>

<input type="checkbox" id="nav-trigger" class="nav-trigger" />
<label for="nav-trigger">Menu</label>

<div class="conteudo-movel">
    <p>Meu menu off-canvas.</p>
</div>

• conteudo we put first because it is "behind" of conteudo-movel and any other site content, you may use a div or section in place of ul if you prefer.

Now for our CSS:

body {
    overflow-x: hidden;
}

.conteudo {
    background: #f6f6f6;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
    list-style: none;
}

.nav-trigger {
    position: absolute;
    clip: rect(0, 0, 0, 0);
}

label[for="nav-trigger"] {
    position: fixed;
    top: 15px;
    left: 15px;
    z-index: 2;
    padding: 4px 8px;
    cursor: pointer;
    background-color: #f00;
}

.nav-trigger:checked + label {
    left: 515px;
}

.nav-trigger:checked ~ .conteudo-movel {
    left: 500px;
}

.nav-trigger + label, .conteudo-movel {
    transition: left 0.2s;
}

.conteudo-movel {
    min-width: 100%;
    min-height: 100%;
    background-color: #fff;
    position: relative;
    top: 0;
    bottom: 100%;
    left: 0;
    color: #fff;
    z-index: 1;
    padding: 4em;
    background-color: #000;
    background-size: 200%;
}

Note that we use the selector ~ to achieve the conteudo-movel when the checkbox is selected. Finally, we put the attribute overflow-x: hidden for our tag body to prevent users from scrolling horizontally.

Example in Jsfiddle.

Answer 2

Uses jQuery’s . Animate() to move your Ivs.

Example moving the first div down:

$( "a.move" ).click(function() {
    $(".cont").animate({"bottom":"-=50px"},"slow");
});

You can move your div in all directions (top, right, bottom, left)

More examples in: http://api.jquery.com/animate/