0

قائمة احترافية منزلقة بتقنية CSS
معاينة الاضافة

طريقة تركيب الاضافة
1- لوحة التحكم
2- تخطيط
3- إضافة أداة-HTML/JavaScript 
4- أضف الكود  وأضغط حفظ.
5-مع تغيير مايلزم

<nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-left" id="cbp-spmenu-s1"> <h3>Menu</h3> <a href="#">قائمة 1</a> <a href="#">قائمة 2</a> <a href="#">قائمة 3</a> <a href="#">قائمة 4</a> <a href="#">قائمة 5</a> <a href="#">قائمة 6</a> </nav> <nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-right" id="cbp-spmenu-s2"> <h3>Menu</h3> <a href="#">قائمة 1</a> <a href="#">قائمة 2</a> <a href="#">قائمة 3</a> <a href="#">قائمة 4</a> <a href="#">قائمة 5</a> <a href="#">قائمة 6</a> </nav> <nav class="cbp-spmenu cbp-spmenu-horizontal cbp-spmenu-top" id="cbp-spmenu-s3"> <h3>Menu</h3> <a href="#">قائمة 1</a> <a href="#">قائمة 2</a> <a href="#">قائمة 3</a> <a href="#">قائمة 4</a> <a href="#">قائمة 5</a> <a href="#">قائمة 6</a> <a href="#">قائمة 7</a> <a href="#">قائمة 9</a> <a href="#">قائمة 10</a> <a href="#">قائمة 11</a> <a href="#">قائمة 12</a> <a href="#">قائمة 13</a> </nav> <nav class="cbp-spmenu cbp-spmenu-horizontal cbp-spmenu-bottom" id="cbp-spmenu-s4"> <h3>Menu</h3> <a href="#">قائمة 1</a> <a href="#">قائمة 2</a> <a href="#">قائمة 3</a> <a href="#">قائمة 4</a> <a href="#">قائمة 5</a> <a href="#">قائمة 6</a> <a href="#">قائمة 7</a> <a href="#">قائمة 9</a> <a href="#">قائمة 10</a> <a href="#">قائمة 11</a> <a href="#">قائمة 12</a> </nav><div class="main"><section> <!-- Class "cbp-spmenu-open" gets applied to menu --> <button id="showLeft">Menu 1</button> <button id="showRight">Menu 2</button> <button id="showTop">Menu 3</button> <button id="showBottom">Menu 4</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><script>/* 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=["&#173;",'<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><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/bonzofunction 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 oncevar 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 nameshasClass: hasClass,addClass: addClass,removeClass: removeClass,toggleClass: toggleClass,// short nameshas: hasClass,add: addClass,remove: removeClass,toggle: toggleClass};})( window );</script><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() {classie.toggle( this, 'active' );classie.toggle( menuLeft, 'cbp-spmenu-open' );disableOther( 'showLeft' );};showRight.onclick = function() {classie.toggle( this, 'active' );classie.toggle( menuRight, 'cbp-spmenu-open' );disableOther( 'showRight' );};showTop.onclick = function() {classie.toggle( this, 'active' );classie.toggle( menuTop, 'cbp-spmenu-open' );disableOther( 'showTop' );};showBottom.onclick = function() {classie.toggle( this, 'active' );classie.toggle( menuBottom, 'cbp-spmenu-open' );disableOther( 'showBottom' );};showLeftPush.onclick = function() {classie.toggle( this, 'active' );classie.toggle( body, 'cbp-spmenu-push-toright' );classie.toggle( menuLeft, 'cbp-spmenu-open' );disableOther( 'showLeftPush' );};showRightPush.onclick = function() {classie.toggle( this, 'active' );classie.toggle( body, 'cbp-spmenu-push-toleft' );classie.toggle( menuRight, 'cbp-spmenu-open' );disableOther( 'showRightPush' );};function disableOther( button ) {if( button !== 'showLeft' ) {classie.toggle( showLeft, 'disabled' );}if( button !== 'showRight' ) {classie.toggle( showRight, 'disabled' );}if( button !== 'showTop' ) {classie.toggle( showTop, 'disabled' );}if( button !== 'showBottom' ) {classie.toggle( showBottom, 'disabled' );}if( button !== 'showLeftPush' ) {classie.toggle( showLeftPush, 'disabled' );}if( button !== 'showRightPush' ) {classie.toggle( showRightPush, 'disabled' );}}</script>

إرسال تعليق

جميع الردود تعبّر عن رأي كاتبيها فقط. حريّة النقد والرد متاحة لجميع الزوار بشرط أن لا يكون الرد خارج نطاق الموضوع وأن يكون خال من الكلمات البذيئة. تذكّر قول الله عز وجل (مَا يَلْفِظُ مِن قَوْلٍ إِلاَّ لَدَيْهِ رَقِيبٌ عَتِيد).

 
Top