Menu efeito sanfona - parte 02

Aviso importante!

Eu sei que você não quer ver propagandas, porém o conteúdo gratuito só está aqui graças a publicidade. Considere desativar o AdBlock para esse site.

Nesta aula iremos concluir a criação do nosso menu estilo sanfona, se você perdeu a aula anterior, confira a mesma aqui.

Códigos criados na aula:

HTML/JavaScript:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Jquery Efeito Sanfona</title>
	<link rel='stylesheet' type='text/css' href='style.css' />
    <script type="text/javascript" src="scripts/jquery.min.js"></script>
</head>

<body>

<ul class="sanfona" id="sanfona">
                <li class="filme1">
                    <div class="titulo">Rocky</div>
                    <div class="bgDestaque"></div>
                    <div class="comentario">
                        <h2>Rocky</h2>
                        <p>Rocky Balboa (Sylvester Stallone), um lutador de boxe medocre que trabalha como "cobrador" de um agiota, tem a chance de enfrentar Apollo Creed (Carl Weathers), o campeo mundial dos pesos-pesados, que teve a idia de dar oportunidade a um desconhecido como um golpe publicitrio.</p>
                        <a href="http://www.mxmasters.com.br/">MXMasters</a>
                      </div>
                </li>

                <li class="filme2">
                    <div class="titulo">Predator</div>
                    <div class="bgDestaque"></div>
                    <div class="comentario">
                        <h2>Predator</h2>
                        <p>O eterno exterminador Schwarzenegger contra um alien high-tech, de trancinhas rastafri, e fissurado por crnios humanos; Genial! McTiernan mescla com maestria ao, suspense, fico e muita violncia, neste que , com certeza, um dos dez melhores filmes de todos os tempos no gnero.</p>
                        <a href=" http://www.oficinadanet.com.br/">Oficina da Net</a>
                    </div>

                </li>
                <li class="filme3">
                    <div class="titulo">Harry Potter</div>
                    <div class="bgDestaque"></div>
                    <div class="comentario">
                        <h2>Harry Potter</h2>
                        <p>Eu como um f muito viciado de Harry Potter, no me conformo que o meu filme preferido nesse mundo do cinema vai acabar. Desde os meus 4 anos de idade eu ia ver Harry Potter (e hoje estou com 14), estou muito ansioso, e ao mesmo tempo com vontade que no chegue dia 15 de julho de 2011.</p>
                       <a href="http://dev.rbtech.info/">Rbtech</a>
                    </div>

                </li>
                <li class="filme4">
                    <div class="titulo">Angelina Jolie</div>
                    <div class="bgDestaque"></div>
                    <div class="comentario">
                        <h2>Angelina Jolie</h2>
                        <p>Evelyn Salt (Angelina Jolie) jurou servir e honrar seu pas. Agora trabalhando como agente da CIA, ela  colocada  prova ao ser acusada por um desertor russo de ser uma espio russa infiltrada.</p>
                        Ficheiro
                    </div>
                </li>
            </ul><!--==[[SANFONA]]==-->
<script type="text/javascript">
$(function() {
    $('#sanfona li').hover( //A primeira funao  atribuir o efeito de hover aos li de um elemento da classe sanfona
        function () {
            var $this = $(this);// variavel "this"  um objeto jQuery,aqui temos a API jQuery completa  nossa disposio

            $this.stop().animate({'width':'480px'},500);//a funo stop antes da animao  essencial
            $('.titulo',$this).stop(true,true).fadeOut();
            $('.bgDestaque',$this).stop(true,true).slideDown(500);
            $('.comentario',$this).stop(true,true).fadeIn();
        }, <!-- fecha function 01-->

        function () {
            var $this = $(this);
            $this.stop().animate({'width':'115px'},1000);
            $('.titulo',$this).stop(true,true).fadeIn();
            $('.comentario',$this).stop(true,true).fadeOut(500);
            $('.bgDestaque',$this).stop(true,true).slideUp(700);
        } <!-- fecha function 02-->
    );   <!-- fecha sanfona li-->
});       <!--fecha function principal-->

</script>  <!--fecha script -->
</body>
</html>

CSS:

*{margin:0; padding:0;}
body {background:#CCFFFF;}

ul.sanfona{list-style:none;position:absolute;
    right:380px;top:50px;font-family: Verdana,"Trebuchet MS", serif;
    font-size: 16px;font-style: italic;line-height: 1.5em;}

ul.sanfona li{float:right;width:115px; height:480px;
    display:block; border-right:2px solid #fff; border-bottom:2px solid #fff;background-color:#fff; background-repeat:no-repeat;
    background-position:center center;position:relative;
    overflow:hidden; cursor:pointer;
            box-shadow:1px 7px 15px #000;
       -moz-box-shadow:1px 7px 15px #000;
    -webkit-box-shadow:1px 7px 15px #000;}

ul.sanfona li.filme1{background-image:url(1.jpg);}
ul.sanfona li.filme2{background-image:url(2.jpg);}
ul.sanfona li.filme3{background-image:url(3.jpg);}
ul.sanfona li.filme4{background-image:url(4.jpg);
                   border-left:2px solid #fff;}

ul.sanfona li .titulo{background-color:#fff;padding:10px;
    margin-top:60px; opacity:0.6; text-transform:uppercase;
    font-style:normal;font-weight:bold;letter-spacing:1px;
    font-size:14px; color:#444;  text-align:center;
    text-shadow:-1px -1px 1px #ccc;
	font-family: "HelveticaNeueLT Std", Verdana, "Trebuchet MS";}

	ul.sanfona li .comentario{position:absolute;width:480px;height:175px;
    bottom:0px; left:0px;display:none;}

	ul.sanfona li .comentario h2{text-transform:uppercase;font-style:normal; font-weight:bold;letter-spacing:1px; font-size:30px;
    color:#888;text-align:left; margin:0px 0px 15px 20px;
    text-shadow:-1px -1px 1px #ccc;
	font-family: "Trajan Pro", Verdana,"Trebuchet MS";}

	ul.sanfona li .comentario p{line-height:14px; margin:10px 22px;
    font-family:Georgia, Verdana,"Trebuchet MS";font-size:12px;
    font-style: italic;font-weight: normal;text-transform: none;
    letter-spacing: normal;line-height: 1.6em;color:#444;}

	ul.sanfona li .comentario a{font-family: "Trebuchet MS", Georgia, Verdana;font-style:normal; font-size:11px;text-decoration:none;
    color:#999;position:absolute;bottom:5px;left:20px;}

ul.sanfona li .bgDestaque{background:transparent url(bgDestaque.png) repeat-x top left; display:none; height:340px;position:absolute;
    bottom:0px; left:0px;width:100%;}

Ou se preferir baixe o script aqui

Sobre o autor

Roberto Pereira

Sou desenvolvedor web, amante de tecnologia, gosto de disseminar conhecimento através de vídeo aulas e artigos.

Comentários

Atualmente temos 7 comentários para este post. Participe você também, clique aqui e comente sobre o assunto.

  • fabio ghiringhelli comentou em

    Muito boa a video-aula, parabens, qualé o arquivo que vc coloca no ul.sanfona li .bgDestaque(bgDestaque.png)??? o que é pq não vi em nenhum momento...or favor me ajude nisso...obrigado

    Responder
  • Felipe Costa comentou em

    Boa tarde Roberto, parabéns pelo seu tutorial, sou amador em se tratando de programação e consegui perfeitamente seguir seu tutorial, bem didático!
    Portanto tenho uma dúvida, dependendo da resolução da tela do navegador, quando o mouse passa por cima das layers, há uma quebra de "div" quando se desloca pra esquerda, o primeiro quadro desloca-se para baixo, como se fosse um parágrafo abaixo. Eu percebi que levando a DIV toda do menu para o lado direito da tela isso pode ser evitado, há como definir uma configuração automática dessa DIV ficar posicionada 100% (x,y) independente da resolução da tela? Acredito que não né? Pois teria que definir uma quantidade de sobra à esquerda quando o evento de slide fosse ativado.

    Responder
  • Olá Roberto Pereira, ótimo video, só fiquei com uma pequena dúvida, o slider ficou muito bonito, entretanto a largura varia muito, e isso não é interessante para um capo de notícias de um portal por exemplo, uma solução, seria que o primeiro li(slide), ficasse fixo no inicio da animação, para definir uma largura fixa ao slider completo, como fazer isso?

    Responder
  • Anderson Coimbra comentou em

    Olá...muito boa sua VA, mas gostaria de saber se tem como adaptar esse script para slides...por exemplo, ficar trocando os itens de tempo em tempo...tem como?

    Abraço!

    Responder
  • Felipe comentou em

    Fantástica a sua vídeo aula esta de parabéns mesmo.
    Só fiquei com uma duvida espero que você possa me ajudar, no código do CSS você coloca:

    "ul.sanfona li .bgDestaque{background:transparent url(bgDestaque.png) repeat-x top left; display:none; height:340px;position:absolute;
    46 bottom:0px; left:0px;width:100%;}"

    Assim criando um efeito na imagem, porem como eu crio esse efeito de imagem ?? teria como você disponibilizar a que você utilizou.

    Caso esteja errado por favor me desculpar e mais uma vez uma excelente vídeo aula.

    Responder
  • Cristian Etchebest comentou em

    Muito boa tua VA, a abertura do vídeo e cinematográfica hehehe...

    Pelo jeito tu manja muito bem de JavaScript, será que você poderia dar umas aulas básicas de JQuery com PHP, tenho algumas dificuldades em obter o dado com JavaScrip e salvá-los com PHP.

    Parabéns e continue bombando VA’s.

    Responder
    • Roberto Pereira comentou em

      Fala Cristian, toda semana estaremos desenvolvendo uma nova video aula,
      o JavaScript é sem dúvida, após o HTML, a linguagem mais utilizada para o desenvolvimento de websites
      Abraço

      Responder

Deixe seu comentário