Bruno Wiltemburg

30 comentários

1. 

   Douglas, em 06/09/2010 @ 15:01

   queria saber se você sabe a função para ativar os menus somente com o clique ( e não ao passar o mouse ) e quando clicar em outro menu ou clicar novamente no mesmo, voltar ao normal (reduzido)….Obrigado
2. 

   Bruno Wiltemburg, em 08/09/2010 @ 14:47

   Ola Douglas,

   Para ativar o efeito no clique do mouse e fechar os demais que estejam abertos, deve fazer assim:

   
   $('#accordion > li').click( //Agora o listener fica no click do elemento
           function () {
   			$this = $(".ativo"); //Aqui relaciona à variavel $this o elemento que está ativo (se houver) e fecha quem estava ativo
   			$this.stop().animate({'width':'115px'},1000);
                           $('.heading',$this).stop(true,true).fadeIn();
                           $('.description',$this).stop(true,true).fadeOut(500);
                           $('.bgDescription',$this).stop(true,true).slideUp(700);
   
                           //Anima a abertura do slider
                           var $this = $(this);
                           $this.stop().animate({'width':'480px'},500);
                           $(this).addClass("ativo"); //Adiciona a classe ativo para marcar qual elemento está aberto
                           $('.heading',$this).stop(true,true).fadeOut();
                           $('.bgDescription',$this).stop(true,true).slideDown(500);
                           $('.description',$this).stop(true,true).fadeIn();
               });
   
3. 

   Marcelo Diniz, em 27/10/2010 @ 14:26

   Olá, parabéns, vou pela tuto e gostaria de saber o seguinte, se é possivel um deles, o primeiro por exemplo já vir aberto e quando passar o mouse por cima de um outro não crescer mais aquele pouquinho, manter a largura?
   Obrigado
4. 

   eduardo, em 22/11/2010 @ 15:29

   Bruno, excelente tuto, simples direto e objetivo. Como ficaria o seu exemplo para o menu ficar de forma vertical ?
   obrigado

   eduardo
5. 

   Edwin, em 16/02/2011 @ 10:22

   Muito bom o script…
   Parabéns.
6. 

   Clarisse Machado Soares, em 25/03/2011 @ 18:56

   Bruno,

   Adorei o tutorial!
   Quero usar este accordion , mas que ele abra 1 das abas ao carregar as páginas tem como?

   E muito obrigado por auxiliar o pessoal e a mim com esse maravilhoso tutorial.
7. 

   Rogério, em 03/05/2011 @ 20:10

   Muito bom seu tutorial… ta me ajudando a entender jquery.
   Como faria para desativar o click na div que já esta aberta?

   Abs
8. 

   Cayo Medeiros (yogodoshi), em 09/06/2011 @ 16:23

   Excelente tutorial cara, parabens!
9. 

   Rafael Trabasso, em 21/07/2011 @ 16:44

   Parabéns, o efeito é bem legal e o código bem limpo.
   Gostei do visual do blog também.
10. 

    Diego, em 24/08/2011 @ 08:43

    Olá Bruno,
    Por favor kra. Você é o unico que pode me salvar.
    Gostei muito do seu tutorial desse menu e resolvi colocar num site que estou fazendo. Aí resolvi colocar pra ser ativado num click.
    Como eu faço pra junto desse click ativar uma página?
    Fico no aguardo, obrigado
11. 

    Bruno Wiltemburg, em 24/08/2011 @ 09:22

    Ola Diego,

    Para que ele siga um link, pode-se fazer o seguinte:
    Adicione o link correto dentro de uma tag <a>. Por ex:
    <a href="http://brunoew.com.br/blog">Veja mais</a> Esta tag deve estar dentro da tag <li>
    Depois adicione um handler para o click no accordion:

    // Esta função deve estar junto com as demais funções javascript (sendo executada após o carregamento da página).
$('#accordion > li').click(function(){
var link = $(this).find("a").attr("href");
window.location = link;
return false;
});
12. 

    Diego, em 24/08/2011 @ 11:22

    Ótimo Bruno.
    Só que não te especifiquei, erro meu, desculpa.
    Eu já troquei pra click então quando eu coloco essa função que vc passou agora ele nem chega a dar o slide. Ja vai pro link direto da aba.
    Tem como abrir o slide e depois que clicar em cima dele aberto ir pra página?
13. 

    Bruno Wiltemburg, em 24/08/2011 @ 12:04

    Sim Diego, é possível…
    Faça o seguinte, nesta mesma função que lhe passei (pelo handler de click do slide):

    
    $('#accordion > li').click(function(){
       var link = $(this).find("a").attr("href");
       //Remove a classe linkAtivo para todos os elementos (para que não mantenha a classe num link que ja foi clicado).
       $(".linkAtivo").removeClass("linkAtivo");
       //Verifica se a opção já possui a classe linkAtivo, caso já possua redireciona para o link, caso contrário, adiciona a classe para que na próxima vez que for clicado, seja direcionado para o link.
       if($(this).hasClass("linkAtivo"))
          window.location = link;
       else
          $(this).addClass("linkAtivo");
       return false;
    });
    
    
14. 

    Diego, em 24/08/2011 @ 12:18

    Ficou assim:
    Não percebi mudança. Está correto o script?

    $(function() {
    $(‘#menu > li’).click( //Agora o listener fica no click do elemento
    function () {
    $this = $(“.ativo”); //Aqui relaciona à variavel $this o elemento que está ativo (se houver) e fecha quem estava ativo
    $this.stop().animate({‘width’:’140px’},600);
    $(‘.heading’,$this).stop(true,true).fadeIn();
    $(‘.description’,$this).stop(true,true).fadeOut(500);
    $(‘.bgDescription’,$this).stop(true,true).slideUp(700);

    //Anima a abertura do slider
    var $this = $(this);
    $this.stop().animate({‘width’:’697px’},800);
    $(this).addClass(“ativo”); //Adiciona a classe ativo para marcar qual elemento está aberto
    $(‘.heading’,$this).stop(true,true).fadeOut();
    $(‘.bgDescription’,$this).stop(true,true).slideDown(700);
    $(‘.description’,$this).stop(true,true).fadeIn();
    });
    $(‘#menu > li’).click(
    function(){
    var link = $(this).find(“a”).attr(“href”);
    $(“.linkAtivo”).removeClass(“linkAtivo”);
    if($(this).hasClass(“linkAtivo”))
    window.location = link;
    else
    $(this).addClass(“linkAtivo”);
    return false;
    });
    })
15. 

    Bruno Wiltemburg, em 24/08/2011 @ 14:15

    Ola Diego,

    Segue o código completo para tal finalidade:

    
    $('#accordion > li').click( //Agora o listener fica no click do elemento
    				function() {
    
    					var link = $(this).find("a").attr("href");
    
    					  //Verifica se a opção já possui a classe linkAtivo, caso já possua redireciona para o link, caso contrário, adiciona a classe para que na próxima vez que for clicado, seja direcionado para o link.
    					  if($(this).hasClass("ativo"))
    					    window.location = link;
    					  else{				
    
    							$this = $(".ativo"); //Aqui relaciona à variavel $this o elemento que está ativo (se houver) e fecha quem estava ativo
    							$this.stop().animate({
    								'width' : '115px'
    							}, 1000);
    							$('.heading', $this).stop(true, true).fadeIn();
    							$('.description', $this).stop(true, true).fadeOut(500);
    							$('.bgDescription', $this).stop(true, true).slideUp(700);
    
    							//Anima a abertura do slider
    							var $this = $(this);
    							$this.stop().animate({
    								'width' : '480px'
    							}, 500);
    							$(this).addClass("ativo"); //Adiciona a classe ativo para marcar qual elemento está aberto
    							$('.heading', $this).stop(true, true).fadeOut();
    							$('.bgDescription', $this).stop(true, true).slideDown(500);
    							$('.description', $this).stop(true, true).fadeIn();
    					  }	
    
    			});
    
    
16. 

    Diego, em 25/08/2011 @ 00:33

    Aeeeeeee… Show de bola Bruno.
    Parabéns velho. É difícil ver hoje alguém assim disposto a ajudar, ainda mais com vontade de que todos aprendam MESMO. Continue sempre assim, vc tem um novo fã. Sucesso!
17. 

    Bruno Wiltemburg, em 25/08/2011 @ 08:22

    Obrigado Diego!
18. 

    Daniel Malakias, em 29/08/2011 @ 11:55

    Olá Bruno. O meu problema é o seguinte. Estou trabalhando com um slideshow, que tem a seguinte montagem:
    [code]

    function slideSwitch() {
    var $active = $('#slideshow IMG.active');

    if ( $active.length == 0 ) $active = $('#slideshow IMG:last');

    var $next = $active.next().length ? $active.next()
    : $('#slideshow IMG:first');

    $active.addClass('last-active');

    $next.css({opacity: 0.0})
    .addClass('active')
    .animate({opacity: 1.0}, 1000, function() {
    $active.removeClass('active last-active');
    });
    }

    [/code]

    Para chamar as paginas, eu estou usando ajax, para não dar refresh na pagina inteira, então no link eu chamo esta função

    [code]
    if(dateText2 == "transzella"){
    $('#reload').fadeOut(500);
    $('#reload').load("interna_transzella.php");
    $('#reload').fadeIn(500);
    setInterval("slideSwitch()",5000);
    }
    [/code]

    Da primeira vez o slideshow funciona perfeitamente, porém, a partir do segundo click, começa a dar erro, e as imagens ficam “encavaladas”.

    Como posso tentar resolver este problema??
19. 

    Giovanna, em 31/08/2011 @ 10:56

    Oi Bruno no seu tutorial (http://www.brunoew.com.br/blog/efeito-accordion-na-horizontal-com-jquery-css3/#more-16) vc colocou as imagens de fundo atraves de background do css,
    mais se eu fosse fazer uma aplicação com o banco de dados exibindo todos as imagens
    nao iria ter como definir no css mais imagens.
    se eu colocar as imagens na div
    COLOCAR A IMG
    Seria o mesmo efeito ?
    pq no php quando vc da o loop nao teria como add as imagens no css fazendo esse jeito
    de
    [code]
    ul.accordion li.bg1{ background-image:url(../images/1.jpg);}

    ul.accordion li.bg2{ background-image:url(../images/2.jpg);}

    ul.accordion li.bg3{ background-image:url(../images/3.jpg);}

    ul.accordion li.bg4{background-image:url(../images/4.jpg);}
    [/code]
    so iria ter as imagens padrao no css ou não?

    Aguardo a resposta
20. 

    Cezar Luiz, em 04/09/2011 @ 02:11

    Oi, qual a diferença de usar .stop() ou .stop(true, true) ?
21. 

    Bruno Wiltemburg, em 04/09/2011 @ 09:45

    Ola Cezar.

    Este método .stop recebe dois parâmetros opcionais, que são eles:

    clearQueue: Um booleano que indica se deseja remover a animação na fila também. O padrão é false .
    jumpToEnd Um booleano que indica se ao completar a animação atual imediatamente. O padrão é false .

    Se o parâmetro clearQueue é fornecido com um valor true , então o resto das animações na fila são removidos e nunca executados.
    Se o parâmetro jumpToEnd é fornecida com um valor de true , a animação atual pára, mas é dado ao elemento seus valores-alvo para cada propriedade CSS.
    Fonte: http://api.jquery.com/stop
22. 

    Rodrigo Peretta, em 15/10/2011 @ 19:26

    Olá, Eu implementei o seu código em um site que estou desenvolvendo, porem não funcionou o gradiente quando algum se abre, e outra dúvida é possivel carregar o site com um aberto já ?

    Obrigado
23. 

    Rodrigo Peretta, em 29/10/2011 @ 01:33

    Olá Bruno, tudo bem ?

    Parabens pelo tutorial muito bom.

    Eu gostaria de tirar uma dúvida, como faço pra quando carregar a pagina a primeira aba venha aberta ?

    Obrigado desde Já
24. 

    Bruno Wiltemburg, em 01/11/2011 @ 09:07

    Olá Rodrigo,

    Para deixar a primeira aba aberta no carregamento da página, basta criar uma função, por exemplo, que faça a animação inicial. Ex:

    
function ativaPrimeira() {
var $this = $("#accordion>li:last");
$this.stop().animate({'width':'480px'},500);
$('.heading',$this).stop(true,true).fadeOut();
$('.bgDescription',$this).stop(true,true).slideDown(500);
$('.description',$this).stop(true,true).fadeIn();
}


    E depois que o documento for totalmente carregado “$(function(){});“, chamar esta função:

    
ativaPrimeira();


    Abraços
25. 

    Rodrigo Peretta, em 01/11/2011 @ 23:42

    Olá Bruno tudo bem ?

    Implementei sua resolução para carregar a pagina e vir com a primeira aba aberta, funcionou, porem gerou outro problema. Quando clico em outro por exemplo na segunda aba, ela não fecha a primeira, abre a segunda e mantem a primeira aberta.

    Segue exemplo do meu Código:

    $(document).ready(function ativaPrimeira() {
    var $this = $(“#accordion>li:first”);
    $this.stop().animate({‘width’:’480px’},0);
    $(‘.heading’,$this).stop(true,true).fadeOut();
    $(‘.bgDescription’,$this).stop(true,true).slideDown(0);
    $(‘.description’,$this).stop(true,true).fadeIn();
    });

    _____________________________________________

    $(‘#accordion > li’).click(
    function () {
    $this = $(“.ativo”);
    $this.stop().animate({‘width’:’115px’},500);
    $(‘.heading’,$this).stop(true,true).fadeIn();
    $(‘.description’,$this).stop(true,true).fadeOut(500);
    $(‘.bgDescription’,$this).stop(true,true).slideUp(700);
    var $this = $(this);
    $this.stop().animate({‘width’:’480px’},500);
    $(this).addClass(“ativo”);
    $(‘.heading’,$this).stop(true,true).fadeOut();
    $(‘.bgDescription’,$this).stop(true,true).slideDown(500);
    $(‘.description’,$this).stop(true,true).fadeIn();
    });

    _________________________________________________

    Gostaria de saber uma possivel resolução

    Obrigado
26. 

    Jão Ricardo, em 03/12/2011 @ 13:08

    Excelente artigo amigo!

    Por favor, no caso de usar apenas 1 div,,, como seria o click abrir e o click fechar ?
    no caso usarei como menu
27. 

    Bruno Wiltemburg, em 05/12/2011 @ 19:31

    Desculpe João Ricardo, mas não entendi sua dúvida, poderia ser mais específico? Envie parte de seu código para demonstrar.
28. 

    Sílvia Gomes, em 20/12/2011 @ 14:13

    Boa tarde, será que me podia ajudar, eu queria saber se é possível colocar um link directamente na imagem, ou seja quando a imagem abre dar para clicar e seguir para um endereço. Agradecia muito a sua ajuda.

    Obrigada,
    Aguardo resposta.
29. 

    Ademilson, em 24/01/2012 @ 15:33

    Olá Bruno,

    gostei do tutorial, parabens, mas também tenho uma dúvida, quando esta na transição de um menu para outro, um desce criando um menu embaixo, como modifica isto, para não ter está transição?
30. 

    Bruno Wiltemburg, em 24/01/2012 @ 15:39

    Ola Ademilson,

    Adiciona a propriedade do CSS overflow: hidden para a div que engloba tudo.

    Abraços

Outros links para esta postagem

RSS para os comentários nesta postagem. TrackBack URI

Deixe seu comentário