Mobile site content with jQuery click

Question

Mobile site content with jQuery click

Navigation

#1 by (2 votes)
#2 by (1 votes)

0

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

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

This is the first action.

After this, if the user clicks out of DIV CLASS="MENU" , the MOVE-LEFT class is removed and the site returns to its initial state, hiding the side menu.

Follow jsfiddle's 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" );
});

Template jsfiddle .

jquery html5 addclass

asked by anonymous 19.02.2015 / 14:21

2 answers

Dropdown with images in navbar bootstrap Pass parameter via jquery with href

score 2 · Answer 1

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

First let's clean 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" conteudo-movel e any other content on the site, you can use div or section instead of ul if you prefer.

Now 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 reach conteudo-movel when the checkbox is selected. Finally, we set the overflow-x: hidden attribute to our body tag to prevent users from scrolling horizontally.

Example in JSFiddle .

score 1 · Answer 2

Use the jQuery .animate () to move your divs.

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 at: link