Gostaria de aplicar a seguinte função em um projeto.
Quando clicado no botão (que aplicado, será o botão do menu) o conteúdo inteiro do site que está dentro da div CONTEUDO-MOVEL
deve ir para esquerda escondendo uma parte do conteúdo, pois a section que ele se encontra está com OVERFLOW:HIDDEN
e o conteúdo da div class="MENU"
iria ficar visível.
Esta é a primeira ação.
Após isso, se o usuário clicar fora da DIV CLASS="MENU"
, a classe MOVE-LEFT
é removida e o site volta a seu estado inicial, escondendo o menu lateral.
Segue estrutura e link do jsfiddle:
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" );
});