Doctor blogger : Slide Out Menu for Blogger

Ένα πανέξυπνο menu που δίνει τη δυνατότητα στον κάτοχο ενός ιστοτόπου να διατηρεί ένα τεράστιο αρχείο και όλα αυτά μέσα από τέσσερα κουμπιά στο sidebar.
Μια ακόμη προσφορά από τους δασκάλους του είδους στην http://tympanus.net/.

Τοποθετήστε το σαν gadget στο sidebar της Σελίδας σας με τον παρακάτω κώδικα:

<a href="#">Celery seakale</a>

<a href="#">Dulse daikon</a>

<a href="#">Zucchini garlic</a>

<a href="#">Catsear azuki bean</a>

<a href="#">Dandelion bunya</a>

<a href="#">Rutabaga</a>

</nav>

<a href="#">Celery seakale</a>

<a href="#">Dulse daikon</a>

<a href="#">Zucchini garlic</a>

<a href="#">Catsear azuki bean</a>

<a href="#">Dandelion bunya</a>

<a href="#">Rutabaga</a>

</nav>

<a href="#">Celery seakale</a>

<a href="#">Dulse daikon</a>

<a href="#">Zucchini garlic</a>

<a href="#">Catsear azuki bean</a>

<a href="#">Dandelion bunya</a>

<a href="#">Rutabaga</a>

<a href="#">Celery seakale</a>

<a href="#">Dulse daikon</a>

<a href="#">Zucchini garlic</a>

<a href="#">Catsear azuki bean</a>

<a href="#">Dandelion bunya</a>

<a href="#">Rutabaga</a>

</nav>

<a href="#">Celery seakale</a>

<a href="#">Dulse daikon</a>

<a href="#">Zucchini garlic</a>

<a href="#">Catsear azuki bean</a>

<a href="#">Dandelion bunya</a>

<a href="#">Rutabaga</a>

<a href="#">Celery seakale</a>

<a href="#">Dulse daikon</a>

<a href="#">Zucchini garlic</a>

<a href="#">Catsear azuki bean</a>

<a href="#">Dandelion bunya</a>

<a href="#">Rutabaga</a>

</nav>

<button id="showLeft">Show/Hide Left Slide Menu</button>

<button id="showRight">Show/Hide Right Slide Menu</button>

<button id="showTop">Show/Hide Top Slide Menu</button>

<button id="showBottom">Show/Hide Bottom Slide Menu</button>

</section>

</div>

<style>

@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);

body {

font-family: 'Lato', Calibri, Arial, sans-serif;

color: #47a3da;

text-decoration:none;

}

.main > section {

max-width: 300px;

width: 98%;

margin: 0 auto;

}

.main > section h2 {

font-weight: 300;

color: #ccc;

}

.main > section button {

border: none;

background: #47a3da;

color: #fff;

padding: 1.5em;

display: block;

width: 100%;

cursor: pointer;

margin: 10px 0;

font-size: 0.8em;

}

.main > section button:hover {

background: #258ecd;

}

.main > section button.active {

background: #0d77b6;

}

.main > section button.disabled {

background: #aaa;

pointer-events: none;

}

.icon-drop:before,

.icon-arrow-left:before {

font-family: 'fontawesome';

position: absolute;

top: 0;

width: 100%;

height: 100%;

speak: none;

font-style: normal;

font-weight: normal;

line-height: 2;

text-align: center;

color: #47a3da;

-webkit-font-smoothing: antialiased;

text-indent: 8000px;

padding-left: 8px;

}

.container > header nav a:hover:before {

color: #fff;

}

.icon-drop:before {

content: "\e000";

}

.icon-arrow-left:before {

content: "\f060";

}

/* General styles for all menus */

.cbp-spmenu {

background: #47a3da;

position: fixed;

}

.cbp-spmenu h3 {

color: #afdefa;

font-size: 1.9em;

padding: 20px;

margin: 0;

font-weight: 300;

background: #0d77b6;

}

.cbp-spmenu a {

display: block;

color: #fff;

font-size: 1.1em;

font-weight: 300;

}

.cbp-spmenu a:hover {

background: #258ecd;

}

.cbp-spmenu a:active {

background: #afdefa;

color: #47a3da;

}

/* Orientation-dependent styles for the content of the menu */

.cbp-spmenu-vertical {

width: 240px;

height: 100%;

top: 0;

z-index: 1000;

}

.cbp-spmenu-vertical a {

border-bottom: 1px solid #258ecd;

padding: 1em;

}

.cbp-spmenu-horizontal {

width: 100%;

height: 150px;

left: 0;

z-index: 1000;

overflow: hidden;

}

.cbp-spmenu-horizontal h3 {

height: 100%;

width: 20%;

float: left;

}

.cbp-spmenu-horizontal a {

float: left;

width: 20%;

padding: 0.8em;

border-left: 1px solid #258ecd;

}

/* Vertical menu that slides from the left or right */

.cbp-spmenu-left {

left: -240px;

}

.cbp-spmenu-right {

right: -240px;

}

.cbp-spmenu-left.cbp-spmenu-open {

left: 0px;

}

.cbp-spmenu-right.cbp-spmenu-open {

right: 0px;

}

/* Horizontal menu that slides from the top or bottom */

.cbp-spmenu-top {

top: -150px;

}

.cbp-spmenu-bottom {

bottom: -150px;

}

.cbp-spmenu-top.cbp-spmenu-open {

top: 0px;

}

.cbp-spmenu-bottom.cbp-spmenu-open {

bottom: 0px;

}

/* Push classes applied to the body */

.cbp-spmenu-push {

overflow-x: hidden;

position: relative;

left: 0;

}

.cbp-spmenu-push-toright {

left: 240px;

}

.cbp-spmenu-push-toleft {

left: -240px;

}

/* Transitions */

.cbp-spmenu,

.cbp-spmenu-push {

-webkit-transition: all 0.3s ease;

-moz-transition: all 0.3s ease;

transition: all 0.3s ease;

}

/* Example media queries */

@media screen and (max-width: 55.1875em){

.cbp-spmenu-horizontal {

font-size: 75%;

height: 110px;

}

.cbp-spmenu-top {

top: -110px;

}

.cbp-spmenu-bottom {

bottom: -110px;

}

@media screen and (max-height: 26.375em){

.cbp-spmenu-vertical {

font-size: 90%;

width: 190px;

}

.cbp-spmenu-left,

.cbp-spmenu-push-toleft {

left: -190px;

}

.cbp-spmenu-right {

right: -190px;

}

.cbp-spmenu-push-toright {

left: 190px;

}

</style>

/* Modernizr 2.6.2 (Custom Build) | MIT & BSD

* Build: http://modernizr.com/download/#-touch-shiv-cssclasses-teststyles-prefixes-load

;window.Modernizr=function(a,b,c){function w(a){j.cssText=a}function x(a,b){return w(m.join(a+";")+(b||""))}function y(a,b){return typeof a===b}function z(a,b){return!!~(""+a).indexOf(b)}function A(a,b,d){for(var e in a){var f=b[a[e]];if(f!==c)return d===!1?a[e]:y(f,"function")?f.bind(d||b):f}return!1}var d="2.6.2",e={},f=!0,g=b.documentElement,h="modernizr",i=b.createElement(h),j=i.style,k,l={}.toString,m=" -webkit- -moz- -o- -ms- ".split(" "),n={},o={},p={},q=[],r=q.slice,s,t=function(a,c,d,e){var f,i,j,k,l=b.createElement("div"),m=b.body,n=m||b.createElement("body");if(parseInt(d,10))while(d--)j=b.createElement("div"),j.id=e?e[d]:h+(d+1),l.appendChild(j);return f=["",'<style id="s',h,'">',a,"</style>"].join(""),l.id=h,(m?l:n).innerHTML+=f,n.appendChild(l),m||(n.style.background="",n.style.overflow="hidden",k=g.style.overflow,g.style.overflow="hidden",g.appendChild(n)),i=c(l,a),m?l.parentNode.removeChild(l):(n.parentNode.removeChild(n),g.style.overflow=k),!!i},u={}.hasOwnProperty,v;!y(u,"undefined")&&!y(u.call,"undefined")?v=function(a,b){return u.call(a,b)}:v=function(a,b){return b in a&&y(a.constructor.prototype[b],"undefined")},Function.prototype.bind||(Function.prototype.bind=function(b){var c=this;if(typeof c!="function")throw new TypeError;var d=r.call(arguments,1),e=function(){if(this instanceof e){var a=function(){};a.prototype=c.prototype;var f=new a,g=c.apply(f,d.concat(r.call(arguments)));return Object(g)===g?g:f}return c.apply(b,d.concat(r.call(arguments)))};return e}),n.touch=function(){var c;return"ontouchstart"in a||a.DocumentTouch&&b instanceof DocumentTouch?c=!0:t(["@media (",m.join("touch-enabled),("),h,")","{#modernizr{top:9px;position:absolute}}"].join(""),function(a){c=a.offsetTop===9}),c};for(var B in n)v(n,B)&&(s=B.toLowerCase(),e[s]=n[B](),q.push((e[s]?"":"no-")+s));return e.addTest=function(a,b){if(typeof a=="object")for(var d in a)v(a,d)&&e.addTest(d,a[d]);else{a=a.toLowerCase();if(e[a]!==c)return e;b=typeof b=="function"?b():b,typeof f!="undefined"&&f&&(g.className+=" "+(b?"":"no-")+a),e[a]=b}return e},w(""),i=k=null,function(a,b){function k(a,b){var c=a.createElement("p"),d=a.getElementsByTagName("head")[0]||a.documentElement;return c.innerHTML="x<style>"+b+"</style>",d.insertBefore(c.lastChild,d.firstChild)}function l(){var a=r.elements;return typeof a=="string"?a.split(" "):a}function m(a){var b=i[a[g]];return b||(b={},h++,a[g]=h,i[h]=b),b}function n(a,c,f){c||(c=b);if(j)return c.createElement(a);f||(f=m(c));var g;return f.cache[a]?g=f.cache[a].cloneNode():e.test(a)?g=(f.cache[a]=f.createElem(a)).cloneNode():g=f.createElem(a),g.canHaveChildren&&!d.test(a)?f.frag.appendChild(g):g}function o(a,c){a||(a=b);if(j)return a.createDocumentFragment();c=c||m(a);var d=c.frag.cloneNode(),e=0,f=l(),g=f.length;for(;e<g;e++)d.createElement(f[e]);return d}function p(a,b){b.cache||(b.cache={},b.createElem=a.createElement,b.createFrag=a.createDocumentFragment,b.frag=b.createFrag()),a.createElement=function(c){return r.shivMethods?n(c,a,b):b.createElem(c)},a.createDocumentFragment=Function("h,f","return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&("+l().join().replace(/\w+/g,function(a){return b.createElem(a),b.frag.createElement(a),'c("'+a+'")'})+");return n}")(r,b.frag)}function q(a){a||(a=b);var c=m(a);return r.shivCSS&&!f&&!c.hasCSS&&(c.hasCSS=!!k(a,"article,aside,figcaption,figure,footer,header,hgroup,nav,section{display:block}mark{background:#FF0;color:#000}")),j||p(a,c),a}var c=a.html5||{},d=/^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,e=/^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i,f,g="_html5shiv",h=0,i={},j;(function(){try{var a=b.createElement("a");a.innerHTML="<xyz></xyz>",f="hidden"in a,j=a.childNodes.length==1||function(){b.createElement("a");var a=b.createDocumentFragment();return typeof a.cloneNode=="undefined"||typeof a.createDocumentFragment=="undefined"||typeof a.createElement=="undefined"}()}catch(c){f=!0,j=!0}})();var r={elements:c.elements||"abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup mark meter nav output progress section summary time video",shivCSS:c.shivCSS!==!1,supportsUnknownElements:j,shivMethods:c.shivMethods!==!1,type:"default",shivDocument:q,createElement:n,createDocumentFragment:o};a.html5=r,q(b)}(this,b),e._version=d,e._prefixes=m,e.testStyles=t,g.className=g.className.replace(/(^|\s)no-js(\s|$)/,"$1$2")+(f?" js "+q.join(" "):""),e}(this,this.document),function(a,b,c){function d(a){return"[object Function]"==o.call(a)}function e(a){return"string"==typeof a}function f(){}function g(a){return!a||"loaded"==a||"complete"==a||"uninitialized"==a}function h(){var a=p.shift();q=1,a?a.t?m(function(){("c"==a.t?B.injectCss:B.injectJs)(a.s,0,a.a,a.x,a.e,1)},0):(a(),h()):q=0}function i(a,c,d,e,f,i,j){function k(b){if(!o&&g(l.readyState)&&(u.r=o=1,!q&&h(),l.onload=l.onreadystatechange=null,b)){"img"!=a&&m(function(){t.removeChild(l)},50);for(var d in y[c])y[c].hasOwnProperty(d)&&y[c][d].onload()}}var j=j||B.errorTimeout,l=b.createElement(a),o=0,r=0,u={t:d,s:c,e:f,a:i,x:j};1===y[c]&&(r=1,y[c]=[]),"object"==a?l.data=c:(l.src=c,l.type=a),l.width=l.height="0",l.onerror=l.onload=l.onreadystatechange=function(){k.call(this,r)},p.splice(e,0,u),"img"!=a&&(r||2===y[c]?(t.insertBefore(l,s?null:n),m(k,j)):y[c].push(l))}function j(a,b,c,d,f){return q=0,b=b||"j",e(a)?i("c"==b?v:u,a,b,this.i++,c,d,f):(p.splice(this.i++,0,a),1==p.length&&h()),this}function k(){var a=B;return a.loader={load:j,i:0},a}var l=b.documentElement,m=a.setTimeout,n=b.getElementsByTagName("script")[0],o={}.toString,p=[],q=0,r="MozAppearance"in l.style,s=r&&!!b.createRange().compareNode,t=s?l:n.parentNode,l=a.opera&&"[object Opera]"==o.call(a.opera),l=!!b.attachEvent&&!l,u=r?"object":l?"script":"img",v=l?"script":u,w=Array.isArray||function(a){return"[object Array]"==o.call(a)},x=[],y={},z={timeout:function(a,b){return b.length&&(a.timeout=b[0]),a}},A,B;B=function(a){function b(a){var a=a.split("!"),b=x.length,c=a.pop(),d=a.length,c={url:c,origUrl:c,prefixes:a},e,f,g;for(f=0;f<d;f++)g=a[f].split("="),(e=z[g.shift()])&&(c=e(c,g));for(f=0;f<b;f++)c=x[f](c);return c}function g(a,e,f,g,h){var i=b(a),j=i.autoCallback;i.url.split(".").pop().split("?").shift(),i.bypass||(e&&(e=d(e)?e:e[a]||e[g]||e[a.split("/").pop().split("?")[0]]),i.instead?i.instead(a,e,f,g,h):(y[i.url]?i.noexec=!0:y[i.url]=1,f.load(i.url,i.forceCSS||!i.forceJS&&"css"==i.url.split(".").pop().split("?").shift()?"c":c,i.noexec,i.attrs,i.timeout),(d(e)||d(j))&&f.load(function(){k(),e&&e(i.origUrl,h,g),j&&j(i.origUrl,h,g),y[i.url]=2})))}function h(a,b){function c(a,c){if(a){if(e(a))c||(j=function(){var a=[].slice.call(arguments);k.apply(this,a),l()}),g(a,j,b,0,h);else if(Object(a)===a)for(n in m=function(){var b=0,c;for(c in a)a.hasOwnProperty(c)&&b++;return b}(),a)a.hasOwnProperty(n)&&(!c&&!--m&&(d(j)?j=function(){var a=[].slice.call(arguments);k.apply(this,a),l()}:j[n]=function(a){return function(){var b=[].slice.call(arguments);a&&a.apply(this,b),l()}}(k[n])),g(a[n],j,b,n,h))}else!c&&l()}var h=!!a.test,i=a.load||a.both,j=a.callback||f,k=j,l=a.complete||f,m,n;c(h?a.yep:a.nope,!!i),i&&c(i)}var i,j,l=this.yepnope.loader;if(e(a))g(a,0,l,0);else if(w(a))for(i=0;i<a.length;i++)j=a[i],e(j)?g(j,0,l,0):w(j)?B(j):Object(j)===j&&h(j,l);else Object(a)===a&&h(a,l)},B.addPrefix=function(a,b){z[a]=b},B.addFilter=function(a){x.push(a)},B.errorTimeout=1e4,null==b.readyState&&b.addEventListener&&(b.readyState="loading",b.addEventListener("DOMContentLoaded",A=function(){b.removeEventListener("DOMContentLoaded",A,0),b.readyState="complete"},0)),a.yepnope=k(),a.yepnope.executeStack=h,a.yepnope.injectJs=function(a,c,d,e,i,j){var k=b.createElement("script"),l,o,e=e||B.errorTimeout;k.src=a;for(o in d)k.setAttribute(o,d[o]);c=j?h:c||f,k.onreadystatechange=k.onload=function(){!l&&g(k.readyState)&&(l=1,c(),k.onload=k.onreadystatechange=null)},m(function(){l||(l=1,c(1))},e),i?k.onload():n.parentNode.insertBefore(k,n)},a.yepnope.injectCss=function(a,c,d,e,g,i){var e=b.createElement("link"),j,c=i?h:c||f;e.href=a,e.rel="stylesheet",e.type="text/css";for(j in d)e.setAttribute(j,d[j]);g||(n.parentNode.insertBefore(e,n),m(c,0))}}(this,document),Modernizr.load=function(){yepnope.apply(window,[].slice.call(arguments,0))};

</script>

/*!

* classie - class helper functions

* from bonzo https://github.com/ded/bonzo

* classie.has( elem, 'my-class' ) -> true/false

* classie.add( elem, 'my-new-class' )

* classie.remove( elem, 'my-unwanted-class' )

* classie.toggle( elem, 'my-class' )

/*jshint browser: true, strict: true, undef: true */

( function( window ) {

'use strict';

// class helper functions from bonzo https://github.com/ded/bonzo

function classReg( className ) {

return new RegExp("(^|\\s+)" + className + "(\\s+|$)");

}

// classList support for class management

// altho to be fair, the api sucks because it won't accept multiple classes at once

var hasClass, addClass, removeClass;

if ( 'classList' in document.documentElement ) {

hasClass = function( elem, c ) {

return elem.classList.contains( c );

};

addClass = function( elem, c ) {

elem.classList.add( c );

};

removeClass = function( elem, c ) {

elem.classList.remove( c );

};

}

else {

hasClass = function( elem, c ) {

return classReg( c ).test( elem.className );

};

addClass = function( elem, c ) {

if ( !hasClass( elem, c ) ) {

elem.className = elem.className + ' ' + c;

}

};

removeClass = function( elem, c ) {

elem.className = elem.className.replace( classReg( c ), ' ' );

};

}

function toggleClass( elem, c ) {

var fn = hasClass( elem, c ) ? removeClass : addClass;

fn( elem, c );

}

window.classie = {

// full names

hasClass: hasClass,

addClass: addClass,

removeClass: removeClass,

toggleClass: toggleClass,

// short names

has: hasClass,

add: addClass,

remove: removeClass,

toggle: toggleClass

};

})( window );

</script>

var menuLeft = document.getElementById( 'cbp-spmenu-s1' ),

menuRight = document.getElementById( 'cbp-spmenu-s2' ),

menuTop = document.getElementById( 'cbp-spmenu-s3' ),

menuBottom = document.getElementById( 'cbp-spmenu-s4' ),

showLeft = document.getElementById( 'showLeft' ),

showRight = document.getElementById( 'showRight' ),

showTop = document.getElementById( 'showTop' ),

showBottom = document.getElementById( 'showBottom' ),

showLeftPush = document.getElementById( 'showLeftPush' ),

showRightPush = document.getElementById( 'showRightPush' ),

body = document.body;

showLeft.onclick = function() {