sistema de abre e fecha utilizando Bootstrap

[rikaschmitt 54]

Tenho um site que estou fazendo utilizando Bootstrap.

Nele eu tenho uma parte que consiste em alguns ícones grandes distribuídos assim:

 

Em resoluções maiores, a distribuição ficará assim.. 2 linhas com 3 ícones cada.. e depois vai se ajustando por causa do Bootstrap.

 

Quando clicamos em cada ícone, surge embaixo um bloco com textos e conteúdos a parte... Exemplo:

 

 

 

Porém.. isso está me quebrando a cabeça. Não consegui deixar de um jeito prático...

 

Como cada ícone está dentro de uma div "col-", eu deixei o conteúdo oculto de cada ícone também dentro da mesma div.. e por jQuery, quando clica, ele mostra a div oculta.. Porém é que esse conteúdo oculto está sendo limitado ao tamanho da div pai ('col-'), e é preciso que ocupe a largura toda da janela.. como na imagem de exemplo....

 

Dai fiz uma gambiarra por jQuery, porém outro problema... que é a margin da div.. ela não fica grudada no canto esquerdo da tela.. precisaria criar algum jeito de auto calcular essa distância e depois aplicar a div oculta na hora dela aparecer....

 

Ai ai..

 

Alguém teria uma sugestão/ideia de como fazer?

[stromdh 15]

cara, eu sugiro a vc não colocar os icones dentro do col.

 

tu pode por tudo dentro de um col-md-12 centralizado dentro de um ul com a classe list-inline.

 

Abaixo faz um outro row -> col-md-12 com a div oculta.

 

ve se ajuda

 

abs

[rikaschmitt 54]

No caso, colocar todos os 6 ícones dentro de um único "col-md-12"?

E dai dentro dos <li> eu coloco um novo "row" para o conteúdo oculto?

[stromdh 15]

sim... dae tu pode controlar o padding entre eles no ccs da ul, como seria em cada col e como é uma lista terá o mesmo efeito do col, colocando um abaixo do outro conforme a resolução...

 

quanto o conteúdo oculto pode ser abaixo do ul ou em uma nova estrutura row

[rikaschmitt 54]

Mas dai acho que não rola.. tipo.. Pq cada ícone tem seu conteúdo e cada conteúdo tem que abrir logo abaixo do respectivo icone.. se eu por o conteúdo no final da UL, todos vão abrir no final..

 

ou não?

[stromdh 15]

não... tu não vai por o conteúdo no final da ul (dentro de u ma li), mas tens um problema porque eles abrirão na extensão da página e não bem abaixo do respectivo icone.

<div class="row">
      <div class="col-md-12">
            <ul class="list-inine">
                <li></li>  
            </ul>
            <!-- 
                  tu pode por teu conteúdo aqui
            -->
      </div>
</div>

<div class="row">
      <div class="col-md-12 conteudoOculto">
            <!-- 
                  ou aqui
            -->
      </div>
</div>

aqui a gambas seria setar no css a posição de cada div oculto abaixo do li, mas dae acho que daria uma mão muito ruim

[rikaschmitt 54]

Exato. Problema é que precisa mesmo abrir embaixo de cada ícone o conteúdo respectivo. :(

 

Estou testando várias formas.. alguma tem que dar certo.

[stromdh 15]

ou outra sugestão seria setar em cada col-md position:relative e por dentro deste uma div com position:absolute e width:100% dae ele fica sempre dentro desta div e com a largura que tu setar, mas tem que ser em % pra ficar responsivo

 

 

neste caso tu tem que ajustar o top do div absolute

[rikaschmitt 54]

ou outra sugestão seria setar em cada col-md position:relative e por dentro deste uma div com position:absolute e width:100% dae ele fica sempre dentro desta div e com a largura que tu setar, mas tem que ser em % pra ficar responsivo

 

Sim.

Minha primeira tentativa foi assim.

 

Coloquei uma div de conteúdo com position absolute dentro da "col", até deu.. mas o problema é realmente a dimensão dessa div...

 

Agora estou testando algo puramente por jquery..

[stromdh 15]

cara, tu pode fazer uma gambas assim... uma ideia de estrutura, vamo ve se da:

<div class="row">
     <div class="col-md-3">
          <!-- conteudo -->
     </div>
     <div class="col-md-3">
          <!-- conteudo -->
     </div>
     <div class="col-md-3">
          <!-- conteudo -->
     </div>
     <div class="col-md-3">
          <!-- conteudo -->
     </div>
</div>
<div class="row">
     <div class="col-md-12">
          <div class="col-md-12">
               <!-- primeiro icon -->
          </div>
          <div class="col-md-offset3 col-md-9">
               <!-- primeiro icon -->
          </div>
          <div class="col-md-offset6 col-md-6">
               <!-- primeiro icon -->
          </div>
          <div class="col-md-offset9 col-md-3">
               <!-- primeiro icon -->
          </div>
     </div>
</div>

abaixo deste tu repete as colunas com os icones... essa foi minha última ideia sem o uso de jquery. Mas de qualquer maneira tenho certeza que tu vai resolver :)

[rikaschmitt 54]

Consegui por jQuery.

 

A estrutura html ficou assim:

<div class="col-md-4">
   <div class="icone"></div>
   <div class="conteudo"></div>
</div>

Dai por jQuery eu fiz um cálculo, pegando a largura do documento inicial e após o conteúdo abrir, dai subtraí e apliquei como margin negativa do conteúdo, para que ocupe a largura certinho.

 

Valeu stromdh :D