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 Débora Provensi
      Oi pessoal,
      tô brigando bastante com esse último item. Não quer alinhar de jeito nenhum.
      Cada imagem é um radio button.
      Segue o código css aplicado:
       
      #container input { /* height: 210px; */ visibility: hidden; display: inline-block; } #container label { cursor: pointer; /* display: block; */ /* float: left; */ /* height: 210px; */ } .thumb { width: 16%; display: inline-block; vertical-align: top; margin-bottom: 2%; }  

    • Por MAYCON BARTOWSKI
      Galera, modifiquei uma lista para destacar o texto no mouse hover e ai os textos ficaram com aparência de link (azul e sublinhado). Nao consigo remover, alguem consegue me ajudar?
      Segue o link do html para download
      https://drive.google.com/open?id=1NKk77cmyO3S2Yke4zK4ELrH2kin33Hw9
    • Por Claudia França
      Prezados preciso de um help para  finalizar um trabalho.
         Com o <select> para que o usuário entre com valores em dólar ou real e, ao clicar no botão confirmar, o valor seja direcionado para um link que vai autenticar a transação,  EX: um link do visa checkout ou cielo checkout. 
         Sei que tem as chamadas das funções, para passar os parâmetros, e tentei fazer algo aqui no sublime, mas sempre dá erro.
      Espero alguma ajuda para terminar esse trabalho de teste. Obrigada dede já.
       
      "

              <select>
                  <option value="Real">Real</option>
                  <option value="Dolar">Dolar</option>
              </select>
            
      ...botao confirmar
      botao cancelar
       
      "
       
      Vejam como ficou a figura em anexo.

    • Por DiegoLemosSilva
      boa tarde pessoal.
      minha duvida e mais sobre boas praticas, quando nos vamos desenvolver uma loja virtual para cada produto vendido na loja deve haver uma pagina html ou podemos montar uma modelo e editar ela quando o cliente clicar no produto ?
    • Por paikoala
      bom dia galera, tenho um site que montei e hospedei ele no 000WEBHOST. enquanto estava montando ele em localhost funcionava tudo certo tanto no crhome quanto no firefox mas quando subi ele pra hospedagem no firefox ele começou a zuar. Pq o site abre normal no chrome e no firefox ele fica assim:
       


×

Informação importante

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