Fórum dos Fóruns

Fórum dos Fóruns Forumeiros

Welcome FdF Bem-vindo ao fórum de suporte Forumeiros  Muito feliz


Para aproveitar tudo o que o nosso fórum lhe oferece, agradecemos que se identifique, se já é nosso membro, ou que se junte à nossa comunidade, fazendo o seu registo.
Conectar-se

Esqueci minha senha

Perdi minha senha!
Você precisa recuperar sua senha?
Clique aqui
Os membros mais ativos da semana
Luiz
 
Gaaratsu
 
iScroll
 
Daniel Yan
 
Ketholy
 
Shek
 
Eduardo Lima
 
ranzatti
 
cocas20
 
LucasPofahl
 

Quem está conectado
244 usuários online :: 14 usuários cadastrados, Nenhum Invisível e 230 Visitantes :: 2 Motores de busca

banzé, BrunoLemos, Connor R., Daniel Yan, DaniloT_DS, Gaaratsu, Guzonaro, iScroll, Ketholy, Lost154, LucasPofahl, Luiz, Pedxz, ranzatti

[ Ver toda a lista ]


O recorde de usuários online foi de 3131 em Qui 24 Dez 2009 - 13:05

Elaborar barra com dropdown

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

Resolvido Elaborar barra com dropdown

Mensagem por skilledpt em Qui 20 Out 2016 - 17:38

Detalhes da questão


Endereço do fórum: lsteam.forumeiros.com
Versão do fórum: PunBB

Descrição


Boa noite, depois de várias tentativas falhadas a elaborar uma barra com dropdown, peço que alguém me ajude.

Queria fazer algo deste género:



E quando se clica-se no +:



Obs: Exemplo feito no photoshop.

Conteudo da caixa do dropwdown:

Código:
<link rel="shortcut icon" href="https://ssl.gstatic.com/docs/spreadsheets/forms/favicon_jfk2.png" type="image/x-icon" /><meta http-equiv="Content-type" content="text/html; charset=utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=10; chrome=1;" /><meta name="fragment" content="!" /><base target="_blank" /><link rel="stylesheet" type="text/css" href="" /> <link href="/static/forms/client/css/2463467140-formview_embedded_ltr.css" type="text/css" rel="stylesheet" /><style type="text/css">
</style><center>
<div class="main">
   
   <div class="titulo">
      
      <h2>
           <center>Pedido música no teamspeak
      </h2>
      
   </div>
    <center>
   <div class="ac_box">
        <center>
      <div class="ac_box">
           <center>
         <div class="ac_box">
              <center>
            <div class="ac_box">
                 <center>
               <div class="ac_box">
                   <script type="text/javascript">
      /**
 * @license
 *! H5F
 * https://github.com/ryanseddon/H5F/
 * Copyright (c) Ryan Seddon | Licensed MIT
 */

(function(e,t){"function"==typeof define&&define.amd?define(t):e.H5F=t()})(this,function(){var e,t,a,i,n,r,s,l,u,o,c,d,v,f,p,m,h,g,b,y,w,C,N,A,E,$,k=document,x=k.createElement("input"),q=/^[a-zA-Z0-9.!#$%&'*+-\/=?\^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/,M=/[a-z][\-\.+a-z]*:\/\//i,L=/^(input|select|textarea)$/i;return r=function(e,t){var a=!e.nodeType||!1,i={validClass:"valid",invalidClass:"error",requiredClass:"required",placeholderClass:"placeholder"};if("object"==typeof t)for(var r in i)t[r]===void 0&&(t[r]=i[r]);if(n=t||i,a)for(var l=0,u=e.length;u>l;l++)s(e[l]);else s(e)},s=function(a){var i,n=a.elements,r=n.length,s=!!a.attributes.novalidate;if(b(a,"invalid",u,!0),b(a,"blur",u,!0),b(a,"input",u,!0),b(a,"keyup",u,!0),b(a,"focus",u,!0),b(a,"change",u,!0),b(a,"click",o,!0),b(a,"submit",function(i){e=!0,t||s||a.checkValidity()||w(i)},!1),!v())for(a.checkValidity=function(){return c(a)};r--;)i=!!n[r].attributes.required,"fieldset"!==n[r].nodeName.toLowerCase()&&l(n[r])},l=function(e){var t=e,a=g(t),n={type:t.getAttribute("type"),pattern:t.getAttribute("pattern"),placeholder:t.getAttribute("placeholder")},r=/^(email|url)$/i,s=/^(input|keyup)$/i,l=r.test(n.type)?n.type:n.pattern?n.pattern:!1,u=f(t,l),o=m(t,"step"),v=m(t,"min"),h=m(t,"max"),b=!(""===t.validationMessage||void 0===t.validationMessage);t.checkValidity=function(){return c.call(this,t)},t.setCustomValidity=function(e){d.call(t,e)},t.validity={valueMissing:a,patternMismatch:u,rangeUnderflow:v,rangeOverflow:h,stepMismatch:o,customError:b,valid:!(a||u||o||v||h||b)},n.placeholder&&!s.test(i)&&p(t)},u=function(e){var t=C(e)||e,a=/^(input|keyup|focusin|focus|change)$/i,r=/^(submit|image|button|reset)$/i,s=/^(checkbox|radio)$/i,o=!0;!L.test(t.nodeName)||r.test(t.type)||r.test(t.nodeName)||(i=e.type,v()||l(t),t.validity.valid&&(""!==t.value||s.test(t.type))||t.value!==t.getAttribute("placeholder")&&t.validity.valid?(A(t,[n.invalidClass,n.requiredClass]),N(t,n.validClass)):a.test(i)?t.validity.valueMissing&&A(t,[n.requiredClass,n.invalidClass,n.validClass]):t.validity.valueMissing?(A(t,[n.invalidClass,n.validClass]),N(t,n.requiredClass)):t.validity.valid||(A(t,[n.validClass,n.requiredClass]),N(t,n.invalidClass)),"input"===i&&o&&(y(t.form,"keyup",u,!0),o=!1))},c=function(t){var a,i,n,r,s=!1;if("form"===t.nodeName.toLowerCase()){a=t.elements;for(var l=0,o=a.length;o>l;l++)i=a[l],n=!!i.attributes.required,r=!!i.attributes.pattern,"fieldset"!==i.nodeName.toLowerCase()&&(n||r&&n)&&(u(i),i.validity.valid||s||(e&&i.focus(),s=!0));return!s}return u(t),t.validity.valid},d=function(e){var t=this;t.validationMessage=e},o=function(e){var a=C(e);a.attributes.formnovalidate&&"submit"===a.type&&(t=!0)},v=function(){return E(x,"validity")&&E(x,"checkValidity")},f=function(e,t){if("email"===t)return!q.test(e.value);if("url"===t)return!M.test(e.value);if(t){var i=e.getAttribute("placeholder"),n=e.value;return a=RegExp("^(?:"+t+")$"),n===i?!1:""===n?!1:!a.test(e.value)}return!1},p=function(e){var t={placeholder:e.getAttribute("placeholder")},a=/^(focus|focusin|submit)$/i,r=/^(input|textarea)$/i,s=/^password$/i,l=!!("placeholder"in x);l||!r.test(e.nodeName)||s.test(e.type)||(""!==e.value||a.test(i)?e.value===t.placeholder&&a.test(i)&&(e.value="",A(e,n.placeholderClass)):(e.value=t.placeholder,b(e.form,"submit",function(){i="submit",p(e)},!0),N(e,n.placeholderClass)))},m=function(e,t){var a=parseInt(e.getAttribute("min"),10)||0,i=parseInt(e.getAttribute("max"),10)||!1,n=parseInt(e.getAttribute("step"),10)||1,r=parseInt(e.value,10),s=(r-a)%n;return g(e)||isNaN(r)?"number"===e.getAttribute("type")?!0:!1:"step"===t?e.getAttribute("step")?0!==s:!1:"min"===t?e.getAttribute("min")?a>r:!1:"max"===t?e.getAttribute("max")?r>i:!1:void 0},h=function(e){var t=!!e.attributes.required;return t?g(e):!1},g=function(e){var t=e.getAttribute("placeholder"),a=/^(checkbox|radio)$/i,i=!!e.attributes.required;return!(!i||""!==e.value&&e.value!==t&&(!a.test(e.type)||$(e)))},b=function(e,t,a,i){E(window,"addEventListener")?e.addEventListener(t,a,i):E(window,"attachEvent")&&window.event!==void 0&&("blur"===t?t="focusout":"focus"===t&&(t="focusin"),e.attachEvent("on"+t,a))},y=function(e,t,a,i){E(window,"removeEventListener")?e.removeEventListener(t,a,i):E(window,"detachEvent")&&window.event!==void 0&&e.detachEvent("on"+t,a)},w=function(e){e=e||window.event,e.stopPropagation&&e.preventDefault?(e.stopPropagation(),e.preventDefault()):(e.cancelBubble=!0,e.returnValue=!1)},C=function(e){return e=e||window.event,e.target||e.srcElement},N=function(e,t){var a;e.className?(a=RegExp("(^|\\s)"+t+"(\\s|$)"),a.test(e.className)||(e.className+=" "+t)):e.className=t},A=function(e,t){var a,i,n="object"==typeof t?t.length:1,r=n;if(e.className)if(e.className===t)e.className="";else for(;n--;)a=RegExp("(^|\\s)"+(r>1?t[n]:t)+"(\\s|$)"),i=e.className.match(a),i&&3===i.length&&(e.className=e.className.replace(a,i[1]&&i[2]?" ":""))},E=function(e,t){var a=typeof e[t],i=RegExp("^function|object$","i");return!!(i.test(a)&&e[t]||"unknown"===a)},$=function(e){for(var t=document.getElementsByName(e.name),a=0;t.length>a;a++)if(t[a].checked)return!0;return!1},{setup:r}});
</script>
                    <center><hr class="ss-email-break" style="display:none;" />
                  
               </div>
               
            </div>
                                         
              <center><div class="ss-form">
               
               <form action="https://docs.google.com/forms/d/1URUK_tEYRHw3XJzzL_Gm1kUl0jI-KvfROxfeiGdVdDc/formResponse?embedded=true" method="POST" id="ss-form" target="_self" onsubmit="">
                  
                  <div class="warn">
    <b>Nota:</b>&nbsp;&nbsp;Lista de Pedidos&nbsp;&nbsp;<span style="font-size: 19px;">→&nbsp;</span> <a href="https://docs.google.com/spreadsheet/ccc?key=0Am-liZKirZ05dDEya3c1cDI4Y2lPWlAwTnZXaHcwWXc#gid=1">Clique aqui</span></div>
  </a>
<div class=" list"="" style="padding-left: 0">
                     <p>
                     </p><br />
                     <ol class="ss-form-question errorbox-good" listitem"="" role=">
                     
                     <div role=">
                        
                        <div dir="ltr" class="ss-item ss-item-required ss-text">
                           
                           <div class="ss-form-entry">
                               <label class="ss-q-item-label" for="entry_1093977644"> </label>
                              <div class="ss-q-title">
<strong><strong> Nome/Link da Música:<strong><label for="itemView.getDomIdToLabel()" aria-label="(Campo obrigatório)"></label><span class="ss-required-asterisk"></span><br /><br /></strong></strong></strong><strong> </strong>
                              </div><strong><label class="ss-q-item-label" for="entry_1093977644"></label><strong></strong><strong></strong> </strong>
                              <div class="ss-q-help ss-secondary-text" dir="ltr">
                                 
</div><strong><label class="ss-q-item-label" for="entry_1093977644"></label><strong></strong><strong></strong><strong></strong><strong></strong><input type="text" name="entry.1093977644" value="" class="ss-q-short" id="entry_1093977644" dir="auto" aria-label="Nome/Link da Música:  " aria-required="true" required="" title="" /> </strong>
                              <div class="error-message">
                                 
                              </div><strong><strong><strong><br /></strong></strong> </strong>
                           </div><strong> </strong>
                        </div><strong> </strong>
                     </ol>
                  </div><strong><strong></strong><strong></strong> </strong>
                  <div class="ss-form-question errorbox-good" role="listitem">
                     
                     <div dir="ltr" class="ss-item ss-item-required ss-text">
                        
                        <div class="ss-form-entry">
                            <label class="ss-q-item-label" for="entry_1152973043"> </label>
                           <div class="ss-q-title">
                               <strong> O teu nick:<label for="itemView.getDomIdToLabel()" aria-label="(Campo obrigatório)"></label><span class="ss-required-asterisk"><br /><br /></span> </strong>
                           </div><strong><label class="ss-q-item-label" for="entry_1152973043"></label> </strong>
                           <div class="ss-q-help ss-secondary-text" dir="ltr">
                              
                           </div><strong><label class="ss-q-item-label" for="entry_1152973043"></label><input type="text" name="entry.1152973043" value="" class="ss-q-short" id="entry_1152973043" dir="auto" aria-label="O teu nick:  " aria-required="true" required="" title="" /> </strong>
                           <div class="error-message">
                              
                           </div><strong><br /> </strong>
                        </div><strong> </strong>
                     </div><strong> </strong>
                  </div><strong><strong></strong><strong></strong><strong></strong> </strong>
                  
               
            </div><strong><input b="" 8511406244098280032"]<input="" type="hidden" name="pageHistory" value="0" /> <input type="hidden" name="fbzx" value="8511406244098280032" /> </strong>
            <div class="ss-item ss-navigate">
                <tt><span style="color: blue;" aria-hidden="true" class="ss-required-asterisk"></span><tt></tt></tt> <a target="_blank" href="http://www.endereço.com.br"> </a>
               <center>
                  
                  <center>
                     
                  </center>
                  
                  <center>
                     
                  </center>
                   <br>
                  <table id="navigation-table">
                     
                     <tbody>
                        
                        <tr>
                           
                           <td class="ss-form-entry goog-inline-block" id="navigation-buttons" dir="ltr">
<input type="submit" name="submit" value="Enviar" id="ss-submit" /> </center>
                           </td>
                           
                        </tr>
                        
                     </tbody>
                     
                  </table><a target="_blank" href="http://www.endereço.com.br"> </a>
               </center>
               
            </div><strong><a target="_blank" href="http://www.endereço.com.br"> </a> <a target="_blank" href="http://www.endereço.com.br"> </a> </strong>
         </div><strong> <a target="_blank" href="http://www.endereço.com.br"></a><tt></tt><tt></tt> </strong>
         <div id="docs-aria-speakable" class="docs-a11y-ariascreenreader-speakable docs-offscreen" aria-live="assertive" role="region" aria-atomic="">
            
         </div><strong><a target="_blank" href="http://www.endereço.com.br"><tt><tt></tt></tt> </a> </strong>
      </div><strong><a target="_blank" href="http://www.endereço.com.br"><tt><tt> <script type="text/javascript" src="/static/forms/client/js/3084181259-formviewer_prd__pt_pt.js"></script><script type="text/javascript">H5F.setup(document.getElementById('ss-form'));_initFormViewer(
        "[100,\x22#CCC\x22,[]\n]\n");</lil>
    </script></tt></tt></a> </strong>
   </div><strong> </strong>
</div><strong> </strong> <strong> </strong> <strong> </strong> <strong> </strong>
</div></form>

Como está agora:



Agradeçia uma ajuda,
Cumps
avatar

skilledpt
Nível 4

Masculino
Inscrito dia : 17/10/2016
Mensagens : 33
Pontos Ativos : 67

Ver perfil do usuário http://lsteam.forumeiros.com

Resolvido Re: Elaborar barra com dropdown

Mensagem por skilledpt em Qui 20 Out 2016 - 19:08

Ja consegi, podem arquivar.

Codigo usado:
Código:
<div id="spoiler" style="display:none">
Conteudo escondido
</div>
<button title="Mostrar" type="button" onclick="if(document.getElementById('spoiler') .style.display=='none') {document.getElementById('spoiler') .style.display=''}else{document.getElementById('spoiler') .style.display='none'}">+</button>
avatar

skilledpt
Nível 4

Masculino
Inscrito dia : 17/10/2016
Mensagens : 33
Pontos Ativos : 67

Ver perfil do usuário http://lsteam.forumeiros.com

Resolvido Re: Elaborar barra com dropdown

Mensagem por Cream em Qui 20 Out 2016 - 22:49

Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada.

Tópico marcado como Resolvido e movido para "Questões resolvidas".
avatar

Cream
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 15/12/2010
Mensagens : 8540
Pontos Ativos : 11633

Ver perfil do usuário http://ajuda.forumeiros.com

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo


Permissão deste fórum:
Você não pode responder aos tópicos neste fórum