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
Compartilhe esse post:
Sou desenvolvedor web, amante de tecnologia, gosto de disseminar conhecimento através de vídeo aulas e artigos.
Atualmente temos 7 comentários para este post. Participe você também, clique aqui e comente sobre o assunto.
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.
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?
ResponderOlá...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!
ResponderFantá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.
ResponderMuito 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.
ResponderFala 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
© 2008-2023 - RBTech.info | Todos os direitos reservados | Hospedado por Innova Host
É proibida a reprodução total ou parcial de qualquer conteúdo deste site.
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