Esta funcionalidade pode também ser aplicada a um texto com vários tópicos ficando disponível os titulos e quando clicado mostra somente o texto do tópico. Este recurso é muito interessante quando temos um texto grande dividido em tópicos, pois não deixa a página muito longa.

Nesta implementação vamos utilizar uma lista de definições ( dl – dt- dd ) então segue abaixo o HTML do menu:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<dl>
    <dt><a href="#">Menu 1</li></a></dt>
    <dd>
        <ul>
            <li><a href="#">Menu 1 - Item 1</a></li>
            <li><a href="#">Menu 1 - Item 2</a></li>
            <li><a href="#">Menu 1 - Item 3</a></li>
        </ul>
    </dd>
    <dt><a href="#">Menu 2</li></a></dt>
    <dd>
        <ul>
            <li><a href="#">Menu 2 - Item 1</a></li>
            <li><a href="#">Menu 2 - Item 2</a></li>
            <li><a href="#">Menu 2 - Item 3</a></li>
        </ul>
    </dd>
    <dt><a href="#">Menu 3</li></a></dt>
    <dd>
        <ul>
            <li><a href="#">Menu 3 - Item 1</a></li>
            <li><a href="#">Menu 3 - Item 2</a></li>
            <li><a href="#">Menu 3 - Item 3</a></li>
        </ul>
    </dd>
</dl>

Agora aplicamos um CSS:

1
2
3
4
5
6

     dl { width: 300px; }
     dl,dd { margin: 0; }
     dt { background: #CCC; font-size: 18px; padding: 5px; margin: 2px; }
     dt a { color: #000; }
     dd a { color: #000; }
     ul { list-style: none; padding: 5px; }

Agora vamos a mágica com a biblioteca JQuery(Não se esqueça de importar a biblioteca!):

1
2
3
4
5
6
7
8

 $(document).ready(function(){
     $("dd").hide();
     $("dt a").click(function(){
        $("dd:visible").slideUp("slow");
        $(this).parent().next().slideDown("slow");
        return false;
     });
});

Na linha 1 escondemos todos os elementos dd(as definições ou seja os sub-links) as ficando somente os dl (os titulos das categorias/tópicos) a mostra.

Na linha 3 definimos o evento onclick do link do elemento dt titulo para que faça a animação slideUP()(linha 4) no elemento dd que está visível ocultando os sub-links.

Na linha 5 através do método parent() seleciona o elemento pai do link clicado(o elemento dt) e através do método next() seleciona o próximo elemento a partir do elemento dt que contém o link clicado, que é o elementodd e chama o método slideDown(“slow”); que mostra os sub-links.

Veja o exemplo

Espero que seja util, até a próxima!

Bom para começar baixe o PrettyPhoto 2.4.3 e descomacte em uma pasta. Ele é divido em 3 pastas css, js e images, para usalo você vai precisar das 3.

Crie um novo documento HTML e inclua na tag header a bilbioteca JQuery, o plugin que esta na pasta js, a folha de estilo que esta na pasta css:

1
2
3

<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script>
<script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" charset="utf-8" />

Agora para criarmos a nossa galeria vamos precisar das fotos e das suas miniaturas, para nosso exemplo vamos armazena-la em uma pasta chamada img.

Para cada imagem vamos criar um link para imagem grande que quando clicado vai abri-la em nossoo lightbox.

1
2
3

<a href="img/foto1-g.jpg" rel="prettyPhoto">
   <img src="img/foto1-p.jpg" alt="Foto do Espaço 1" />
</a>

O atributo rel=”prettyPhoto” é utilizado para selecionar os links que devem fazer parte de nossa galeria e para isso deve ser aplicado o plugin PrettyPhoto que será responsavel por abrir a imagem que esta no atributo href de nosso link no lightbox.

Para aplicar o plugin nos links acrescentamos na tag header o seguinte código:

1
2
3
4
5

<script type="text/javascript" charset="utf-8">
    $(document).ready(function(){
	    $("a[rel^='prettyPhoto']").prettyPhoto();
	});
</script>

Exemplo de galeria feita com PrettyPhoto.

Bem simples não?

Existem muitos Plugins para JQuery com as mais variadas funções, então não tente reinventar a roda todo dia, apenas procure uma que sirva no seu caminhão.

Aquele Abraço.

Um sprite é um objeto gráfico, normalmente uma imagem, que se move numa tela sem deixar rastros, foi muito utilizado nos jogos 2D há um tempo atrás, o pessoal deve estar lembrando do mugen não?

Bom então como isso funciona na web? Todos sabemos que quanto maior o numero de imagens que utilizamos em um site, maior é o número de requisições que um browser deve fazer para exibi-la, certo? Então quando precisamos fazer uma animação, por javascript ou mesmo um simples :hover, em um site que precise de várias imagens, seria interessante que quando a animação começasse já estivessem todas as imagens carregadas, ou poderia pular alguns quadros alterando o efeito desejado. Isso pode ser feito carregando todas as imagens necessárias dentro de um único arquivo de imagem e quando necessário, mudar a posição da imagem para mostrar somente a parte necessária para o usuário.

Como diria um antigo colega “show me the code“!

1
2
3
4
5
6

<ul>
	<li><a class="botao" href="#">Botão 1</a></li>
	<li><a class="botao" href="#">Botão 2</a></li>
	<li><a class="botao" href="#">Botão 3</a></li>
	<li><a class="botao" href="#">Botão 4</a></li>
</ul>

Nosso HTML é bem simples, apenas uma lista de links que pertencem a class .botao para ficar mais fácil definir as regras.

Primeiro vamos ver como deve ficar nossa imagem. Se quisermos um botão de 40px de altura com uma troca a imagem deve ter 80px de altura e obviamente deve conter dois botões.

Código CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

*{
    list-style:none;
    font-weight:bold;
    font-size:14px;
    text-decoration:none;
    color:#415FAF;
}
 
.botao{
    background:url(botao.jpg) no-repeat;
    width:200px;
    height:20px;
    display:block;
    text-align:center;
    padding:10px 0;
}
.botao:hover{
    background-position: 0 -40px;
}

Como este é apenas um exemplo, comecei utilizando uma regra para definir as propriedades que me interessavam de um modo bem geral.

Como podem ver das linhas 1 à 7, tiramos os marcadores da lista(linha 2), colocamos o texto em negrito(linha 3), definimos a fonte(linha 4), retiramos o sublinhado padrão do link(linha 5) e definimos a cor do texto(linha 6).

A partir da linha 9 é que nos interessa, definimos a imagem como background na linha 10, e o tamanho do botão nas linhas 11 e 12, como nosso botão é um link, que por padrão tem a propriedade display como inline, deve ser alterado para block para respeitar as as medidas que definimos. Nas linhas 14 e 15 utilizamos para centralizar o texto do botão.

Para fazer nossa mágica utilizaremos o a pseudo-classe :hover, como podemos ver na linha 18, para que quando passarmos o mouse pelo link mudamos o posicionamento do background, para isso utilizamos a propriedade background-postion que move o background no eixo x e y respectivamente.

Segue o link para baixar o exemplo, que também mostra como usar várias imagens ao mesmo tempo.