Ir para conteúdo
marcelocardoso

collapse para exibir no thunderbird, gmail etc...

Recommended Posts

galera...
este código abaixo é com código para fazer COLLAPSE, funciona perfeitamente em brownsers, porém no THUNDERBIRD e programas de emails, enfrento problemas, mas tentando aqui, copiando código alí e aqui, consegui resolver para que funcione no THUNDERBIRD. 

 

       .collapseCss {
            margin-top: 50px;
            width: 50%;
        }

        .collapseCss .collapseContent {
            margin-bottom: 4px;
            margin-bottom: 15px;
        }

        .collapseCss .collapseHeader,
        .collapseCss .collapseBody {
            padding: 10px;
            display: block;
            border: 1px solid #dbdbdb;
        }

        .collapseCss .collapseHeader {
            width: 100%;
            border: 1px solid #dbdbdb;
            cursor: pointer;
            border-radius: 5px;
            transition: background-color .15s ease-in-out;
        }

        .collapseCss .collapseHeader:hover {
            background-color: #dbdbdb;
        }

        .collapseCss .collapseBody {
            background-color: #f4f4f4;
            margin-top: 5px;
            border-bottom-right-radius: 5px;
            border-bottom-left-radius: 5px;
            display: none;
        }

        .collapseCss .collapseContent:hover .collapseBody {
            display: block;
        }

    </style>

    <div class="collapseCss">
         <div class="collapseContent">
            <div class="collapseHeader">Collapse2</div>
            <div class="collapseBody">Content collapse2.</div>
        </div>
    </div>

Agora, tipo.
Ao passar o mouse em cima, clicar, ele EXPANDE.
até ai, td bem...

mas COMO POSSO ao passar o mouse, clicar, ele fixar FIXO, depois de sair o foco.
e depois somente, quando clicar novamente, ele RETORNE ao modo COLLAPSE.

Mas lembrando, programas de emails, não suportam javascript, jquery, então, tem que ser só em CSS, tem COMO isso acima?
sugestões, agradeço de como implementar...

Obrigado.

Compartilhar este post


Link para o post
Compartilhar em outros sites

basicamente oq preciso, é:

1) expandir o collapse no hover;
2) em seguida deixar ele aberto fixo na tela;
3) depois, só retornar se eu clicar novamente no objeto;

que tag css posso usar?

Compartilhar este post


Link para o post
Compartilhar em outros sites

GALERA

Para ser melhor na explicação, seguem outros dois exemplos que testei no THUNDERBIRD, onde eles funcionam este COLLAPSE:

HTML

    <div class="container">
        <div class="collapse_html">
            <div class="collapse_conteudo">
                <div class="collapse_header">COLLAPSE - Esse funciona em programa de emails</div>
                <div class="collapse_body">Depending on what browsers to put up with for non-compliant browsers you may want to check out the</div>
            </div>
        </div>
    </div>


    <div class="container">
        <span><b>COLLAPSE - Não funciona em programas de emails</b></span>
        <ul>
            <li>
                Depending on what browsers/devices you are looking to browsers you may want to check out the
            </li>
        </ul>
    </div>

CSS
 


        .collapse_html {
            margin-top: 50px;
            width: 50%;
        }
        .collapse_html .collapse_conteudo {
            margin-bottom: 4px;
            margin-bottom: 15px;
        }
        .collapse_html .collapse_header,
        .collapse_html .collapse_body {
            padding: 10px;
            display: block;
            border: 1px solid #dbdbdb;
        }
        .collapse_html .collapse_header {
            width: 100%;
            border: 1px solid #dbdbdb;
            cursor: pointer;
            border-radius: 5px;
            transition: background-color .15s ease-in-out;
        }
        .collapse_html .collapse_header:hover {
            background-color: #dbdbdb;
        }
        .collapse_html .collapse_body {
            background-color: #f4f4f4;
            margin-top: 5px;
            border-bottom-right-radius: 5px;
            border-bottom-left-radius: 5px;
            display: none;
        }
        .collapse_html .collapse_conteudo:hover .collapse_body {
            display: block;
        }
		li {
            padding: 5px;
        }
        ul {
            overflow: hidden;
            max-height: 0px;
            list-style: none;
            transition: max-height 0.3s;
        }
        span:hover+ul {
            max-height: 500px;
            position: fixed;
            background-color: dodgerblue;
            color: white;
            width: 100%;
            height: auto;
            padding: 5px;
        }

A única coisa que gostaria de FAZER é: ambos os dois exemplos acima, ao PASSAR O MOUSE, ele exibe pelo HOVER a DIV abaixo, porém, EU GOSTARIA DE ao exibir, DEIXAR a DIV FIXA, mesmo ao tirar o ponteiro do mouse de cima.

TEM COMO FAZER isso, tem alguma taxa para usar no HOVER????

1) Deixar a DIV fixa na tela ao passar o mouse em cima do link;
2) Só fechar a DIV se clicar DAÍ no link novamente,

Tem como?
Sugestões de códigos, exemplos agradeço.
É o único collapse que testei que funciona no thunderbird, só preciso fazer isso....

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por hostbasico
      Segue o link para verificação de como é a imagem: https://magz.vallesites.com.br/
      Fiz a montagem dela por partes, mas acabou não dando certo, pois um link enta entrando dentro da outra imagem, ficando assim errado.
       
      Gostaria de saber a melhor forma, pois ao passar o mouse, preciso que a parte da imagem do respectivo serviço fique de outra cor.
      E ao clicar essa cor diferente fique fixa e a descrição abaixo dela mude, conforme eu clicar em uma dessas imagens.
       
      Desde já agradeço.
    • Por Venaxmyth
      Boa tarde caros amigos, como estão?
      Estou bem, apenas com um probleminha em uma página minha.
      E sou iniciante em tudo.
       
      Vou compartilhar da formar mais clara aqui para vocês entenderem.
      Atualmente meu site tem apenas um botão flutuante na página como mostrar as setas na imagem abaixo:


       
       
      Só que estou tentando adicionar outro botão conforme mostrarei em imagem abaixo também.
      O efeito do outro botão em cor laranja, é quando passar o mouse ele abre umas informações.
      Ele só funciona se eu remover o css principal do site, acredito que teja algo em conflito com ele.
       
      Vou postar o site em anexo, realmente precisaria de uma ajuda.
      Ficaria grato quem conseguisse me desvendar esse problema.
       
      A imagem do segundo botão é como está aqui abaixo:
       

       
       
      Em anexo deixarei o código do meu site.
      https://www.mediafire.com/file/k66gp06p460ff3c/Tema_site.zip/file
    • Por Claudia França
      Prezados preciso terminar um projeto do Visa checkout e, estou com dificuldades no fim dele. Peguei no meio do caminho e como programo a pouco tempo gostaria que me ajudassem. 
      Ao escolher um valor para um transação, eu preciso enviar para o email da empresa e do cliente, as inconformações com dados da transação como valor etc.  Fiz o codico abaixo para empresa receber o valor, mas não funcionou. 
      <!doctype html>
      <html>
      <head>
      <meta charset="UTF-8">
      <title>Documento sem título</title>
      </head>
      <body>
          <pre>
              
          <?php
      function pegaValor($valor) {
          return isset($_POST[$valor]) ? $_POST[$valor] : '';
      }
      function validaEmail($email) {
          return filter_var($email, FILTER_VALIDATE_EMAIL);
      }
      function enviaEmail($de, $assunto, $mensagem, $para, $email_servidor) {
          $headers = "From: $email_servidor\r\n" .
                     "Reply-To: $de\r\n" .
                     "X-Mailer: PHP/" . phpversion() . "\r\n";
          $headers .= "MIME-Version: 1.0\r\n";
          $headers .= "Content-Type: text/html; charset=ISO-8859-1\r\n";
       
        mail($para, $assunto, nl2br($mensagem), $headers);
      }
      $email_servidor = "cjfranca2004@gmail.com";
      $para = "cjfranca2004@gmail.com";
      $de = pegaValor("valor");
      $mensagem = pegaValor("real");
      $mensagem=pegaValor("dolar");
      $name="valor";
      print_r($mensagem);
      print_r($para);
      print_r($valor);
      print_r($mensagem);
      ?>
      </pre>
      </body>
          
      </html>
       
      Não deu certo.  E por fim ainda mostra essa mensagem de erro, ao finalizar a transação.
       
       
      Desde já agradeço todo esforço em me ajudarem.
       
       
       
       

    • Por clickanapolis
      Bom dia, pessoal eu estou com uma duvida.   Eu crio colunas com   <div class="col-md-4">   no meu site e crio dentro de cada coluna uma div para mostrar informações.   O problema que quando entro pelo celular essa div fica uma colada na outra, pelo computador fica perfeita separadas, mais no responsivo fica estranho uma div colada na outra sem espaçamento, como eu daria um espaçamento entre as col quando tiver no responsivo alguém já passou por isso?
    • Por Pablo Macedo
      Eae, sou "novato", já tinha estudado html, mas parei por muito tempo e to voltando, mas ao fazer o primeiro site, tive problema nas imagens - banner e logo - elas não aparecem nos sites, segue anexo



       
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.