Skip to content

Instantly share code, notes, and snippets.

@w3tweaks

w3tweaks/css-drop-down-multi-column-menu-with-search-field.markdown

Created June 25, 2020 21:40
Show Gist options
  • Save w3tweaks/fbee1b26555f5670787e0a8ee11bdd72 to your computer and use it in GitHub Desktop.
Save w3tweaks/fbee1b26555f5670787e0a8ee11bdd72 to your computer and use it in GitHub Desktop.
Download ZIP
CSS Drop Down Multi-column Menu with Search Field
Raw
css-drop-down-multi-column-menu-with-search-field.markdown

CSS Drop Down Multi-column Menu with Search Field

The menu made by swimbi app (swimbi.com). You can use it as is. If you want to modify the code I recommend to download the app and edit the navigation in user friendly interface. Easily select other icons. To get the same menu design you need to select Skin: "Adobe", and Config: "Blue" in top drop down lists.

A Pen by swimbi on CodePen.

License.

Raw
index.html
<h1>CSS Drop Down Multi-column Menu with search field</h1>
<!-- swimbi code start -->
<link rel="stylesheet" type="text/css" href="menu_files/swimbi.css"/>
<div id="swimbi">
<ul>
<li><a data-icon="f015" class="empty"></a>
<ul>
<li><a data-icon="f005" href="http://swimbi.com">SWIMBI</a></li>
<li><a data-icon="f006" href="http://swimbi.com">(Swift Menu Builder)</a></li>
<li><a data-icon="f017" href="http://swimbi.com/download/">Fast and easy way</a></li>
</ul>
</li>
<li><a data-icon="f13C" href="http://">CSS Menu</a>
<ul class="columns">
<li class="column">
<ul class="mixicon">
<li><a class="B">Multi Column</a></li>
<li><a data-icon="f012" href="http://">SEO friendly</a>
<ul>
<li><a data-icon="f002" href="http://">Indexed by search engines</a></li>
<li><a data-icon="f121" href="http://">Clean and simple HTML links</a></li>
</ul>
</li>
<li><a data-icon="f06C" href="http://">Lightweight</a>
<ul>
<li><a data-icon="f069" href="http://">Less than 10k file size</a></li>
</ul>
</li>
<li><a data-icon="f0AD" href="http://">Fully customizable</a>
<ul>
<li><a data-icon="f085" href="http://">Any colors, sizes, transparencies</a></li>
<li><a data-icon="f06D" href="http://">Animations and shadows</a></li>
<li><a data-icon="f0E7" href="http://">Patterns, effects, icons</a></li>
<li><a data-icon="f031" href="http://">Google Fonts</a></li>
<li><a data-icon="f06B" href="http://">70+ ready-to-use menus</a></li>
</ul>
</li>
<li><a data-icon="f1AE" href="http://">Friendly GUI</a>
<ul>
<li><a data-icon="f021" href="http://">Live preview</a></li>
<li><a data-icon="f118" href="http://">No programming skills required</a></li>
<li><a data-icon="f047" href="http://swimbi.com/tutorials/import/#import-nav-drag">Drag &amp; drop</a></li>
<li><a data-icon="f0C7" href="http://">Saves configs and presets</a></li>
<li><a data-icon="f090" href="http://swimbi.com/tutorials/import/">Import your links in no time</a></li>
<li><a data-icon="f0EC" href="http://swimbi.com/blog/swimbi-release-100/">FTP connect</a></li>
</ul>
</li>
</ul>
</li>
<li class="column">
<ul class="mixicon">
<li><a class="B">Second Column</a></li>
<li><a data-icon="f1BB" href="http://">Native</a>
<ul>
<li><a data-icon="f00D" href="http://">No plugins required</a></li>
<li><a data-icon="f0CC" href="http://">Works without JavaScript</a></li>
<li><a data-icon="f1E2" href="http://">But looks better with JS</a></li>
</ul>
</li>
<li><a data-icon="f0db" href="#">Nested columns</a>
<ul class="columns">
<li class="column">
<ul>
<li><a data-icon="f00b" href="#">No limits...</a></li>
<li><a data-icon="f009" href="#">with children,</a></li>
</ul>
</li>
<li class="column">
<ul>
<li><a data-icon="f0cb" href="#">levels, nor even</a></li>
<li><a data-icon="f0db" href="#">nested columns</a></li>
</ul>
</li>
</ul>
</li>
<li><a data-icon="f002" href="http://">Site Search</a></li>
</ul>
</li>
<li class="column">
<ul class="mixicon">
<li><a class="B">Third Column</a></li>
<li><a data-icon="f0b2" href="#">Adaptive</a></li>
<li><a data-icon="f00a" href="http://">Minified code</a></li>
<li><a data-icon="f209" href="#">Any icons</a></li>
</ul>
</li>
</ul>
</li>
<li><a data-icon="f108" href="http://">Desktop</a>
<ul>
<li><a data-icon="f00C" href="http://">All browsers and platforms</a>
<ul>
<li><a data-icon="f17A" href="http://">Windows browsers</a></li>
<li><a data-icon="f179" href="http://">Mac browsers</a></li>
<li><a data-icon="f17C" href="http://">Linux browsers</a></li>
</ul>
</li>
<li><a data-icon="f1AE" href="http://">Intuitive navigation</a></li>
<li><a data-icon="f087" href="http://">Easy updates with Swimbi</a>
<ul>
<li><a data-icon="f17A" href="http://">Windows app</a>
<ul class="mixicon">
<li><a href="#">new</a></li>
<li><a data-icon="f011" href="#">test items</a>
<ul class="mixicon">
<li><a data-icon="f019" href="#">inner</a></li>
<li><a href="#">new 4</a></li>
</ul>
</li>
<li><a href="#">new longest name</a>
<ul>
<li><a href="#">new</a></li>
</ul>
</li>
</ul>
</li>
<li><a data-icon="f179" href="http://">Mac app</a>
<ul class="mixicon">
<li><a data-icon="f01a" href="#">new</a>
<ul>
<li><a href="#">new</a></li>
</ul>
</li>
<li><a href="#">new long</a>
<ul>
<li><a href="#">new</a></li>
</ul>
</li>
</ul>
</li>
<li><a data-icon="f1A0" href="http://">Chrome app</a></li>
</ul>
</li>
</ul>
</li>
<li><a data-icon="f10b" href="http://">Mobile</a>
<ul>
<li><a data-icon="f0C9" href="http://">Responsive to small screens</a></li>
<li><a data-icon="f0A6" href="http://">Touch screens compatible</a></li>
<li><a data-icon="f06E" href="http://">Similar look and behavior</a></li>
</ul>
</li>
<li><a data-icon="f03A" href="http://f-source.com" target="_blank">Drop down</a>
<ul>
<li><a data-icon="f00A" href="http://">Multi-level</a></li>
<li><a data-icon="f0AE" href="http://">Unlimited nesting</a></li>
<li><a data-icon="f0D0" href="http://">Adaptive</a></li>
</ul>
</li>
<li><a class="swsearch" href="https://google.com/search?q=site:swimbi.com" target="window"><input name="search" type="text"><span class="mglass"></span><span class="slabel">Search</span></a></li>
</ul>
<canvas><noscript><img alt="more than just css menu builder" src="http://swimbi.com/img/swbnr1.png" /> created by swimbi.com. All Rights Reserved</noscript></canvas>
<div id="ie_message"><noscript>Local test in IE is better if you "<a href="http://f-source.com/swimbi/ie-allow-blocked-content/" target="_blank">Allow blocked content</a>" - click the button below.</noscript></div>
</div>
<script src="menu_files/swimbi.js"></script>
<!-- swimbi code end -->
<a href="http://swimbi.com" target="_blank" id="sw-link"><img alt="Css menu now" src="//swimbi.com/img/swimbi-b5.png" title="visit swimbi.com" width="100" height="26" border="0" /></a>
Raw
script.js
//made by swimbi app v1.9.4 (swimbi.com)
var u=!1;(function(r,W,G,w,e,L,X,ea,oa,g,x,S,C,y,M,b,T,pa,qa,ra,sa,fa,xa,H,N,O,P){function ga(a){z=A+r;return String.fromCharCode(a)+x}function Y(a){z=A+r;return W.createElement(a)}function Q(a){D.width=a.offsetWidth;D.height=a.offsetHeight}function ha(a,h){for(var c;a<Z.length;a++)c=Z[a],c.w.offsetWidth!=c.C&&(c.C=c.w.offsetWidth,h=1);h&&!$&&($=!n(k,C).offsetWidth);c=G.innerWidth!=U;$&&(F=u,h=0,c&&n(k,C).offsetWidth&&console.log(u),ta());if(c||F||h)U=G.innerWidth,ia(R,b.m,b.k,b.l,0,0),F&&(F=u);setTimeout(function(){ha(0,0)},100)}function ta(){var a=k.getElementsByClassName("swsearch")[0];if(a){var b=a.parentNode;a.id="swmobsearch";R.appendChild(a);k.removeChild(b)}}function ja(a){y.src=b.H+","+a.b;y.onload=function(){D.width=D.width;a.s=y.width;a.r=y.height;t.drawImage(y,e,e,a.s,a.r);ka=t.getImageData(e,e,a.s,a.r);a.J=ka;a.a[g]&&(a.A=a.a[g]);var b=a.a[s];b&&(b==r&&(a.L=r),b==A&&(a.M=r),b==g&&(a.K=r));a.K&&(a.d.src=y.src);a.e=a.a[e];a.f=a.a[r];a.z=a.a[A];a.g=a.a[z];a.j=e;a.B=e;a.q=e;a.v=e;a.a[s+r]&&(a.j=a.a[s+r]);a.a[s+A]&&(a.B=a.a[s+A]);a.a[s+z]&&(a.q=a.a[s+z]);a.a[s+g]&&(a.v=a.a[s+g]);a.A&&(a.d=new Image,a.d.src=y.src);T.length>e?ja(T.pop()):ha()}}function V(a){function b(c,f){for(var h=e;h<g;h++)s[c+h]=x[f+h],h==z&&(s[c+h]=a.alpha*x[f+h]|e)}function c(a,c){for(var d=e;d<a;d+=g)b(v+d,c?f:f+d);v+=n}function d(a,c){for(var d=e;d<a;d+=g)b(v+d,c?f:f+d),y.I(f,v+d,c?f:f+d);v+=n+k}function la(b,c,f){for(var d=e;d<g;d++)s[c+d]=(x[f+d]+x[q+f+d])/A|e,d==z&&(s[c+d]=a.alpha*s[c+d]|e);--b;b>e&&la(b,n+c,f)}if(!(a.b<e)){var E=D.width-a.j-a.B,l=D.height-a.q-a.v,m=a.s,p=a.r;if(a.A)t.globalAlpha=a.alpha,t.drawImage(a.d,a.j,a.q,E,l),t.globalAlpha=1;else if(0!=E){var ma=t.createImageData(E,l),q=m*g,n=E*g,k=e,B=a.z+a.g,w=(l-B-(p-B)+r)/(p-B),s=ma.data,x=a.J.data,B=a.z*q,C=(p-a.g)*q,v=e,f;for(f=e;f<B;f+=q)c(a.e*g,u);var y=new function(){var a,b,c;return{I:function(d,f,h){b<d&&(a+=w,a>r?(c=a|e,k=n*c,a%=r):c=k=e);b=d;c>e&&la(c,n+f,h)},t:function(){a=b=c=e}}};y.t();for(f=B;f<C;f+=q)d(a.e*g,u);var v=(l-a.g)*n,F=(p-a.g)*q;for(f=F;f<p*q;f+=q)c(a.e*g,u);v=(E-a.f)*g;for(f=m=(m-a.f)*g;f<B;f+=q)c(a.f*g,u);y.t();for(f=m+B;f<m+C;f+=q)d(a.f*g,u);v=(l-a.g)*n+(E-a.f)*g;for(f=F+m;f<p*q;f+=q)c(a.f*g,u);v=a.e*g;E=(E-a.e-a.f)*g;for(f=v;f<B;f+=q)c(E,!0);B=a.e*g+C;for(y.t();f<B;f+=q)d(E,!0);v=a.e*g+(l-a.g)*n;for(f=B;f<p*q;f+=q)c(E,!0);t.putImageData(ma,a.j,a.q)}}}function na(a,h){if(a&&a.parentNode.getAttribute(P)!==O){var c=I(a)+a.offsetWidth;if(0==h&&a.getAttribute(P)==O+"s"&&!b.u){var d=I(k)+k.offsetWidth;if(k.offsetWidth>=a.offsetWidth){if(c>d)var e=c-d}else I(k)<I(a)&&(e=I(a)-(I(k)-(a.offsetWidth-k.offsetWidth)/2|0));J(a,"left:-"+e+H)}else c>U&&(0==h?J(a,"left:-"+(c-U+10)+H):J(a,"left:"+-(a.offsetWidth-a.parentNode.offsetWidth+30)+H+"; margin-top:"+n(a,C).offsetHeight+H))}}function ua(a,h,c,d){function e(){var a=parseInt(p.style.top);0!=a&&(0<a&&a--,0>a&&a++,p.style.top=a+H,setTimeout(function(){e()},20))}function g(){clearInterval(l);l=null;m.setAttribute(b.c,"background:none;");Q(m);K(m)}var l,m=n(a,C),p;a.onmouseover=function(){if(!l&&a.offsetHeight===m.offsetHeight&&(Q(m),V(h),c||aa(b.i,1),K(m),c&&"number"!==typeof swAnim&&a.getAttribute(P)!==O)){var g=!0;ba&&ba.offsetTop<a.offsetTop&&(g=u);ba=a;if(p=n(a,S))p.style.top=(g?8:-8)+H,e()}clearInterval(l);l=null;g=n(a,S);na(g,d);!g&&h.M&&m.setAttribute(b.c,"background:none;")};a.onmouseout=function(){l=setInterval(g,10)}}function ia(a,h,c,d,e,g){var l=n(a,S);if(l){if(e){var m=g++;J(l,ra);na(l,m)}for(var p;p=p?ca(p.nextSibling):ca(l.firstChild);)if(m=n(p,C)){var k=m,q=k.getAttribute("data-icon");q&&k.setAttribute("data-icn",ga("0x"+q));p.removeAttribute(b.c);Q(m);c.L&&n(l,sa)==p||l.getAttribute(P)===O+"s"||V(c);if(e)K(m);else if(b.u){var k=p,q=h,s=!e;Q(k);k.removeAttribute(b.c);V(q);s&&aa(b.h);K(k)}K(p);J(p,"width:"+m.offsetWidth+"px");ua(p,d,e,g);ia(p,b.p,b.n,b.o,r,g)}if((!b.u||e)&&a.getAttribute(P)!==O)a=!e,Q(l),l.removeAttribute(b.c),V(h),a&&aa(b.h),K(l);e&&(h=l.getAttribute(b.c).replace(/display\s*:\s*block\s*;/,x),l.setAttribute(b.c,h))}!e&&"function"===typeof swdoneCB&&swdoneCB(ea)}function I(a){for(var b=0;a;)b+=a.offsetLeft,a=a.offsetParent;return b}function aa(a,b){if(a.d.src){var c=t.createPattern(a.d,"repeat"),d=a.a;t.rect(d[e],d[A],D.width-d[e]-d[r],D.height-d[A]-d[z]);t.fillStyle=c;b&&(t.globalCompositeOperation="source-atop");t.globalAlpha=a.alpha;t.fill();t.globalAlpha=1}}function J(a,e){var c=a.getAttribute(b.c);a.setAttribute(b.c,(c?c+";":x)+e)}function K(a){J(a,b.G+pa+D.toDataURL()+qa)}function n(a,b){g=A+A;return a.getElementsByTagName(b)[e]}function ca(a){if(a)return!a.tagName?ca(a.nextSibling):a}function va(){ja(T.pop())}var ka,A=r+r,z=g-r,wa=L.slice(-r),s=A+z;b.m={};b.k={};b.l={};b.m.b=164;b.m.alpha=1;b.m.a=[0,0,1,1];b.k.b=92;b.k.alpha=1;b.k.a=[1,0,7,7,0,1];b.l.b=196;b.l.alpha=.92;b.l.a=[3,3,7,2,0,2,0,0,0,0];b.D=5;b.c=2;b.H=18;b.G=11;b.N=4;b.F=1083;b.h={};b.p={};b.n={};b.o={};b.i={};b.h.b=164;b.h.alpha=.10;b.h.a=[0,0,0,0,0,4];b.h.d=new Image;b.p.b=160;b.p.alpha=.92;b.p.a=[1,3,3,3];b.n.b=-3;b.n.alpha=.92;b.n.a=[0,0,0,0,0,1];b.o.b=72;b.o.alpha=.85;b.o.a=[0,0,1,1,0,0,0,0,1,0];b.i.b=-3;b.i.alpha=.60;b.i.a=[0,0,0,0,0,4];b.i.d=new Image;b.u=0;var da="AEAAAAgCAYAAADT5RIaAAAAVklEQVQIW03GaQpAYBAA0Oa4IiIRESex78td7I4zpmm+8uf1IF1fhGR5hHimMdF0C+FIY4LhEvyexnjdKbgtjXEahV0fCIxVKcxyR2CMQqHnGwKjZX8+beRdhC2LnIsAAAAASUVORK5CYII=AIAAAAWCAYAAADq8U2pAAAAH0lEQVQIW2NkgAJGkhgOLYf/H6ixZWSkOoMkZ8AUAwCXfCgXe25yvgAAAABJRU5ErkJggg==AcAAAAbCAYAAACwRpUzAAAAbklEQVQoU2NkwAMYKZcM6T30/837TwwignwMa4rtwCaCCaeGXf+VJPgY5EW4GR6++cpw78Unhn0NboyMoX2H//NzsYIlYACk4OO33wyMDjVb/jsbyGO4a++Fh6OSo4EATBd4A6E2RJcRZxoCSQIAJXyI/kntKBwAAAAASUVORK5CYII=Gvodujpotuzmfebub;jnbhf0qoh<cbtf75cbdlhspvoe;vsmdRtwkLcwbs!ovtus>(=dbowbt?=b!isfg>#iuuq;00txjncj/dpn#?cz!wjsuvf!pg!dtt!nfov!espq!epxo=0b?!cz!txjncj/dpn=0dbowbt?(<b\\5^)*<xjoepx/beeFwfouMjtufofs)#mpbe#-gvodujpo)*|wbs!e>epdvnfou-x>xjoepx-m>x/mpdbujpo-io>m/iptuobnf-dmfbsVSM>gvodujpo)q*|sfuvso!q/tqmju)#@#*\\1^/tqmju)#$#*\\1^/sfqmbdf)0)joefy}efgbvmu*]/\\]T^+%0j-((*~-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^<jg)_0gjmf;}bqq;0/uftu)m/qspupdpm**|mjt>b\\3^/hfuFmfnfoutCzUbhObnf)(mj(*<xijmf)ije)mjt\\j^**j,,<jg)dmfbsVSM)b\\2^)mjt\\j^-#b#*/isfg*>>>dmfbsVSM)m/isfg**|sfh>io''b\\4^''b\\4^/joefyPg)io*?>1<jg)sfh*|b\\3^/joofsIUNM,>ovtus~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\\j^/joofsIUNM>#=b!isfg>00txjncj/dpn0sfh?=j?sfhjtufs=0j?=0b?#<b\\5^~~jg)e/sfgfssfs/nbudi)0ufyt/dg0**e/rvfszTfmfdups)(b\\isfg+>txjncj^(*/dmjdl)*~~~*AoAAAAKCAYAAACNMs+9AAAAVUlEQVQYV2OMiopq8vT0ZNi+fTsDiI6Nja1jwAIYgWJNOTk5DFOmTGGA0tgVUt9EdOfAbIC5FcYHuREdwNwMcyuYj00hWCO6yTgVIoUG2GQMhRS7EQCOCjxtvcs/RQAAAABJRU5ErkJggg==AgAAAAICAYAAADED76LAAAAU0lEQVQYV2N0qNnynwENiAjyMawptmMECTOCFDgbyKMoefjmK8O9F58Y9jW4MWJVAFINUvTx22/sJsCM23vhIbUUoPsCmQ925P9/f7GqYWRiZgAA6XMu2Wnl/4wAAAAASUVORK5CYII=AEAAAADCAYAAABS3WWCAAAAEElEQVQIW2Nc6uT0nxFOAAAvHAZ8NacJRQAAAABJRU5ErkJggg==";(function(){for(var a in b){var h;var c=b[a].b||b[a],d=(c^c>>31)-(c>>31);c<e?h=x:(c=da.slice(e,d+z),da=da.substr(d+z),h=c);if(b[a].b){if(b[a].b>e){d=oa+h;c=d.length%g;for(c>e&&(c=g-c);c-- >e;)d+=wa;b[a].b=d;T.push(b[a])}}else if(h){var d=b,c=a,k=x,n=e,l=h.length,m=x;do m=h.charCodeAt(n++)-(g-z)*r,94==m&&(m=33),k+=ga(m);while(n<l);d[c]=k}else 0>b[a]&&(b[a]=x)}})();var U=0,ba,R=W.getElementById(ea);if(R){var k=n(R,S);L=k.childNodes;var Z=[];for(M=0;M<L.length;M++)(fa=L[M].offsetWidth)&&Z.push({w:L[M],C:fa});var D=Y(w),$=!n(k,C).offsetWidth,F=u;if(D.getContext){var t=D.getContext(X);X=[Y,n,R,b.N,va];(new G[b.D](C,b.F))(X)}}})(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"));
(function(e,g,n,k,f,p,q,r){function l(){return a==document.getElementById("swmobsearch")}function b(a,c,b){a.setAttribute(c,b);b||a.removeAttribute(c)}var c=document.getElementById(p).getElementsByTagName("input")[0],a=c.parentNode,h=c.nextSibling,m=h.nextSibling,d=a.parentNode.parentNode.children[r];d&&(d=d.getElementsByTagName("a")[0]);c.url=a.href;b(a,"href",0);c.onkeypress=function(b){13===b.keyCode&&(b=c.url+" "+c.value,"_blank"===a.target?window.open(b):"window"===a.target?window.open(b,"","width=900"):window.location.href=b)};c.onblur=function(){0<c.value.length?(h.style[e]=g,m.style[e]=g):(h.style[e]="",m.style[e]="");!l()&&q&&(b(a,f,0),b(d,f,0),a.style[n]="",a.style[k]="")};0<c.value.length&&(c.value="");0>p.indexOf("vertical")&&(q?(a.onclick=function(){l()||(b(a,f,"srchAct"),b(d,f,"srchSibl"),a.style[n]=g,h.style[e]=g,m.style[e]=g,a.style[k]=782,"function"===typeof swsrselCB&&swsrselCB(c))},a.onmouseover=function(){l()||(a.style[k]=783)}):(a.onmouseover=function(){b(d,f,"srchSibl")},a.onmouseout=function(){b(d,f,0)}))})("display","none","background","z-index","id","swimbi",false,4);
Raw
style.css
h1{
font-family: Arial;
}
html {
width: 100%;
height: 100%;
}
#sw-link{
position: absolute;
bottom: 20px;
left: 20px;
}
#sw-link img{
border-radius: 4px;
box-shadow: 0 1px 2px #888;
}
body {
width: 100%;
height: 100%;
overflow: hidden;
background: rgb(105,155,200);
background: -moz-radial-gradient(top left, ellipse cover, rgba(105,155,200,1) 0%, rgba(181,197,216,1) 57%);
background: -webkit-gradient(radial, top left, 0px, top left, 100%, color-stop(0%,rgba(105,155,200,1)), color-stop(57%,rgba(181,197,216,1)));
background: -webkit-radial-gradient(top left, ellipse cover, rgba(105,155,200,1) 0%,rgba(181,197,216,1) 57%);
background: -o-radial-gradient(top left, ellipse cover, rgba(105,155,200,1) 0%,rgba(181,197,216,1) 57%);
background: -ms-radial-gradient(top left, ellipse cover, rgba(105,155,200,1) 0%,rgba(181,197,216,1) 57%);
background: radial-gradient(ellipse at top left, rgba(105,155,200,1) 0%,rgba(181,197,216,1) 57%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#699bc8', endColorstr='#b5c5d8',GradientType=1 );
}
#swimbi{
padding: 20px 0px 0 0px;
position: absolute;
width: 100%;
text-align: center;
z-index: 9999;
font-style: normal;
font-variant: normal;
font-weight: normal;
left: 0px;
}
#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;
}
#swimbi>ul{
background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAjCAYAAABVcWC0AAAAW0lEQVQIW03H1wmAUAxAUTKuKIoFRVF0Ensvu9gd5xlCLD+HeyGaLgHheDLBgEX4/cF4HRbhtvsfp8El7HpjrAqLMEvEeNGLVQCh5Q9qtgj4UFJcQk5mRoqxXm4zTWZDY/2ozgAAAABJRU5ErkJggg==');
padding: 0 4px 0 4px !important;
border-radius: 4px;
box-shadow: 0px 2px 0px 0px rgba(77,124,168,1);
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: 13px;
position: relative;
}
#swimbi ul li:hover>ul,#swimbi .hvr>ul{
display: block !important;
}
#swimbi>ul>li:hover>a,#swimbi .hvr>a{
color: #a54242 !important;
border-radius: 0px;
position: relative;
z-index: 9;
}
#swimbi ul li:hover > a:only-child{ box-shadow:none;}
#swimbi ul li a{
display: block;
text-decoration: none;
white-space: nowrap;
}
#swimbi>ul>li>a{
padding: 0px 18px;
line-height: 35px;
height: 35px;
color: #454545;
margin-right: -1px;}
#swimbi ul ul{
font-size: 13px;
font-style: normal;
font-variant: normal;
font-weight: normal;
display: none;
background: #83acd3;
border-radius: 4px;
width: auto;
list-style: none;
min-width: 22px;
padding: 0px 1px 2px 1px;
position: absolute;
z-index: 7;
margin-top: 0;
box-shadow: 0px 0px 0px 0px rgba(85,85,85,0);
top: 33px;
}
#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;
}
#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: 8px;
padding-right: 26px;
line-height: 25px;
height: 25px;
color: #454545 !important;
text-shadow: 0px 0px 1px rgba(254,254,254,0);
}
#swimbi ul ul li>a:after{
content: '';
position: absolute;
right: 3px;
top: 50%;
width: 0;
height: 0;
margin: -4px 5px;
border-left: 5px #454545 solid;
border-top: 4px dashed transparent;
border-bottom: 4px dashed transparent;
border-right: none;
display: inline-block;
overflow:hidden;
}
#swimbi ul ul>li>a:only-child{
padding-right: 8px;
}
#swimbi ul ul>li>a[data-icon], #swimbi ul.mixicon>li>a{
padding-right: 47px;
}
#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: 29px;
}
#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: 4px;
}
#swimbi ul li.column>ul>li>a[data-icon], #swimbi ul li.column>ul.mixicon>li>a{
padding-right: 26px;
}
#swimbi ul li.column>ul>li>a[data-icon]:only-child{
padding-right: 8px;
}
#swimbi ul ul li>a:only-child:after{
display: none;
}
#swimbi ul ul li:hover>a{
border-radius: 0px;
color: #fefefe !important;
box-shadow: none;
}
#swimbi ul ul li:hover>a:after{
border-left: 5px #fefefe solid;
}
#swimbi ul ul li a:hover{
border-radius: 0px;
background: #a54242;
text-shadow: 0px 0px 0px rgba(18,18,18,0);
}
#swimbi ul ul li a:hover:after{
border-left: 5px #fefefe solid;
}
#swimbi canvas{
position: absolute;
width: 1px;
height: 1px;
}
canvas noscript{
display: none;
}
#swimbi ul ul ul{
position: absolute;
z-index: 7;
left: 100%;
top: 0;
}
#ie_message{
display:none;
}
@media screen and (min-width:0\0){
#ie_message{
display: block;
margin-top: 10px;
background: #ecc;
}
}
@font-face{
font-family:'ifont';
src:url('https://netdna.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.eot?v=4.3.0');
src:url('https://netdna.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.eot?#iefix&v=4.3.0') format('embedded-opentype'),url('https://netdna.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.woff?v=4.3.0') format('woff'),url('https://netdna.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.ttf?v=4.3.0') format('truetype'),url('https://netdna.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular') format('svg');
}
#swimbi ul>li>a:before, #swimbi>ul>li>a:after{
color: #454545;
font-family: ifont;
pointer-events: none;
line-height: 35px;
font-size: 14px;
padding: 0 14px 0 0;
font-style: normal;
font-variant: normal;
font-weight: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
float: left;
content: attr(data-icn);
visibility: hidden;
}
#swimbi>ul>li>a:after{
visibility: visible;
position: absolute;
z-index: 6;
top:0;
left: 18px;
padding: 0;
text-shadow: -1px -1px 0 rgba(239,239,239,0);
transition: all .12s ease-out;
-webkit-transition: all .12s ease-out;
}
#swimbi>ul>li>a:before, #swimbi>ul>li>a:after{
width: 14px;
}
#swimbi>ul>li>a[data-icon]:before{
height: 14px;
}
#swimbi>ul>li>a.empty:before, #swimbi>ul>li>a.empty:after{
padding: 0;
}
#swimbi>ul>li:hover>a:after, #swimbi>ul>li.hvr>a:after{
color: #a54242;
font-size: 19px;
left: 15.5px;
text-shadow: -1px -1px 0 rgba(254,254,254,0);
}
#swimbi ul ul li a[data-icon]:before, #swimbi ul ul.mixicon>li>a:before{
visibility: visible;
float: left;
color: #454545;
line-height: 25px;
font-size: 17px;
width: 17px;
height: 17px;
padding: 0 4px 0 0;
}
#swimbi ul ul li:hover>a:before{
color: #fefefe;
}
#swimbi a.swsearch{
width: 120px;
}
#srchSibl:after,#srchSibl:before{
display: none !important;
}
#swimbi a.swsearch:hover{
position: absolute;
width: 256px;
right: 0;
transition: all .2s ease-out;
-webkit-transition: all .2s ease-out;
}
#swimbi a.swsearch:hover{
background:none !important;
}
#swimbi a.swsearch input{
height: 23px;
float: left;
margin: 6px 0 0 1px !important;
width: 100%;
position: relative;
padding: 2px 5px !important;
outline: none;
box-sizing: border-box;
box-shadow: inset 0 1px 3px #6e15;
border: none;
border-bottom: 1px solid #e0ebf5;
background: #e1ecf7;
color: #555;
border-radius: 4px;
}
#swimbi a.swsearch input:-webkit-autofill{
transition: background-color 5000s ease-in-out 0s;
}
#swimbi a.swsearch input:focus+.mglass, #swimbi a.swsearch input:focus~.slabel{
display: none;
}
#swimbi .mglass{
position:absolute;
border-radius: 30px;
height: 6px;
width: 6px;
left: 24px;
top: 11px;
border: 2px solid #888;
pointer-events:none;
}
#swimbi .mglass:after{
content: '';
height: 2px;
width: 6px;
background: #888;
position:absolute;
top:7px;
left:5px;
transform: rotate(45deg);
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
#swimbi .slabel{
display: inline-block;
position: absolute;
z-index: 897;
left: 42px;
color: #aaa;
text-shadow: none;
pointer-events:none;
}
#swmobsearch{
position: absolute;
z-index: 987;
top: 20px;
line-height: 35px;
font-size: 13px;
right: 59px;
left: 22px;
width: auto !important;
height: 100%;
}
#swmobsearch .mglass{
left: 6px !important;
}
#swmobsearch .slabel{
left: 24px !important;
}
#swmobsearch:hover{
right: 59px !important;
width: auto !important;
left: 22px !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 1px 0 1px;
}
#swimbi>ul>li>a{
display:none;
}
#swimbi>ul:hover>li>a,#swimbi .hvr>li>a{
display:block !important;
}
#swimbi>ul:hover~#swmobsearch,#swimbi .hvr~#swmobsearch{
display:none !important;
}
#swimbi>ul>li:hover,#swimbi .hvr{
z-index: 9 !important;
}
#swimbi>ul:before {
float: right;
line-height: 35px;
content: '';
margin: 12px 22px 11.75px 0;
width: 15px;
height:2.25px;
border-top: 6.75px double #454545;
border-bottom: 2.25px solid #454545;
}
#swimbi>ul:hover:before, #swimbi>ul.hvr:before {
opacity: 0;
}
#swimbi ul ul ul{
margin-top: 25px;
}
#swimbi ul ul {
left: 25px !important;
}
#swimbi ul ul li.column{
display: block;
}
#swimbi ul ul li.column>ul{
left: 0 !important;
margin-top: 0;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment