header e menu aggiuntivo responsive

Area dedicata al phpBB 3.1.X
Avatar utente
ilpino
Registered User
Registered User
Non connesso: Non connesso
Messaggi: 58
Iscritto il: 06/03/2013, 18:16
Versione phpBB3: 3.1.9
Stile utilizzato: Prosilver
Versione SEO: NO
Mod / Estensioni installate: Si
Forum: www.mitichegs.it
Località: venezia

header e menu aggiuntivo responsive

Messaggioda ilpino » 07/06/2016, 19:34

ciao a tutti, dopo tanto :redface: !
non trovando un'estensione per il phpbb 3.1.9 che creasse un menu responsive aggiuntivo, tramite un programmino free me lo sono fatto e l'ho faticosamente inserito nell'overallheader, assieme, tra l'altro a un'immagine anch'essa responsive. Se qualche buon'anima che sa farlo volesse creare l'estensione per facilitare tutto posso dargli i codici e i css. (Tra l'altro l'ho poi usato per il resto del sito ma è un'altra storia).

non so se posso inserire immagini del mio forum, quindi le metto con le voci cancellate.

il menu è sempre centrato nella pagina, la sua larghezza è determinata dal numero di link, nello smatphone appare chiuso e cliccando sulla voce menu si apre a discesa
Non hai i permessi necessari per visualizzare i file allegati in questo messaggio.

Avatar utente
alex75
Amministratore
Amministratore
Non connesso: Non connesso
Messaggi: 2699
Iscritto il: 23/08/2012, 23:45
Versione phpBB3: 3.1.6
Stile utilizzato: Prosilver
Versione SEO: SI
Mod / Estensioni installate: Si
Forum: phpbb-store.it
Località: palermo

Re: header e menu aggiuntivo responsive

Messaggioda alex75 » 08/06/2016, 13:33

posta il codice e spiegaci meglio dove dovrebbe andare e cosa dovrebbe fare ;-) cortesemente aggiorna il tuo profilo...

Avatar utente
ilpino
Registered User
Registered User
Non connesso: Non connesso
Messaggi: 58
Iscritto il: 06/03/2013, 18:16
Versione phpBB3: 3.1.9
Stile utilizzato: Prosilver
Versione SEO: NO
Mod / Estensioni installate: Si
Forum: www.mitichegs.it
Località: venezia

Re: header e menu aggiuntivo responsive

Messaggioda ilpino » 08/06/2016, 15:23

Hai ragione, ho scritto in velocità, profilo modificato ma ti chiedo una cosa anche in mp.

L’esigenza nasce diversi anni fa dal fatto che nel mio sito oltre al forum ci sono anche altre pagine, anche se il phpbb3 la fa da padrone tant’è che l’ho messo come index.
Mi piace quindi che tutto il sito, forum compreso abbia la stessa testata.
All’epoca ho creato testata e menu uguali sia per le pagine esterne, che per il phpbb (3.0.x) nel quale li ho caricati nel forum andando a modificare l’overallheader.
Poi, dopo l’aggiornamento al 3.1.9, ripresentandosi la stessa situazione sono andato anche li a ricaricare il codice nel nuovo overallheader.

Notando che la 3.1.9 è responsive, mi sono posto il problema di come risolvere la testata con il menu modificati che ovviamente non lo erano, risolvendo con il codice che metto qui sotto.

Ma anche qui prove riprove e modifica manuale, e quindi la mia domanda era se ne potesse venire fuori un’estensione per un menu responsive, perchè il sistema per installarle e rimuoverle per chi fatica con i codici come me è meraviglioso! ce ne sono diverse di tue, una meglio dell’altra, anche nel mio forum, ma soprattutto per la 3.1 ho trovato solo qualche estensione che aggiunge dei link dentro l’header o un menu sotto l’header ma non responsive.

ecco il tutto (il .js e i css sono quelli prodotti direttamente dal programma che ho usato per creare il menu)

apri overall_header.html

trova

Codice: Seleziona tutto

<body id="phpbb" class="nojs notouch section-{SCRIPT_NAME} {S_CONTENT_DIRECTION} {BODY_CLASS}">


aggiungi sotto


Codice: Seleziona tutto

<!-- swimbi code start -->
<link rel="stylesheet" type="text/css" href="menu_files/swimbi.css"/>
<div id="swimbi">
    <ul>
        <li><a href=“link” target="_top" title="Home page">HOME</a></li>
        <li><a href="link" target="_top" title="titolo">menu1</a></li>
        <li><a href="link" target="_top" title=“titolo”>FORUM</a></li>
        <li><a href="link" target="_top" title="titolo">menu2</a></li>
        <li><a href="link" target="_top" title="titolo">menu3</a></li>
        <li><a href="link" target="_top" title="titolo">menu4</a></li>
        <li><a href="link" target="_top" title="titolo">menu5</a></li>
        <li><a href="link" target="_top" title="titolo">menu6</a></li>
        <li><a href="link" target="_top" title="titolo">menu7</a></li>
        <li><a href="link" target="_top" title="titolo">menu8</a></li>
    </ul>
<canvas><noscript>- drop down css menu from swimbi.com. All Rights Reserved</noscript></canvas>
</div>
<script src="menu_files/swimbi.js"></script>
<!-- swimbi code end -->



ovviamente “link” va sostituito con il percorso dove punta il pulsante, titolo con il titolo del pulsante e menu1 - 2 ecc con il nome del pulsante.

poi

aprire …style/prosilver/theme/stylesheet.css e aggiungere sotto

Codice: Seleziona tutto

@import url("swimbi.css");


aprire …style/prosilver/template

copiare dentro swimbi.js

svuotare la cache da pca

fine

se poi si vuole aggiungere anche una testata fatta da un’immagine responsive bisogna:

apri overall_header.html

cancella tutta la parte di default dove c’è il campo azzurro e il logo (le guide le ho trovate anche in questo sito)

trova

Codice: Seleziona tutto

<meta name="viewport" content="width=device-width, initial-scale=1" />


aggiungi sotto

Codice: Seleziona tutto

<link href="stylePP.css" rel="stylesheet" type="text/css">


trova

Codice: Seleziona tutto

<body id="phpbb" class="nojs notouch section-{SCRIPT_NAME} {S_CONTENT_DIRECTION} {BODY_CLASS}">


aggiungi sotto

Codice: Seleziona tutto

<div class="img-wrapper">
  <div align="center"><img src=“percorsoimmagine.gif" alt=“nome” class="responsive" >
   
  </div>
</div>


percorsoimmagine va sostituito con quello giusto

aprire …style/prosilver/theme/stylesheet.css e aggiungere sotto

Codice: Seleziona tutto

@import url("stylePP.css");


copiare stylePP.css nella cartella …style/prosilver/theme

svuotare la cache da pca


fine

swimbi.js

Codice: Seleziona tutto

//2.0.3m Unregistered
var t=!0,K=!1;(function(q,V,L,y,d,oa,aa,ga,pa,g,F,W,v,H,za,b,X,qa,ra,sa,ta,ua,Aa,M,P,N,z){function ha(a){A=B+q;return String.fromCharCode(a)+F}function Y(a){A=B+q;return V.createElement(a)}function Q(a){E.height=a.offsetHeight;E.width=a.offsetWidth}function ia(a,h){for(var c,d=C.children;a<d.length;a++)if(c=d[a],c=r(c,v),"swsearch"===c.getAttribute(z))Z=c;else if(!c.A||c.A!==c.scrollWidth)c.A=c.scrollWidth,h=1;h&&!ca&&(ca=!r(C,v).offsetWidth);d=L.innerWidth!=R;ca&&(h=0,d&&r(C,v).offsetWidth&&L.location.reload(K),va());if(d||O||h)R=L.innerWidth,Z&&Z.removeAttribute("data-rend"),ja(S,b.n,b.l,b.m,0,0),O&&(O=K);setTimeout(function(){ia(0,0)},99)}function va(){var a=C.getElementsByClassName("swsearch")[0];if(a){var b=a.parentNode;a.id="swmobsearch";S.appendChild(a);C.removeChild(b)}}function ka(a){H.src=b.G+","+a.b;H.onload=function(){E.width=E.width;a.s=H.width;a.r=H.height;u.drawImage(H,d,d,a.s,a.r);la=u.getImageData(d,d,a.s,a.r);a.I=la;a.a[g]&&(a.z=a.a[g]);var b=a.a[l];b&&(b==q&&(a.K=q),b==B&&(a.L=q),b==g&&(a.J=q));a.J&&(a.d.src=H.src);a.e=a.a[d];a.f=a.a[q];a.w=a.a[B];a.g=a.a[A];a.k=d;a.B=d;a.q=d;a.v=d;a.a[l+q]&&(a.k=a.a[l+q]);a.a[l+B]&&(a.B=a.a[l+B]);a.a[l+A]&&(a.q=a.a[l+A]);a.a[l+g]&&(a.v=a.a[l+g]);a.z&&(a.d=new Image,a.d.src=H.src);X.length>d?ka(X.pop()):ia()}}function T(a){function b(c,e){for(var f=d;f<g;f++)l[c+f]=v[e+f],f==A&&(l[c+f]=a.alpha*v[e+f]|d)}function c(a,c){for(var f=d;f<a;f+=g)b(w+f,c?e:e+f);w+=G}function ba(a,f){for(var c=d;c<a;c+=g)b(w+c,f?e:e+c),y.H(e,w+c,f?e:e+c);w+=G+r}function x(b,c,e){for(var h=d;h<g;h++)l[c+h]=(v[e+h]+v[f+e+h])/B|d,h==A&&(l[c+h]=a.alpha*l[c+h]|d);--b;b>d&&x(b,G+c,e)}if(!(a.b<d)){var m=E.width-a.k-a.B,n=E.height-a.q-a.v,k=a.s,p=a.r;if(a.z)u.globalAlpha=a.alpha,u.drawImage(a.d,a.k,a.q,m,n),u.globalAlpha=1;else if(0!=m){var s=u.createImageData(m,n),f=k*g,G=m*g,r=d,D=a.w+a.g,C=(n-D-(p-D)+q)/(p-D),l=s.data,v=a.I.data,D=a.w*f,z=(p-a.g)*f,w=d,e;for(e=d;e<D;e+=f)c(a.e*g,K);var y=new function(){var a,b,c;return{H:function(f,e,h){b<f&&(a+=C,a>q?(c=a|d,r=G*c,a%=q):c=r=d);b=f;c>d&&x(c,G+e,h)},t:function(){a=b=c=d}}};y.t();for(e=D;e<z;e+=f)ba(a.e*g,K);var w=(n-a.g)*G,F=(p-a.g)*f;for(e=F;e<p*f;e+=f)c(a.e*g,K);w=(m-a.f)*g;for(e=k=(k-a.f)*g;e<D;e+=f)c(a.f*g,K);y.t();for(e=k+D;e<k+z;e+=f)ba(a.f*g,K);w=(n-a.g)*G+(m-a.f)*g;for(e=F+k;e<p*f;e+=f)c(a.f*g,K);w=a.e*g;m=(m-a.e-a.f)*g;for(e=w;e<D;e+=f)c(m,t);D=a.e*g+z;for(y.t();e<D;e+=f)ba(m,t);w=a.e*g+(n-a.g)*G;for(e=D;e<p*f;e+=f)c(m,t);u.putImageData(s,a.k,a.q)}}}function ma(a,h){var c=a.parentNode,d=c.offsetWidth,g=a.offsetWidth,m=C.offsetWidth;if(a&&c.getAttribute(z)!==N){var n=I(a)+g;if(0==h&&a.getAttribute(z)==N+"s"&&!b.u){d=I(C)+m;if(m>=g){if(n>d)var k=n-d}else I(C)<I(a)&&(k=I(a)-(I(C)-(g-m)/2|0));J(a,"left:-"+k+M)}else n>R?0==h?J(a,"left:-"+(n-R+10)+M):(m=r(a,v).offsetHeight,J(a,"left:"+(-(g-d)-m)+M+"; margin-top:"+m+M),a.setAttribute("data-keepv",1)):g+I(c)+d<R&&(a.style.left="",a.style.marginTop="")}}function wa(a,h,c,g){function q(){var a=parseInt(s.style.top);2!=a&&(2<a&&a--,2>a&&a++,s.style.top=a+M,setTimeout(function(){q()},20))}function m(a){"curr"!==a.getAttribute("id")&&a.setAttribute(b.c,"background:none;")}function n(){clearInterval(k);k=null;h.b<d||m(p)}var k,p=r(a,v),s;a.onmouseover=function(){if(!k&&p.offsetHeight+l>a.offsetHeight){if(!(h.b<d)){var f=p,n=h;Q(f);T(n);c||$(b.h,1);U(f)}if(c&&("number"!==typeof swAnim&&a.getAttribute(z)!==N)&&(f=t,da&&da.offsetTop<a.offsetTop&&(f=K),da=a,s=r(a,W)))s.style.top=(f?10:-6)+M,q();(f=r(a,W))?ma(f,g):h.L&&m(p)}clearInterval(k);k=null};a.onmouseout=function(){k=setInterval(n,10)}}function na(a,d,c){d?(J(a,sa),ma(a,c)):(d=a.getAttribute(b.c).replace(/display\s*:\s*block\s*;?/,F),a.setAttribute(b.c,d),a.style.left="",a.style.marginTop="")}function ja(a,h,c,g,x,m){var n=r(a,W);if(n){x&&na(n,t,m++);if(m===q&&!a.ch){a.ch=q;var k=Y(ua);k.setAttribute(z,"ch");a.appendChild(k)}for(var p;p=p?ea(p.nextSibling):ea(n.firstChild);)if(k=r(p,v)){var s=k,f=s.getAttribute("data-icon");f&&s.setAttribute("data-icn",ha("0x"+f));p.removeAttribute(b.c);Q(k);c.K&&r(n,ta)==p||(n.getAttribute(z)===N+"s"||c.b<d)||(T(c),U(p));if(x)p.getAttribute(z)===N&&J(p,"width:"+p.offsetWidth+"px");else{if(b.u){var s=p,f=h,l=!x;Q(s);s.removeAttribute(b.c);T(f);l&&$(b.i);U(s)}J(p,"width:"+k.offsetWidth+"px")}"curr"===k.getAttribute("id")&&(k.setAttribute("data-show","1"),s=k,f=g,l=x,Q(s),T(f),l||$(b.h,1),U(s),k.removeAttribute("data-show"));wa(p,g,x,m);ja(p,b.j,b.o,b.p,q,m)}if((!b.u||x)&&a.getAttribute(z)!==N&&!(x&&b.j.b<d))a=!x,Q(n),n.removeAttribute(b.c),T(h),a&&$(b.i),U(n);x&&na(n,K,m)}!x&&"function"===typeof swdoneCB&&swdoneCB(ga,Z)}function I(a){for(var b=0;a;)b+=a.offsetLeft,a=a.offsetParent;return b}function $(a,b){if(a.d.src){var c=u.createPattern(a.d,"repeat"),g=a.a;u.rect(g[d],g[B],E.width-g[d]-g[q],E.height-g[B]-g[A]);u.fillStyle=c;b&&(u.globalCompositeOperation="source-atop");u.globalAlpha=a.alpha;u.fill();u.globalAlpha=1}}function J(a,d){var c=a.getAttribute(b.c);a.setAttribute(b.c,(c?c+";":F)+d)}function U(a){J(a,b.F+qa+E.toDataURL()+ra)}function r(a,b){g=B+B;return a.getElementsByTagName(b)[d]}function ea(a){if(a)return!a.tagName?ea(a.nextSibling):a}function xa(){ka(X.pop())}var la,B=q+q,A=g-q,ya=oa.slice(-q),l=B+A;b.n={};b.l={};b.m={};b.n.b=1008;b.n.alpha=1;b.n.a=[7,6,6,6];b.l.b=92;b.l.alpha=1;b.l.a=[2,0,1,1,0,1];b.m.b=1876;b.m.alpha=.62;b.m.a=[8,8,1,1,0,0,1,0,1,1];b.C=5;b.c=2;b.G=18;b.F=11;b.M=4;b.D=950;b.i={};b.j={};b.o={};b.p={};b.h={};b.i.b=-3;b.i.alpha=1;b.i.a=[1,1,1,1,0,4];b.i.d=new Image;b.j.b=-3;b.j.alpha=.88;b.j.a=[0];b.o.b=-3;b.o.alpha=.88;b.o.a=[0,0,0,0,0,0];b.p.b=496;b.p.alpha=.92;b.p.a=[3,3,3,3,0,0,2,2,1,1];b.h.b=-3;b.h.alpha=.60;b.h.a=[1,0,1,1,0,4];b.h.d=new Image;b.u=0;var fa="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;jnbhf0qoh<cbtf75cbdlhspvoe;vsmdRtwkLcwbs!ovtus>(=dbowbt?=b!isfg>#iuuq;00xxx/txjncj/dpn#?Gsff!iunm!cz!nfbot!pg!nfov=0b?!nbef!cz!txjncj/dpn=0dbowbt?(<b\\5^)*-xjoepx/beeFwfouMjtufofs)#mpbe#-gvodujpo)*|wbs!e>epdvnfou-x>xjoepx-m>x/mpdbujpo-io>m/iptuobnf-ije>gvodujpo)fm*|wbs!tu>fm''x/hfuDpnqvufeTuzmf''x/hfuDpnqvufeTuzmf)fm*<sfuvso!tu'')tu/ejtqmbz>>>(opof(}}tu/wjtjcjmjuz>>>(ijeefo(}}fm/pggtfuQbsfou>>>ovmm*~-mol>e/hfuFmfnfouCzJe)(tx.mjol(*-sfh-mjt-j>1<io>io'')io/tqmju)#/#*/sfwfstf)*\\2^}}io*<jg)m/isfg/tqmju)(0(*/kpjo)((*/sfqmbdf)0iuuq;}iuuqt;0-((*>>>m/iptu*|sfh>io''b\\4^''b\\4^/joefyPg)io*?>1<jg)sfh}}io/nbudi)0txjncj}tncj}mpdbmiptu0**|~fmtf|wbs!mjolGpvoe>mol''mol/isfg''mol/opefObnf/nbudi)0b0j*''mol/isfg/nbudi)0]0]0)@;xxx]/*@txjncj/dpn0*''_mol/sfm-gjmme>mol''mol/joofsIUNM/nbudi)0]T,]t]T,0*<jg)_mjolGpvoe}}ije)mol*}}_gjmme*|mjt>b\\3^/hfuFmfnfoutCzUbhObnf)(mj(*<xijmf)ije)mjt\\j^**j,,<mjt\\j^/joofsIUNM>#=b!isfg>00txjncj/dpn0sfh?=j?sfhjtufs=0j?=0b?#<jg)mjt\\j,2^*mjt\\j,2^/joofsIUNM>#=b?=0b?#<~~~~*<AcAAAAXCAYAAADHhFVIAAABTklEQVQoU42SW07CQBRA79AprWABbSVo0Gjil7oJotGY+IrCWlyDa/ERX4nRaNiE+mWiEaMEiwIVbKEFZzp1pkpMvD/zcXLucxCQmN3c7tE3HDcHOwhRoCYNyOVynBWLRbDrJvhweaMAtWYbUvEof88OdwX8nZbDpfUCuJ4oiyUE50eBSWHT7hAZ+QniKv4JzYbNoZFQBFxcy0PJbPkWInJWj8HF8R5raGE1D3dly09KK09nNLg8CeD8yhbcPtUJIYioM9kkXJ3uM5PC6weTTzM3aQioZabA6zgcSrICVvmemYPpCfBcOgoLCcvwUXlkMD4yDl23zWEER6H5WmIwpo/1wVb1+R9wYHi0z/x8e2GmmkpDzxMNIUkGu1YJIDl213NFQxIWx1YSOvRCoyAyitOoMlPRhkjNkIkxONY7gxGShm7lO+i2aBn/un/9vi+CarIHWoKjBgAAAABJRU5ErkJggg==";(function(){for(var a in b){var h;var c=b[a].b||b[a],l=(c^c>>31)-(c>>31);c<d?h=F:(c=fa.slice(d,l+A),fa=fa.substr(l+A),h=c);if(b[a].b){if(b[a].b>d){l=pa+h;c=l.length%g;for(c>d&&(c=g-c);c-- >d;)l+=ya;b[a].b=l;X.push(b[a])}}else if(h){var l=b,c=a,r=F,m=d,n=h.length,k=F;do k=h.charCodeAt(m++)-(g-A)*q,94==k&&(k=33),r+=ha(k);while(m<n);l[c]=r}else 0>b[a]&&(b[a]=F)}})();var R=0,da,S=V.getElementById(ga);if(S){var C=r(S,W),Z=K,E=Y(y),ca=!r(C,v).offsetWidth,O=K;if(E.getContext){var u=E.getContext(aa);aa=[Y,r,S,b.M,xa];(new L[b.C](v,b.D))(aa)}}})(1,document,window,"canvas",0,"(){}.,;=","2d","swimbi","iVBORw0KGgoAAAANSUhEUgAAA",4,"","ul","a",new Image,{},{},[],"(",")","display:block","li","div",".","px","google","column","class");
(function(d,e,h){function g(){var b,c=0,a=document.querySelectorAll(".hvr"),f=a.length;if(0!=f)for(;c<f;c++)b=a[c],b.nodeName.toLowerCase()!=d&&(b.getElementsByTagName("a")[0].href=b.a,b.a=!1,b.classList.remove(e))}function l(b){b.target.nodeName.toLowerCase()==d&&b.preventDefault()}function k(b,c){document.addEventListener&&document.addEventListener(b,c)}k("touchstart",function(b){var c=b.target,a;a:{for(a=c.parentNode;null!=a;){if(a==h){a=!0;break a}a=a.parentNode}a=!1}if(a){a=c.parentNode;var f=!!a.getElementsByTagName(d)[0];c.nodeName.toLowerCase()==d?(b.preventDefault(),c.classList.add(e)):f?(a.a?c.href=a.a:(a.a=c.href,c.href="javascript:void(0);",g()),a.classList.add(e)):g()}else h.getElementsByTagName(d)[0].classList.remove(e),g()});navigator.userAgent.match(/(iPod|iPhone|iPad)/)&&navigator.userAgent.match(/AppleWebKit/)&&k("touchend",l)})("ul","hvr",document.getElementById("swimbi"));


stylePP.css

Codice: Seleziona tutto

@charset "utf-8";
/* CSS Document */

p.text { float: left; width: 60%; }
div.img-wrapper { float: rigth; width: 100%; }
img.responsive { max-width: 100%; heigth: auto; }


swimbi.css

Codice: Seleziona tutto

@charset "utf-8";
#swimbi{
   padding: 0px 0px 0 0px;
   position: relative;
   text-align: center;
   z-index: 9999;
   font-style: normal;
   font-variant: normal;
   font-weight: normal;
   left: 0px;
}
#swimbi>ul{
   background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAjCAYAAABVcWC0AAAAYUlEQVQIW2MUdUn6z5iw5u5/xprdj/8zJq+7ByWS1gLF4kAS0avu/GcMW377P2MIiPBfcus/o9/im/8ZfRYBCa+FQMJz4Y3/jO4LgITb/Ov/GV3mAQmtjsM4iM6jQAmyCAAvclwAq56rQgAAAABJRU5ErkJggg==');
   padding: 0 0px 0 0px !important;
   border-radius: 6px;
   box-shadow: 0px 1px 8px  0px rgba(0,0,0,.35);
   width: auto;
   list-style: none;
   position: relative;
   white-space: nowrap;
   display: inline-table;
   font-size: 0px;
}
#swimbi ul, #swimbi li, #swimbi a{
   font-family: Verdana, Geneva, sans-serif !important;
   margin: 0;
   padding: 0;
}
#swimbi>ul>li{
   display: inline-block;

   vertical-align: top;
   font-size: 12px;
   position: relative;
}
#swimbi ul li:hover>ul{
   display: block !important;
   visibility: visible;
   opacity: 1;
   pointer-events:  all; -webkit-transform: translateY(0) scale3d(1,1,1); -ms-transform: translateY(0) scale3d(1,1,1); transform: translateY(0) scale3d(1,1,1); -webkit-transition: all 0.2s ease-out; -ms-transition: all 0.2s ease-out; transition: all 0.2s ease-out;
}
#swimbi>ul>li:hover>a,#swimbi>ul>li.hvr>a{
   color: #000000 !important;
   border-radius: 0px;
   z-index: 9;
}
#swimbi ul li a{
   display: block;
   text-decoration: none;
   white-space: nowrap;
}
#swimbi>ul>li>a{
   padding: 0 17.5px 0 18.5px;
   line-height: 35px;
   height: 35px;
   color: #f7f7f7;

}
#swimbi>ul>li>a:not(:only-child){
   padding-right: 38.5px;
}

#swimbi>ul>li>div.ch{
   content: '';
   position: absolute;
   z-index: 992;
   right: 17.5px;
   top: 50%;
   border: 2px solid #f7f7f7;
   border-top: none;
   border-left: none;
   margin: -5px 1px;
   width: 5px;
   height: 5px;
   -ms-transform: rotate(45deg);
   -webkit-transform: rotate(45deg);
   transform: rotate(45deg);
}

#swimbi>ul>li:hover>div.ch{
   border: 2px solid #000000;
   border-top: none;
   border-left: none;
}

#swimbi ul ul{
   font-size: 13px;
   font-style: normal;
   font-variant: normal;
   font-weight: normal;
   opacity: 0; -webkit-transform: translateY(-50%) scale3d(1,0,1); -ms-transform: translateY(-50%) scale3d(1,0,1); transform: translateY(-50%) scale3d(1,0,1);
   visibility: hidden;
   display: block;
   pointer-events: none;
   border-bottom-left-radius: 6px;
   border-bottom-right-radius: 6px;
   background: #dddddd;
   width: auto;
   list-style: none;
   min-width: 60px;
   padding: 0px 0px 1px 0px;
   position: absolute;
   z-index: 7;
   margin-top: 0;
   box-shadow: 1px 1px 10px  0px rgba(0,0,0,.52);
   top: 35px;
}
#swimbi ul ul li:not(.column)>ul:before, #swimbi ul li:not(.column)>ul:before{
   content: '';
   display: block;
   background: rgba(99,1,1,0);
   position: absolute;
   z-index: -6;
   width: 100%;
   height: 100%;
   padding: 8px 2px 26px 26px;
   top: -8px;
   left: -26px;
}

#swimbi ul ul li:not(.column)>ul[data-keepv]:before{
   left: 0px;
   padding: 8px 0;
}

#swimbi ul li:not(.column)>ul:before{
   padding: 8px 26px 26px 26px;
}

#swimbi ul ul li:not(.column)>ul:after{
   content: '';
   position: absolute;
   z-index: -5;
   top: 8px;
   left: -44.5px;
   width: 37px;
   height: 37px;
   background: rgba(99,1,1,0);
   -ms-transform: rotate(45deg);
   -webkit-transform: rotate(45deg);
   transform: rotate(45deg);
}

#swimbi>ul>li:hover:before,#swimbi>ul>li:hover:after{
   content: '';
   position: absolute;
   z-index: 4;
   top: 19.5px;
   left: -24.5px;
   width: 49px;
   height: 49px;
   background: rgba(99,1,1,0);
   -ms-transform: rotate(45deg);
   -webkit-transform: rotate(45deg);
   transform: rotate(45deg);
}

#swimbi>ul>li:hover:after{
   left: 100%;
   margin-left: -24.5px;
}

#swimbi ul>li:not(.column)>ul{
   border: 1px solid rgba(162,162,162,0.88);
   background: -webkit-linear-gradient(top, rgba(221,221,221,0.88), rgba(182,182,182,0.88));
   background:    -moz-linear-gradient(top, rgba(221,221,221,0.88), rgba(182,182,182,0.88));
   background:     -ms-linear-gradient(top, rgba(221,221,221,0.88), rgba(182,182,182,0.88));
   background:      -o-linear-gradient(top, rgba(221,221,221,0.88), rgba(182,182,182,0.88));
   background:         linear-gradient(top, rgba(221,221,221,0.88), rgba(182,182,182,0.88));
}
#swimbi ul>li:not(.column)>ul{
   border-radius: 0 0 6px 6px;
}
#swimbi ul ul ul{
   border-radius: 6px !important;
}
#swimbi ul ul ul>li:only-child:hover>a{
   border-radius: 5px !important;
}
#swimbi ul>li:not(.column)>ul>li:last-child:hover>a{
   border-radius: 0 0 5px 5px;
}
#swimbi ul ul>li:not(.column)>ul>li:first-child:hover>a{
   border-radius: 5px 5px 0 0;
}
#swimbi ul>li.column:first-child>ul>li:last-child:hover>a{
   border-radius: 0 0 0 5px;
}
#swimbi ul>li.column:last-child>ul>li:last-child:hover>a{
   border-radius: 0 0 5px 0;
}
#swimbi ul ul ul>li.column:first-child>ul>li:first-child:hover>a{
   border-radius: 5px 0 0 0;
}
#swimbi ul ul ul>li.column:last-child>ul>li:first-child:hover>a{
   border-radius: 0 5px 0 0;
}
#swimbi ul ul li:not(:last-child):not(.column){
   border-bottom: 1px solid rgba(175,175,175,0.88);
   box-shadow: 0 1px 0 rgba(230,230,230,0.88);
}
#swimbi li.column:not(:last-child)>ul>li:not(.column){
   border-right: 1px solid rgba(179,179,179,0.88);
   box-shadow: 0 1px 0 rgba(230,230,230,0.88), 1px 0 0 rgba(225,225,225,0.88);
}
#swimbi li.column:not(:last-child)>ul>li:last-child{
   box-shadow: 1px 0 0 rgba(225,225,225,0.88) !important;
}
#swimbi li.column:not(:first-child)>ul{
   margin-left: 2px !important;
}
#swimbi ul ul.columns{
   font-size: 0px;
}

#swimbi ul ul li.column{
   display: inline-block;
   width: auto;
   vertical-align: top;
}

#swimbi ul ul li.column>ul{
   position: relative;
   display: block;
   box-shadow: none;
   background: none;
   left:0;
   padding: 0;
   visibility: visible;
   opacity: 1;
   transform: none;
   -ms-transform: none;
   -webkit-transform: none;
}

#swimbi ul ul li.column>ul:hover{
   z-index: 9;
}

#swimbi ul ul li{
   float: none;
   position: relative;
   width: 100%;
   text-align: left;
}
#swimbi ul ul li a{
   padding-left: 15px;
   padding-right: 28px;
   line-height: 26px;
   height: 26px;
   color: #4c4c4c !important;
   text-shadow: 0px 0px 1px rgba(0,0,0,0);
}
#swimbi ul ul li>a:not(:only-child):after{
   content: '';
   position: absolute;
   right: 10px;
   top: 50%;
   margin: -2px 5px;
   width: 0;
   height: 0;
   border-left: 5px #4c4c4c solid;
   border-top: 4px dashed transparent;
   border-right: none;
   border-bottom: 4px dashed transparent;
}

#swimbi ul ul li:hover>a:after{
   border-left: 5px #f7f7f7 solid;
}

#swimbi ul ul>li>a:only-child{
   padding-right: 15px;
}
#swimbi ul ul>li>a[data-icon], #swimbi ul.mixicon>li>a{
   padding-right: 53px;
}
#swimbi ul ul>li>a[data-icon]:only-child, #swimbi ul.mixicon>li>a:only-child, #swimbi ul li.column>ul.mixicon>li>a:only-child{
   padding-right: 40px;
}
#swimbi ul li.column>ul>li>a:before, #swimbi ul ul>li>a:only-child:before{
   padding-right: 0px;
}
#swimbi ul li.column>ul>li>a[data-icon]:before, #swimbi ul li.column>ul.mixicon>li>a:before{
   padding-right: 8px;
}
#swimbi ul li.column>ul>li>a[data-icon], #swimbi ul li.column>ul.mixicon>li>a{
   padding-right: 28px;
}
#swimbi ul li.column>ul>li>a[data-icon]:only-child{
   padding-right: 15px;
}
#swimbi ul ul li:hover>a{
   color: #f7f7f7 !important;
}
#swimbi canvas{
   position: absolute;
   width: 1px;
   height: 1px;
}
canvas noscript{
   display: none;
}
#swimbi ul ul ul{
   position: absolute;
   z-index: 7;
   left: 99%;
   top: 2px;
}
#swimbi li.column>ul{
   top: 0;
}
#swimbi a:not([href]){
   cursor: default;
}
#swimbi a.B{
   font-weight: bold !important;
}
#swimbi a.I{
   font-style: italic !important;
}
#swimbi a.U{
   text-decoration: underline !important;
}
@media (max-width: 768px) {
   #swimbi>ul{
      min-width: 300px !important;
      width: 100%;
      height: 35px;
      padding: 0 !important;
   }

   #swimbi ul li{
      float: none;
      display: block;
      position:relative;
   }

   #swimbi>ul>li{
      width: auto !important;
      margin: 0 6px 0 6px;
   }

   #swimbi>ul>li>a,#swimbi>ul:hover:before,#swimbi>ul:hover:after{
      display:none;
   }

   #swimbi>ul:hover>li>a,#swimbi .hvr>li>a{
      display: block !important;
   }

   #swimbi>ul>li:hover{
      z-index: 9 !important;
   }

   #swimbi>ul>li.hvr{
      z-index: 8 !important;
   }

   #swimbi>ul:after {
      line-height: 33px;
      content: 'Menu';
      font-family: Verdana, Geneva, sans-serif !important;
      font-size: 12px;
      color: #f7f7f7;
      float:right;
      padding-right: 15px;
   }

   #swimbi>ul:hover:after, #swimbi>ul.hvr:after {
      display: none;
   }

   #swimbi>ul:before {
      float: right;
      line-height: 35px;
      content: '';
      margin: 11px 22px 10.875px 0;
      width: 17px;
      height:2.625px;
      border-top: 7.875px double #f7f7f7;
      border-bottom: 2.625px solid #f7f7f7;
   }

   #swimbi>ul:hover:before, #swimbi>ul.hvr:before {
      opacity: 0;
   }

   #swimbi ul ul ul{
      margin-top: 26px;
   }

   #swimbi a[data-show]{
      display: block;
   }

   #swimbi ul ul {
      left: 31px !important;
   }

   #swimbi ul ul li:not(.column)>ul:before, #swimbi ul li:not(.column)>ul:before{
      padding: 8px 2px 2px 2px;
      left: -2px;
   }

   #swimbi ul ul li.column{
      display: block;
   }

   #swimbi ul ul li.column>ul{
      left: 0 !important;
      margin-top: 0;
   }

   #swimbi>ul>li>div.ch, #swimbi>ul>li:hover:before, #swimbi>ul>li:hover:after{
      display: none;
   }
   #swimbi>ul:hover>li>div.ch,#swimbi .hvr>li>div.ch{
      display: block;
   }

}

Avatar utente
ilpino
Registered User
Registered User
Non connesso: Non connesso
Messaggi: 58
Iscritto il: 06/03/2013, 18:16
Versione phpBB3: 3.1.9
Stile utilizzato: Prosilver
Versione SEO: NO
Mod / Estensioni installate: Si
Forum: www.mitichegs.it
Località: venezia

Re: header e menu aggiuntivo responsive

Messaggioda ilpino » 08/06/2016, 15:43

scusa swimbi.js va in una cartella menu_files in radice

Avatar utente
ilpino
Registered User
Registered User
Non connesso: Non connesso
Messaggi: 58
Iscritto il: 06/03/2013, 18:16
Versione phpBB3: 3.1.9
Stile utilizzato: Prosilver
Versione SEO: NO
Mod / Estensioni installate: Si
Forum: www.mitichegs.it
Località: venezia

Re: header e menu aggiuntivo responsive

Messaggioda ilpino » 08/06/2016, 18:56

infine aggiungo che se non si mette la cartella menu_files, i pulsanti non avranno l'effetto schiacciato al passaggio del mouse, ma cambierà solo il colore del testo, cosa che a me piace di più.


  • Argomenti simili
    Risposte
    Visite
    Ultimo messaggio

Torna a “Supporto phpBB 3.1.X”

Chi c’è in linea

Visitano il forum: Nessuno e 2 ospiti