Pergunta sobre Design

Pergunta
Olá amigos,
Estou com um desafio de design. É um "efeito" muito útil quando as páginas se “alargam” demais pelo conteúdo e não se vêem bem.
Para ordenar os conteúdos, vi que ao clicar um link, "se abre", uma área que os contém. Esta área se abre e se fecha, alargando e encurtando a página.
Deixo a seguir o endereço para que possam ver este efeito, que se parece muito aos menus selects, só que não contém links, e sim conteúdo da página web.
Trato de descobrir a forma em que isto se faz. Se alguém tiver alguma idéia já estarei agradecido.

Observe nesta página, nas legendas, "grupos electrógenos", "Potencias de Generación", "Grupos Electrogenos Gas"
http://www.palmero.com/power_grupos.php

Valorize esta FAQ:
A FAQ Pergunta sobre Design tem Pertence à categoria:
Resposta
Olá Jonas, na verdade o efeito que você quer fazer é um dos mais simples e úteis em páginas web, se chama slide down que faz com que apareça e slide up que faz com que desapareça, é ainda mais fácil se utilizar algum framework de javascript tal como mootools, prototype, jQuery, etc, eu pessoalmente prefiro jQuery. Explico como se faz isso:

1.- Entrem em www.jquery.com e baixe o arquivo jquery.js

2.- Inclua o arquivo jquery que baixou em sua página web.

3.- Crie um link com href="javascript:void(0)" e no onclick coloque $('#idDoContainer').slideDown('velocidade'), velocidade pode ser normal, fast ou slow.

4.- Crie um div onde irá seu conteúdo o qual tem o atributo style="display:none;".

5.- Execute a página e clique no link e pronto este se desdobra com o efeito slide.

Espero que lhe sirva e que pratique muito.

Saudações!

Por Cristian Avila Montalvo

Voltar à árvore de categorias Voltar à árvore de categorias

 
FAQs relacionadas
  + Programas para fazer GIFs animados
  + Conselhos para fazer uma página web
  + O que são as cores web?
  + Diferença entre Fireworks e Flash
  + Velocidade e tamanhos ótimos para uma web
  + O que são os dingbat?
  + Criar planilhas em Dreamweaver
  + Por que aconselham aprender HTML?
  + Gifs animados com Photoshop
  + Páginas fluídas
  + [...]

Ver todas las FAQS de Design

Usuários :    login / registro

Home | Sobre nós | Copyright | Anuncie | Entrar em contato