Publicado em 1 de ago.

Efeito Fada-In na navegação do site.

#desenvolvimento-frontend

Bom dia.

Os colgas podem me ajudar a criar sse efeito fade-in na navegação do site como foi feito nesse modelo?

Clique aqui

Obrigado

Discussão (5)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

André do Vale· 1 de ago.

HTML / CSS /JS (usando jQuery)

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Efeito fada</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
 $('.fada').each(function(){
 var content = $('> div ',this),
 tab = $('> ul li',this);
 $('div',content).eq(0).show();
 tab.eq(0).addClass('ativo');
 tab.click(function () {
 var index = $(this).index()
 $(this).addClass('ativo').siblings().removeClass()
 $('> div',content).fadeOut().eq(index).fadeIn();
 })
 })
})
</script>
<style type="text/css">

* {

margin: 0;
padding: 0;
border: none;
list-style: none;
}
.fada {
width: 400px;
height: 400px;
position: relativee;
}

.fada > ul {

display: inline-block;
}

.fada > ul li {

cursor: pointer;
font: bold 13px/40px Arial, Helvetica, sans-serif;
color: #fff;
float: left;
width: 100px;
}

.fada > ul li.ativo {

line-height: 35px;
border-bottom: 5px solid #fff;
}

.fada > * > :first-child {

background: orange;
}

.fada > * > :nth-child(2) {

background: blue;
}

.fada > * > :nth-child(3) {

background: green;
}

.fada > * > :last-child {

background: red;
}

.fada > div > div {

position: absolute;
display: none;
width: 400px;
height: 360px;
top: 40px;
color: #fff;
}
</style>
</head>

<body>
<div class="fada">
<ul>
	<li>Cor 1</li>
	<li>Cor 2</li>
	<li>Cor 3</li>
	<li>Cor 4</li>
</ul>
<div>
	<div>Cor 1</div>
	<div>Cor 2</div>
	<div>Cor 3</div>
	<div>Cor 4</div>
</div>
</div>
</body>
</html>

Leandro Persi· 1 de ago.

Coloquei o codigo que passou mas parece que tem um erro nesta linha

var content = $('> div ',this), tab = $('> ul li',this); $('div',content).eq(0).show(); tab.eq(0).addClass('ativo'); tab.click(function () { var index = $(this).index() $(this).addClass('ativo').siblings().removeClass() $('> div',content).fadeOut().eq(index).fadeIn(); }) })})

os botoes aparecem mas quando clico nao acontece nada

André do Vale· 1 de ago.

É necessário jQuery. Você o possui no seu projeto? Atenção também se possuir outro framework JS para não conflitar as chamadas.

Leandro Persi· 2 de ago.

Inseri o jquery mas continua sem funcionar, vou dizer as duvidas que tenho.

1 - Isso roda offline? estou sem servidor e sem o Wamp onde estou

2 - Eu preciso fazer alguma alteração nos links para funcionar?

3 - Pelo que o Dreanwaver passou a linha que esta com erro tem isso aqui:

var content = $('>

Obrigado

André do Vale· 2 de ago.

Testei aqui, novamente, o código completo e está funcional. Também não encontrei erros no código. :mellow:

A linha que você comentou, é esta:

var content = $('> div ',this), tab = $('> ul li',this);

Caso veja necessidade, pode separá-la, assim:

var content = $('> div ',this); // Aqui eu seleciono a DIV, que é filha direta do elemento geral das abas, para defini-la como a área do conteúdo;
var tab = $('> ul li',this); // E aqui, eu seleciono as LIs, que possui um ancestral filho direto do elemento das abas, e defino-as como sendo a variável responsável pela navegação