Jump to content
  • Revista PROGRAMAR: Já está disponível a edição #60 da revista programar. Faz já o download aqui!

skilledpt

Elaborar barra com dropdown

Recommended Posts

skilledpt

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:

4j4bic.png

E quando se clica-se no +:

2ld9e93.png

Obs: Exemplo feito no photoshop.


Como está agora:

30kun82.png

Agradeçia uma ajuda,
Cumps

 

Conteudo da caixa do dropwdown:

<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> 
Edited by skilledpt

Share this post


Link to post
Share on other sites
skilledpt

Já consegi obrigado na mesma, deixo os codigos usados para o caso de alguem precisar.

 

<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>

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.