Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

wneo

Menu side left - Animate atrasado

Por , em Javascript

Recommended Posts

wneo    5

wneo
Postado

Boa noite!!!

 

Pessoal, montei uma estrutura com um menu side left, utilizando jquery animate para interação de clicar no icone menu e abrir o painel escondido ao lado esquerdo do site. Então o meu caso, eh q preciso q ao clicar em qualqr outro lugar q não o menu, o painel se feche. Da forma q fiz, acontece q ocorre um certo delay, quando clico fora do menu, o painel se fecha, mas ao tentar abrir o menu novamente, ele não abre no primeiro clique..acabo precisando clicar duas vezes para funcionar...como posso resolver isso?????

 

Coloquei no codepen para que vcs possam ver:

http://codepen.io/willliam/pen/ZYyyER

<html>

<head>
<link rel="stylesheet" type="text/css" href="gsoft_central2015.css" />

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>

<script src="gsoft_central2015.js"></script>

<title></title>
<meta charset="utf-8">
</head>

<body>
<div class="header">
<div class="btn_menu_left"></div><!-- /menu_left-->
</div><!-- /header-->

<div class="menu_left">
<ul>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<li>Item4</li>
<li>Item5</li>
</ul>
</div><!-- /menu_left-->

<div class="conteudo"></div><!--/conteudo-->

</body>

</html>

body{margin:0;padding:0;overflow-x:hidden;}

.header{
border:1px solid #bbb;
width:100%;
padding-bottom:0.2%;
background-color:#e8e8e8;
overflow:hidden;
}

.btn_menu_left{
border:1px solid none;
width:45px;
height:45px;
background-color:#000000;
margin:2 0 0 3;
cursor:pointer;
}

.btn_menu_left:hover{
background-color:#c12;
}

.menu_left{
border:1px solid none;
width:0;
height:93.1%;
opacity:0;
background-color:#e8e8e8;
float:left;
z-index:3;
position:absolute;
overflow:hidden;
}

.conteudo{
border:1px solid #bbb;
width:100%;
height:93%;
background-color:#bbb;
float:left;
position:absolute;
z-index:1;
}

/*dentro do menu*/

.menu_left ul{text-align:center;padding:0 1 0 0;margin:0 0 0 0;cursor:pointer;}

.menu_left li{
list-style:none;
line-height:3;
border:1px solid #000000;
width:100%;
height:50;
}
.menu_left li:hover{color:#FFFFFF;background-color:#c12;}

/*1*/

$(function() {
    var state = true;
    $( ".btn_menu_left" ).click(function() {
      if ( state ) {
        $( ".menu_left" ).animate({
          width: "270px",          
		  opacity:"1"	 
        }, 300 );
      } else {
        $( ".menu_left" ).animate({
          width: "0"  
        }, 500 );
      }
      state = !state;
    });
  });




/*2*/

$(function() {
    var state = true;
    $( ".conteudo" ).click(function() {
      if ( state ) {
        $( ".menu_left" ).animate({
         width:'0'
 		  	 
        }, 300 );
      } else {
        $( ".menu_left" ).animate({


        }, 500 );
      }
      state = !state;
    });
  });

Compartilhar este post

Link para o post
Compartilhar em outros sites

WictorP    9

WictorP
Postado

 

$(function() {
var state = true;
$( ".btn_menu_left" ).click(function() {
if ( state ) {
$( ".menu_left" ).animate({
width: "270px",
         opacity:"1"    
}, 300 );
} else {
$( ".menu_left" ).animate({
width: "0"
}, 500 );
}
state = !state;
});
});




/*2*/
$(function() {
var state = true;
$( ".conteudo" ).click(function() {
if($('.menu_left').is(':visible')) {
if ( state ) {
$( ".menu_left" ).animate({
width:'0'
             
}, 300 );
} else {
$( ".menu_left" ).animate({


}, 500 );
}
state = !state;
}
});
})

Compartilhar este post

Link para o post
Compartilhar em outros sites

wneo    5

wneo
Postado 
$(function() {
var state = true;
$( ".btn_menu_left" ).click(function() {
if ( state ) {
$( ".menu_left" ).animate({
width: "270px",
         opacity:"1"    
}, 300 );
} else {
$( ".menu_left" ).animate({
width: "0"
}, 500 );
}
state = !state;
});
});




/*2*/
$(function() {
var state = true;
$( ".conteudo" ).click(function() {
if($('.menu_left').is(':visible')) {
if ( state ) {
$( ".menu_left" ).animate({
width:'0'
             
}, 300 );
} else {
$( ".menu_left" ).animate({


}, 500 );
}
state = !state;
}
});
})

Wictor, coloquei como vc disse mas não obtive nenhum resultado..continua igual...saberia me dizer qual detalhe q faltou?

angelo, dessa forma a saida do menu fica mto brusca...

Compartilhar este post

Link para o post
Compartilhar em outros sites

wneo    5

wneo
Postado

Me deparei com mais uma questão... teria como fazer o conteudo acompanhar o movimento do menu, para q o menu-left não fique sobrepondo o que tem por trás?..ou então no momento em q eu clicar em um dos itens do menu ele já se recolher?

 

http://codepen.io/willliam/pen/ZYyyER

Compartilhar este post

Link para o post
Compartilhar em outros sites

angelorubin    142

angelorubin
Postado

Como assim acompanhar o movimento? Tipo empurrar a div conteúdo para o lado ou para baixo enquanto o menu desliza?


Da para fazer igual você estava fazendo antes - http://jsfiddle.net/angelorubin/ctuc83f7

Compartilhar este post

Link para o post
Compartilhar em outros sites

wneo    5

wneo
Postado

Como assim acompanhar o movimento? Tipo empurrar a div conteúdo para o lado ou para baixo enquanto o menu desliza?

Da para fazer igual você estava fazendo antes - http://jsfiddle.net/angelorubin/ctuc83f7

No caso seria empurrar para o lado, sem ir para baixo, o problema de como eu tava fazendo antes, eh q dai soh funciona quando clico no btn-menu_left, mas quando clico no conteudo pra q ele recolha, ai não da certo..

 

sacou? :coolio:

No caso seria empurrar para o lado, sem ir para baixo, o problema de como eu tava fazendo antes, eh q dai soh funciona quando clico no btn-menu_left, mas quando clico no conteudo pra q ele recolha, ai não da certo..

 

sacou? :coolio:

 

 

Como assim acompanhar o movimento? Tipo empurrar a div conteúdo para o lado ou para baixo enquanto o menu desliza?

Da para fazer igual você estava fazendo antes - http://jsfiddle.net/angelorubin/ctuc83f7

alguma ideia brother???

Compartilhar este post

Link para o post
Compartilhar em outros sites

wneo    5

wneo
Postado

ainda to perdido nesse detalhe...

 

wneo, em 25 Jan 2015 - 2:23 PM, disse:snapback.png

No caso seria empurrar para o lado, sem ir para baixo, o problema de como eu tava fazendo antes, eh q dai soh funciona quando clico no btn-menu_left, mas quando clico no conteudo pra q ele recolha, ai não da certo..

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito