08/05/2008 - 15:35 > 6.361 Visualizações > 33 comentários

Collapsible Panel

Olá!
Mais uma vez trago essa novidade do Dreamweaver CS3 com spry. Trata-se do Collapsible Panel. Ele pode ser utilizado em conteúdo, galeria de imagens e principalmente pra criação de menus extensos, quando há a necessidade de otimizar espaços.

Dêem uma olhada no exemplo e veja como funciona.
Bom aprendizado

Assista à vídeo aula

Posts relacionados

Felipe Cardozo

É sócio diretor do MX Masters, portal de desenvolvimento especializado em vídeo aulas. Trabalha com ferramentas OpenSource como Wordpress, Magento entre outros, além de ministrar palestras em universidades do Rio de Janeiro.

Outros posts deste autor

Este autor atualmente possui 281 posts

Veja todos os posts de Felipe Cardozo

Comentários / Deixe seu Comentário

33 respostas para 'Collapsible Panel'

Franklin Costa Diz:
8/05/08 às 16:32
Muito interessante e util! flw por mais essa felipe!
Bruno Diz:
8/05/08 às 17:03
Aeee Felipe Blz Aee Eu Toh Com Varias Duvidas De Cria um Layout Desculpa Por Poder Coloca o Comentario Aqui….!!!

Mais Tipo Eu Toh Com problema Na Resolução Eu Crio Um Novo Documento 1024X768 Bom Ai Tah Soh Que Fica Com Pouco Espaço Para Cria Os Menu Essas Coisas Queria Saber Como Vc Fez Naquela Video AUla Criando Rodapé Ai Vc Deu Uma Aumentada FLw Felipe Vlwww Espero QUE vC Pode Me Ajuda Fui
Felipe Cardozo Diz:
8/05/08 às 18:51
Bruno, tudo certo?

Não entendi bem sua dúvida. Porque fica pouco espaço para criar os menus num documento 1024×768? Você tem um print?
Bruno Diz:
8/05/08 às 19:01
Aeee Felipe Tipo Assim O Espaço E Muito Pouco Para Cria Os Menu Não SobRA Espaço Para Cria o Rodapé…Naquele Video Aula Seu Do Rodapé Vc Deu Uma Aumentada No Layout Como Vc Fez Isso Pk o Layout Tah FIkando Muito Pikeno Os Espaços XxX Flwww Felipee Vlwww
Felipe Cardozo Diz:
8/05/08 às 19:06
Mas você diz espaço entre o topo e o rodapé? Se for isso, você pode sar Shift+Enter pra aumentar o layout…
Leandro Gomes da Silva Diz:
8/05/08 às 19:33
Felipe, pelo amor de Deus, faz uma vídeo aula enssinando a fazer um player p radio e um sistema para pedidos de músicas!! PORFAVOR!! preciso urgente dessa video aula…
Paulo Sérgio Diz:
8/05/08 às 19:37
Rapaz, tem apenas alguns dias que conheci este site, estou muito feliz por saber que existem pessoas como vcs que compartilham seus conhecimentos. Quero parabeniza-los por isso. Já vi umas …trocentas vídeo-aulas e achei todas de muita valia pra quem se interesse por este assunto. Estou com vocês, parabéns pela iniciativa. T++
Marcos Vinicius ''Sapo'' Diz:
8/05/08 às 20:06
Felipe ta de Parabens, com seus Tutoriais cara, seriaum mtu bons, axu q ja vi todos aki do Mx masterss.. aHUAhUAhUAahAUAa

Abraço

PS: podefze pergunta por aki q foge do tema da aula, coisas simples, cmo dicass ??
Felipe Cardozo Diz:
8/05/08 às 23:29
Leandro, tudo certo?
Assim que possível, dentro de nossa capacidade de tempo, iremos providenciar a vídeo aula.

Paulo, Obrigado pelas gentis palavras.

Marcos, esse espaço aqui é para tirar dúvidas também. Sinta-se à vontade!
Marcos Vinicius ''Sapo'' Diz:
9/05/08 às 0:17
Felipe, eu tava montando un ”Topo” bem legal baseado nas video aulas, ai eu vi nun site, q vc ja deve ter visto ” http://www.limao.com.br” o logotipo deles no topo da pagina, q o texto tem uma cor em un degrade, deixando ele meio perolizado,(texto em forma de imagem) mtu legall..
usando + ou – os meios q vc dava o efeito a’qua no Topo das video aulas com degrade branco 100% ate o 0% consegui deixar o stylo bem parecido, porem o fundo do texto (a imagem ) tbm pega o efeito do texto.. ”queria saber se tem algun jeito de deixar o efeito so no texto e n atingir o fundo ao redor do texto..consigo iso usando mascaras ??”

vlww desde ja
Abraço
Felipe Cardozo Diz:
9/05/08 às 0:47
Olá Marcos, tudo bem?
Você consegue fazer isso sim!

Irei preparar uma vídeo aula especial falando disso ainda esta semana, ok?

Abçs
Marcos Vinicius ''Sapo'' Diz:
9/05/08 às 11:46
Opa, legall ^^
Marcos Vinicius ''Sapo'' Diz:
9/05/08 às 11:58
Boa, uma video aula sobre esse assunto vai ser legal ^^

Dexo fze mais uma pergunta, os menus feitos com Spry, no modelo Accordion e o Collapsible, é posivel ao invez de colocar uma cor solida nele, por un gradiente, ou inserir uma imagem (icone) dentro do conteudo da Aba ??

Abçs
Felipe Cardozo Diz:
9/05/08 às 12:14
Olá Marcos, tudo tranqüilo?

Pode sim! Vasta você editar as configurações do CSS e colocar o gradiente como Background.

Sobre os ícones, você pode usar a lista para isso.
Joao Lima Diz:
9/05/08 às 16:41
Parabéns Felipe Cardozo, suas são show de bola…

Amigo vocês tem intensão de fazer aulas de web site com php ou asp?

Valeu…

Joao Lima
Marcos Vinicius ''Sapo'' Diz:
9/05/08 às 17:29
Opa, i ae Felipe

vllw pela dica, vo da uma fusada nas config do CSS e tentar fzer istoo q vc mi falou..
vlww viu

Abçs
Felipe Cardozo Diz:
9/05/08 às 19:53
Olá João, tudo bem?
Temos esta intenção sim. Estamos organizando uma equipe para colocar mais vídeo aulas de outras ferramentas.

Abçs
Edison Diz:
18/05/08 às 9:45
Super bacana essa video aula.Desde que conheci o site só venho aprendendo cada vez mais a cada dia obrigado a todos voçês.Felipe gostaria de sugerir se vc tiver tempo claro, um post semanal sobre um determinado menu para aprendermos a fazer vários tipos de menu.

Abraços!!!!
Roberto Pieri Diz:
27/05/08 às 3:23
olá queridos do MX masters.tenho uma duvida sobre o callapisible.
como na video aula criei 2 collapsible e ta funcinando legal , mas gostaria de saber se tem como apos abrir uma a outra se esconder sem ter que o usuario clique na anteriorpara fecha-la.eh possivel? ja tentei todas as propriedades e nao achei.
obrigado.
Felipe Cardozo Diz:
27/05/08 às 10:27
Olá Roberto, tudo bem?

Você até consegue manipular os efeitos mexendo no javascript, mas não recomendo, até porque se você alterar não será mais collapsible que é um efeito determinante.

Forte abraço!
Marcos Vinicius Diz:
28/05/08 às 13:26
i ai Felipe Tdu bomm?? to com uma duvida, espero q vc posa me ajudar.
criei um menu em Spy “Collapsible Panel” , e quando abro meu web site ele ja se encontra ”aberto”..
qual o ”evento” pra ele abrir fexado , para q eu precize clicar em sua aba para abrilo?

desde ja vlw ^^
to precizando desa informação..
se for alguma properties q eu precize add ela nu CSS, mi fale por favor.. t+

Abraço
Felipe Cardozo Diz:
28/05/08 às 16:17
E aí Marcos, tudo bem?
Na vídeo aula eu ensino isso, não?
Bom, vamos lá! Quando você clica na abinha azul claro, lá em baixo nas propriedades, aparece: “Default State” e se você deixar como “closed” ele fica fechado por default.

Abçs
Marciano Diz:
11/06/08 às 10:07
E ai Felipe Cardozo, tudo na paz?
Ta faltando video aula de PHP e JAVA aqui no seu site.
Mas de qualquer modo os conteudos aqui estao acima de bons, para ficar otimo so falta PHP, principalmente.
Vanessa Diz:
21/10/08 às 12:24
Olá Felipe.. fiz um menu Collapsible, mas gostaria de mudar a imagem do botão + para quando estiver fechado e – para quando estiver aberto… tem como? Já pesquisei na internet inteira e não estou achando nada. Confesso que isso está me enlouquecendo..rsrs. Aguardo seu contato.. e valeu pela ajuda! Bjs, Vanessa
Felipe Cardozo Diz:
23/10/08 às 14:14

Olá Vanessa, tudo bem?

Você deve verificar o nome da imagem da seta que está na pasta, por exemplo: seta.gif

Entre no arquivo CSS e procure por essa imagem na declaração da folha de estilo e remova a linha.

bjos
Eduardo Diz:
10/01/09 às 10:19
Felipe parabéns pelos tutos, queria colocar no meu site um menu com conteúdo do tipo accordion ou collapsible utilizando o spry. Minha dúvida como fazer com que os menus abram de forma vertical ou seja da direita para esquerda diferente da forma original horizontal de cima para baixo ou o contrario ? Existe como alterar isso ? obrigado abs
Rogieri Diz:
4/02/09 às 15:10
Falipe Cardozo espero que alcance o seus objetivos cara voçê merece muito e todos a mxmasters sou seu fã cara. Muito obrigado por fazer esses videos confeço que antes eu entrava em tudo quanto e site para pesquisar e aprender sobre html php mysql sql nossa eu levava quase meses pra aprender na mx eu aprendo em segundos deixo aqui meu muito obrigado. E cada dia eu conheço mais voçês da mx sabe estava procurando uns videos na mx e achei o video de natal numero #22 nossa eu ri muito cara alem de voçês nos ensinarem nos fazem rir tbm aqui é apenas um comentário espero que faça sentido pra voçês um grande abraço pra voçês sei que vc e o cara dos efeitos nos menus Spry – Collapsible Panel, menu bar entre outros nossa muito bom mesmo…
alanscali Diz:
17/08/09 às 11:04
Felipe ta de parabens mais porque quando voce abre as duas uma some o nome do botao??

ATT ALAN
Tatiana Perez Diz:
10/09/09 às 15:38
Olá Felipe, estou com dois problemas quanto ao uso do collapsible panel. Estou usando em um menu do meu site, porém quando visualizo no Firefox, ele fica todo encavalado. Estou fazendo alguma coisa de errado ou é comum não funcionar direito mesmo no Firefox? Tem alguma maneira de arrumar isso? E a outra dúvida é que estou colocando uma imagem do botão dentro do collapsible, gostaria de saber se é possível fazer um link nessa imagem para chamar uma página enquanto ele abre os subitens…será que consegui me explicar??
rss

Abraços

Tatiana
Maujor Diz:
4/12/09 às 18:35
da p/ colokar uma img dentro da tabela? (uma ótima aula)
Evandro Diz:
17/12/09 às 13:25
Boa tarde Felipe! Estou com um problema e não encontrei solução, talvez você possa me ajudar. Criei 2 ‘Collapsible Panel’, dentro de cada um criei + 2 (sub menu por exemplo). Olha ele aqui: http://www.arietesites.com.br/spry_teste/teste.html
O problema é o seguinte: Quando é clicado no sub menu, ele não empurra o outro ‘Collapsible Panel’ para baixo. Você saberia me dizer o que posso fazer? Obrigado, e parabens pelo conteúdo do seu site.
sérgio machado Diz:
25/12/09 às 21:13
ola parabens Felipe por essa aula eu assistir ela primeiramente no curso que comprei aqui na mxmasters. Então é o seguindo estou com uma duvida sera que daria certo visualizar o conteudo de forma hover, sem a nessecidade de clicar com o mouse> Pois dias atras vi em um site um menu assim que a gente ia passando o mouse em cima e ele ia abrindo aotomaticamente e fechando logo em seguida após o mesmo ter passado sobre ele.
E tambem no lugar de conteudo era uma imagem que funcionava de forma de um botão.

eu agradeço quem respoder iso pra mim.

boa noite
JULIO VIANA Diz:
22/04/10 às 19:17
muito mass.. .adorei a video aula sei que nao foi so eu xD..