تركيب قائمة MEGA MENU V1 لمدونات بلوجر بشكل احترافي
تركيب قائمة MEGA MENU V1
لمدونات بلوجر بشكل احترافي
تركيب قائمة MEGA MENU V1
اكثير يبحث عن افضل قائمة mega و التي ممكن يضيفها للقالب اللذي سيقوم باستخدامه فهذه القائمة هي قائمة احترافية بامتياز تعطي لقالبك جمال و افادة
و هي لتسهيل العمل بالنسبة للزائر تتكون هذه القائمة من عدة اشكل رائعة الجمال
القائمة يمكن تركيبها و لكن يرجى الانتباه للشرح حتى لا يحصل اي خطا و يفضل في البداية حفظ نسخة من القالب
سنقوم في البداية بإنشاء موضع لــ أداة قائمة الروابط والتي من خلالها سنضيف الأقسام الخاصة بنا من دون الحاجة إلى التعديل من داخل القالب كما هو شائع لكن لابد أن نضع الأداة في المكان المناسب لقالب مدونتك حتى تنعكس على موضع القائمة الرئيسية .. ففي الغالب تكون فوق الرسائل مباشرة لذلك إذا كان لديك المكان المناسب قم بإضافة أداة قائمة الروابط.. أمافي حالة لم يكن لديك الموضع المناسب قم بالتالي ...
- إضغط في وسط محرر الأكواد ثم F + Ctrl لإضهار مربع البحث
- بإستعمال الزر C +Ctrl للنسخ و V +Ctrl للصق قم بوضع الأكواد في المكان المناسب
قم بالبحث عن (رأس الصفحة) أسفل </b:section>
<div class='clear'/>
<b:section id='Mega-menu' maxwidgets='1' showaddelement='no'>
<b:widget id='LinkList100' locked='true' title='القائمة الرئيسية' type='LinkList' version='1'>
<b:includable id='main'>
<div class='widget-content'>
<ul>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
</b:section>
<div class='clear'/>
- عند وضع الكود سيكون بهذا الشكل
<!--Mega menu-->
<script type='text/javascript'>
//<![CDATA[
(function(e){var t=function(e,t){this.elem=e;this.settings=t;this.addAjaxHtml();this.ajaxcall=null;this.lielem=this.elem.find(".verticlemenu li a");this.menuHelper(this.elem);this.addEvents()};t.prototype={regex:{islabel:new RegExp("/search/label/","g"),issearch:new RegExp("[?&]q=","g"),labelsearch:new RegExp("(//[^/]+)/search/label/([^/?&]+).*[?&]q=([^$&]+)(?:[^$]+)?","g"),label:new RegExp("(//[^/]+)/search/label/([^/?&$]+)","g"),search:new RegExp("(//[^/]+)/search/?[?&]q=(.*)","g")},addEvents:function(){var t=this;this.lielem.hover(function(){if(e(this).data("menuloaded")!=="true"){t.li=e(this);t.url=t.li.attr("href");t.container=t.li.closest("ul").siblings("ul");t.hoverOver()}},function(){t.hoverOut()})},hoverOver:function(){var t=this;this.getAJAXUrl();if(!this.ajaxUrl)return;this.ajaxcall=e.ajax({type:"GET",url:t.ajaxUrl,dataType:"jsonp",data:t.ajaxData,beforeSend:function(){t.showLoader()},success:function(e){t.hideLoader();t.addArrow();t.showPosts(e)},error:function(e){t.showError(e)}})},hoverOut:function(){this.ajaxcall.abort();this.hideLoader()},getAJAXUrl:function(){if(this.url){var e=this;this.ajaxData={alt:"json","max-results":this.settings.numPosts};this.url.search(this.regex.islabel)!==-1&&this.url.search(this.regex.issearch)!==-1?this.ajaxUrl=this.url.replace(this.regex.labelsearch,function(t,n,r,i){e.ajaxData.q=i;return[n,"/feeds/posts/default/-/",r,"/"].join("")}):this.url.search(this.regex.islabel)!==-1&&this.url.search(this.regex.issearch)===-1?this.ajaxUrl=this.url.replace(this.regex.label,function(t,n,r){delete e.ajaxData.q;return[n,"/feeds/posts/default/-/",r,"/"].join("")}):this.url.search(this.regex.islabel)===-1&&this.url.search(this.regex.issearch)!==-1?this.ajaxUrl=this.url.replace(this.regex.search,function(t,n,r){e.ajaxData.q=r;return[n,"/feeds/posts/default"].join("")}):this.ajaxUrl=!1}else this.ajaxUrl=!1},showLoader:function(){e("<span></span>",{"class":"loader"}).appendTo(this.li.closest("li"))},hideLoader:function(){this.li.closest("li").find("span.loader").remove()},showPosts:function(t){var n=this,r=[],i,s,o,tim,yer,day,mon,month,ba,rom;t.feed.openSearch$totalResults.$t>0?e.each(t.feed.entry,function(t,u){i=u.title.$t;e.each(u.link,function(e,t){t.rel==="alternate"?s=t.href:s="#"});o=u.media$thumbnail?u.media$thumbnail.url.replace(/\/s72\-c\//,"/s640-c/"):n.settings.defaultImg;tim=u.published.$t.substring(0,10);ba=u.author[0].name.$t;yer=tim.substring(0,4);day=tim.substring(8,10);mon=tim.substring(5,7);month=n.settings.MonthNames[parseInt(mon,10)-1];daystr= day+ ' ' + month + ' ' + yer ;r.push('<li><a rel="nofollow" title="',i,'" href="',s,'"><div class="imgCont"><img alt="',i,'" src="',o,'"/><div class="overlay-icon"></div></div><span class="mega-author">',ba,'</span><span class="mega-date">',daystr,'</span><h3 title="',i,'">',i,"</h3></a></li>")}):r.push("<h5>","لاتوجد مواضيع للعرض!!","</h5>");this.container.html(r.join(""));this.lielem.removeData("menuloaded");this.li.data("menuloaded","true")},showError:function(e){if(e.statusText==="error"){this.hideLoader();this.addArrow();this.container.html("<h5>خطأ !! إنقطع الإتصال!</h5>")}},addArrow:function(){this.lielem.closest("li").find("span").remove();this.lielem.removeClass("hoverover");this.li.addClass("hoverover");e("<span></span>",{"class":"menuArrow"}).appendTo(this.li.closest("li"))},menuHelper:function(t){var n=this;t.find(">li").hover(function(){var x=e(this);x.find(".submenu").addClass("hoveracive").fadeIn().animate({opacity: 1, marginTop: "0"},100);var t=e(this);t.find("a:first").addClass("hoverover");var r=e(this).find("ul.verticlemenu li").height()*e(this).find("ul.verticlemenu li").length;t.find("ul.postslist").css({"min-height":r+"px"});n.requestFirstAjax(t)},function(){e(this).find("a:first").removeClass("hoverover"),e(this).find(".submenu").fadeOut().animate({opacity: 0, marginTop: "20px"},10)})},addAjaxHtml:function(){this.elem.find("ul ul").remove();this.elem.addClass("adajaxmenu").find(">li").find("ul:first").addClass("verticlemenu").wrap(e("<div></div>",{"class":this.settings.divClass}));this.elem.find(".submenu").parent().addClass("megaaccordion");e("ul.verticlemenu").after(e("<ul></ul>",{"class":"postslist"}))},requestFirstAjax:function(e){e=e.find(".verticlemenu li:first-child a");this.url=e.attr("href");this.container=e.closest("ul").siblings("ul");this.li=e;this.hoverOver()}};e.fn.ajaxBloggerMenu=function(n){var r={},i=e.extend({divClass:"submenu",postsClass:"postslist"},r,n);return this.each(function(){var n=new t(e(this),i)})};
//edit yor stayle
var $mega = jQuery.noConflict();$mega(document).ready(function(){$mega("#adajaxmenu").ajaxBloggerMenu({
numPosts:8,
MonthNames: ["جانفى", "فيفرى", "مارس", "أبريل", "ماى", "جوان", "جويلية", "أوت", "سبتمبر", "أكتوبر", "نوفمبر", "ديسمبر"],
defaultImg:"//3.bp.blogspot.com/-wvl3rLbmxlw/Wfsw0_rujFI/AAAAAAAAB-A/pHhFH89qOzE6bpecsHB23VN682xxWbZVACLcBGAs/s1600/no-image.png"
})});})(jQuery);
//LinkList list html
$("#LinkList100").each(function() {var e = "<nav class='navigation' id='Megamenu-ba88'><div class='resp-desk chow-m'><a class='menubtn' href='#' id='duled-m1-menu'><i class='fa fa-bars'></i></a></div><div id='opj-m-mu-ba'><label class='switch-night-mode'><input id='js-switch' type='checkbox'/><div class='slidswi'></div></label><div class='opj random-button' id='abt-random'/><div class='opj fullecran'><a href='#' onclick='toggleFullScreen()'/></div></div><ul class='menu admenus' id='adajaxmenu'><li><li><div class='resp-desk close-m'><a class='menubtn' href='#' id='duled-m2-menu'><i class='fa fa-close'></i></a></div></li><li><a class='Meg-Home' href='/'><i class='fa fa-home'/></a></li><ul>";$("#LinkList100 li").each(function() {var t = $(this).text(),n = t.substr(0, 1),r = t.substr(1);"+" == n ? (n = $(this).find("a").attr("href"), e += '<li><a href="' + n + '">' + r + "</a></li>") : (n = $(this).find("a").attr("href"), e += '</ul></li><li><a href="' + n + '">' + t + "</a><ul id='childxmenu'>")});e += "</ul></li></ul></nav>";$(this).html(e);$("#LinkList100 ul").each(function() {var e = $(this);if (e.html().replace(/\s| /g, "").length == 0) e.remove()});$("#LinkList100 li").each(function() {var e = $(this);if (e.html().replace(/\s| /g, "").length == 0) e.remove()})});
//activeTab menu mobil
var touchmega = $('#duled-m1-menu, #duled-m2-menu');var menumega = $('.menu');$(touchmega).on('click', function(e) {e.preventDefault();menumega.slideToggle();});$(window).resize(function() {var w = $(window).width();if (w > 800 && menumega.is(':hidden')) {menumega.removeAttr('style');}});
//FullScreen-button
function toggleFullScreen(){document.fullScreenElement&&null!==document.fullScreenElement||!document.mozFullScreen&&!document.webkitIsFullScreen?document.documentElement.requestFullScreen?document.documentElement.requestFullScreen():document.documentElement.mozRequestFullScreen?document.documentElement.mozRequestFullScreen():document.documentElement.webkitRequestFullScreen&&document.documentElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT):document.cancelFullScreen?document.cancelFullScreen():document.mozCancelFullScreen?document.mozCancelFullScreen():document.webkitCancelFullScreen&&document.webkitCancelFullScreen()}
//random-button
function showLucky(root){ var feed = root.feed; var entries = feed.entry || []; var entry = feed.entry[0]; for (var j = 0; j < entry.link.length; ++j){if (entry.link[j].rel == 'alternate'){window.location = entry.link[j].href;}}}function fetchLuck(luck){ script = document.createElement('script');script.src = '/feeds/posts/summary?start-index='+luck+'&max-results=1&alt=json-in-script&callback=showLucky'; script.type = 'text/javascript';document.getElementsByTagName('head')[0].appendChild(script); }function feelingLucky(root){ var feed = root.feed; var total = parseInt(feed.openSearch$totalResults.$t,10); var luckyNumber = Math.floor(Math.random()*total);luckyNumber++; a = document.createElement('a'); a.href = '#random'; a.rel = luckyNumber;a.onclick = function(){fetchLuck(this.rel);}; document.getElementById('abt-random').appendChild(a);};document.write('<script src="/feeds/posts/summary?max-results=0&alt=json-in-script&callback=feelingLucky" type="text/javascript"><\/script>');
//mode night
document.getElementById("js-switch").addEventListener("change", function() {document.body.classList.toggle("dark")});
//]]>
</script>
شرح الكود
/*=====================================
= Mega menu
=====================================*/
div#LinkList100 .widget-content{display:none;}
#Megamenu-ba88{position:relative;display:block;width:100%;}
#Megamenu-ba88 a{text-decoration:none;}
#Megamenu-ba88 a.hoverover{background:rgba(0,0,0,0.1)!important;}
#adajaxmenu{width:100%;max-width:100%;position:relative;}
.admenus *{margin:0;padding:0;}
ul#adajaxmenu li ul{display:none;}
ul#adajaxmenu li:hover ul{display:block;}
ul.admenus{list-style:none;line-height:normal;overflow:visible!important;margin:0;padding:0;}
ul.admenus:after{margin:0;padding:0;content:"";display:block;height:0;clear:both;}
ul.admenus li{float:right;display:inline;font-size:14px;}
ul.admenus li a{cursor:pointer;display:block;line-height:normal;padding:10px 15px;margin:15px 5px;font-size:14px;font-weight:700;text-transform:none;}
ul.admenus ul li a{margin:5px;}
ul.admenus div ul li a:hover{background:rgba(0,0,0,0.1)!important;}
ul.admenus li a i{margin:0 5px;font-size:1.33333333em;line-height:normal;vertical-align:-15%;}
ul.admenus li:hover ul{display:block;}
ul.admenus ul li{z-index:72;float:none;min-width:160px;text-shadow:none;}
ul.admenus ul ul{display:none;left:100%;top:0;}
ul.adajaxmenu li div.submenu{position:absolute;width:100%;z-index:90;right:0;margin-top:20px;overflow:hidden;min-height:150px;display:none;}
ul.adajaxmenu ul,ul.adajaxmenu ul li{display:inline-block!important;border:0 none!important;margin:0!important;padding:0!important;}
ul.adajaxmenu ul li{background:none!important;float:none!important;position:relative;}
ul.adajaxmenu ul.verticlemenu{position:relative;width:15%;right:0;top:0;bottom:0;}
ul.verticlemenu li{display:block!important;width:100%;}
ul.adajaxmenu ul.postslist{background: rgba(0, 0, 0, 0.14) !important;position:relative;display:block;width:85%;float:left;}
ul.adajaxmenu ul.postslist li{overflow:hidden;position:relative;width:25%;width:calc(100% / 4);margin:0!important;text-align:center;}
ul.adajaxmenu ul.postslist li a .imgCont{width:auto;height:150px;overflow:hidden;position:relative;display:block;margin:0 auto;border-width:5px;border-style:solid;}
ul.adajaxmenu ul.postslist li a .imgCont img{width:100%;height:auto;display:block;}
ul.admenus li a.Meg-Home{padding:0!important;margin:10px 10px!important;font-size:1.5em;vertical-align:inherit;position:relative;border-width:5px;border-style:solid;height:55px;width:55px;text-align:center;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-shadow:0 0 30px 30px rgba(0,0,0,0.26) inset;-moz-box-shadow:0 0 30px 30px rgba(0,0,0,0.26) inset;-ms-box-shadow:0 0 30px 30px rgba(0,0,0,0.26) inset;-o-box-shadow:0 0 30px 30px rgba(0,0,0,0.26) inset;box-shadow:0 0 30px 30px rgba(0,0,0,0.26) inset;}
ul.adajaxmenu ul.postslist li a{text-align:right;background:transparent!important;font-size:14px!important;padding:15px 20px!important;margin:0!important;float:right!important;border-left:1px solid rgba(255,255,255,.1);}
ul.adajaxmenu ul.postslist li a h3{display:block;margin:5px 0!important;padding:5px!important;font-size:14px;font-weight:600;clear:both;overflow:hidden;height:60px;}
ul.postslist h5{padding:10px;font-size:15px;font-weight:700;}
/*====abbr + author======*/
ul.adajaxmenu ul.postslist li a span{font-size:10px;float:right;direction:ltr;margin:5px 0;background-color:rgba(0, 0, 0, 0.23);position:relative;font-family:Segoe UI,Tahoma;overflow:hidden;padding:3px 30px 3px 10px;border:none!important;outline:none!important;text-decoration:none!important;}
ul.adajaxmenu ul.postslist li a span.mega-date{direction:rtl;}
ul.adajaxmenu ul.postslist li a span:before{display:inline-block;top:0;right:0;position:absolute;width:20px;height:20px;text-align:center;font-family:fontawesome;color:rgba(0, 0, 0, 0.39);font-size:14px;padding-top:3px;}
ul.adajaxmenu ul.postslist li a span.mega-date:before{content:"\f017";}
ul.adajaxmenu ul.postslist li a span.mega-author:before{content:"\f007";}
/*====before======*/
ul.adajaxmenu ul.postslist h5:before{content: "\f05e";font-family: FontAwesome;margin: 0 8px;}
li.megaaccordion a:before{content:"\f114";font-family:FontAwesome;margin:0 5px;font-size:1.555em;line-height:normal;vertical-align:-15%;font-weight:normal;}
ul.adajaxmenu ul.postslist li a:before{font-size:1em;content:"\f006";position:relative;z-index:2;}
ul.adajaxmenu ul.postslist li a:hover:before{content:"\f005"}
ul.adajaxmenu span.menuArrow:before{color:rgba(255,255,255,0.2);pointer-events:none;content:"\f053";font:normal normal normal 20px/1 FontAwesome;display:block;margin-top:-10px;padding:0 8px;position:absolute;left:0;top:50%;width:auto;height:auto;text-align:center;}
span.loader{pointer-events:none;position:absolute;top:20px;left:20px;width:5px;height:16px;background:rgba(255,255,255,0.2);-webkit-animation:pulse 750ms infinite;animation:pulse 750ms infinite;-webkit-animation-delay:250ms;animation-delay:250ms;}
.loader:before,.loader:after{content:"";position:absolute;display:block;height:16px;width:5px;background:rgba(255,255,255,0.2);top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);-webkit-animation:pulse 750ms infinite;animation:pulse 750ms infinite;}
.loader:before{left:10px;}
.loader:after{left:-10px;-webkit-animation-delay:500ms;animation-delay:500ms;}
@-webkit-keyframes pulse{50%{background:white;}}
@keyframes pulse{50%{background:white;}}
/*---resp-desk---*/
#Megamenu-ba88 .resp-desk{display:none;}
/*====option opj Mega menu====*/
#Megamenu-ba88 #opj-m-mu-ba{position:relative;padding:0 5px;margin:15px 5px;height:100%;z-index:2;overflow:hidden;float:left;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}
#Megamenu-ba88 #opj-m-mu-ba .opj{overflow:hidden;display:inline-block;text-align:center;margin:5px;cursor:pointer;}
#Megamenu-ba88 #opj-m-mu-ba .opj a{overflow:hidden;display:block;}
#Megamenu-ba88 #opj-m-mu-ba .opj:hover{background:transparent;}
#Megamenu-ba88 #opj-m-mu-ba .opj a:before{font-family:FontAwesome;font-size:14px;cursor:pointer;width:34px;height:34px;display:block;line-height:34px;font-weight:normal;}
#Megamenu-ba88 #opj-m-mu-ba .random-button a:before{content:"\f074";}
#Megamenu-ba88 #opj-m-mu-ba .fullecran a:before{content:"\f26c";}
/*========================================
stat [ night-mode ]
========================================*/
/*====switch btn======*/
.switch-night-mode{position:relative;display:inline-block;margin:5px;}
.switch-night-mode input{display:none;}
.switch-night-mode .slidswi{width:60px;height:30px;will-change:auto;position:relative;cursor:pointer;top:0;left:0;right:0;bottom:0;background:rgba(255,255,255,0.32);-webkit-box-shadow:inset -0.15em 0.15em 0.25em rgba(0,0,0,0.1);box-shadow:inset -0.15em 0.15em 0.25em rgba(0,0,0,0.1);-webkit-transition:all 250ms cubic-bezier(0.65,0,0.15,1);transition:all 250ms cubic-bezier(0.65,0,0.15,1);}
.switch-night-mode .slidswi:before {left: 0;top: 0;will-change: auto;position: absolute;content: "\f186";font-family: FontAwesome;font-size: 14px;text-align: center;height: 30px;width: 30px;line-height: 25px;border-width:2px;border-style: solid;-webkit-transform: scale(1.2);transform: scale(1.2);-webkit-transition: all 250ms cubic-bezier(0.65,0,0.15,1);transition: all 250ms cubic-bezier(0.65,0,0.15,1);}
body.dark .switch-night-mode .slidswi:before{content:"\f185";}
input:checked + .slidswi{background:rgba(0,0,0,0.24);-webkit-box-shadow:inset -0.1em 0.1em 0.35em -0.05em rgba(0,0,0,0.15);box-shadow:inset -0.1em 0.1em 0.35em -0.05em rgba(0,0,0,0.15);}
input:checked + .slidswi:before{-webkit-transform:scale(1.2) translateX(2em);transform:scale(1.2) translateX(2em);}
/*====hover======*/
ul.adajaxmenu ul.postslist li a:hover span{padding:3px 25px 3px 10px;margin-right:10px;}
ul.adajaxmenu ul.postslist li a:hover .imgCont{-webkit-transform:scale(1.05) translateY(-20px);-moz-transform:scale(1.05) translateY(-20px);-ms-transform:scale(1.05) translateY(-20px);-o-transform:scale(1.05) translateY(-20px);transform:scale(1.05) translateY(-20px);-webkit-box-shadow:0 4px 8px -1px rgba(0,0,0,.3);-moz-box-shadow:0 4px 8px -1px rgba(0,0,0,.3);-ms-box-shadow:0 4px 8px -1px rgba(0,0,0,.3);-o-box-shadow:0 4px 8px -1px rgba(0,0,0,.3);box-shadow:0 4px 8px -1px rgba(0,0,0,.3);}
/*====transition======*/
#Megamenu-ba88 a,ul.admenus li a.Meg-Home,ul.adajaxmenu ul.postslist li a span,ul.adajaxmenu ul.postslist li a .imgCont, #Megamenu-ba88 #opj-m-mu-ba .opj{-webkit-transition:.3s ease-out;-moz-transition:.3s ease-out;-ms-transition:.3s ease-out;-o-transition:.3s ease-out;-o-transition:.3s ease-out;transition:.3s ease-out;}
/*====border-radius======*/
#Megamenu-ba88 .resp-desk a,ul.adajaxmenu ul.postslist li h3,ul.admenus li a,ul#adajaxmenu li ul a{border-radius:0.25em;-o-border-radius:0.25em;-ms-border-radius:0.25em;-moz-border-radius:0.25em;-webkit-border-radius:0.25em;}
ul.admenus li a.Meg-Home,#Megamenu-ba88 #opj-m-mu-ba .opj,.switch-night-mode .slidswi:before{border-radius:100%;-o-border-radius:100%;-ms-border-radius:100%;-moz-border-radius:100%;-webkit-border-radius:100%;}
.switch-night-mode .slidswi{border-radius: 30px;-o-border-radius: 30px;-ms-border-radius: 30px;-moz-border-radius: 30px;-webkit-border-radius: 30px;}
/*====box-shadow======*/
ul.adajaxmenu li div.submenu{-webkit-box-shadow:0 6px 15px rgba(0,0,0,0.16);-moz-box-shadow:0 6px 15px rgba(0,0,0,0.16);-ms-box-shadow:0 6px 15px rgba(0,0,0,0.16);-o-box-shadow:0 6px 15px rgba(0,0,0,0.16);box-shadow:0 6px 15px rgba(0,0,0,0.16);}
/*====Page Responsive all====*/
@media screen and (max-width:1200px){
#Megamenu-ba88 .resp-desk{display:inline-block;padding:10px;text-transform:uppercase;font-weight:600;}#Megamenu-ba88 .resp-desk a{width:50px;height:50px;font-size:35px;margin:0;padding:10px;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}#Megamenu-ba88 ul#adajaxmenu li .resp-desk{float:right;}#Megamenu-ba88 .resp-desk.close-m a{font-size:1.3333em;}
/*----ul-----*/
.main-nav{position:relative;margin:0;display:block;width:100%;overflow:hidden;}ul#adajaxmenu,ul#adajaxmenu .submenu{max-width:50%;width:50%;height:100%;display:none;padding:0;top:0;margin:auto;position:fixed!important;overflow:hidden!important;}ul#adajaxmenu{right:0;z-index:9999;}ul#adajaxmenu li .submenu{margin-right:100%;min-height:auto;display:block!important;z-index:-1;}ul#adajaxmenu li:hover .submenu{margin-right:50%;}ul#adajaxmenu ul{width:100%;}ul#adajaxmenu li{float:none;display:block;width:100%;font-size:14px;}ul#adajaxmenu li div.submenu .postslist,ul#adajaxmenu ul li span{display:none!important;}}/*ipad pro*/
@media screen and (max-width:384px){ul.admenus li a{font-size:11px;}}/*nexus 4 + LG optimus L70*/
/*\
===============================>Themes Mega-menu [ Purple ] ===============================>\*/#Megamenu-ba88, ul.adajaxmenu li div.submenu, .switch-night-mode .slidswi:before, ul#adajaxmenu, ul#adajaxmenu .submenu, ul.adajaxmenu ul.postslist li a h3, ul.adajaxmenu ul.postslist li a:hover span, ul.adajaxmenu ul.postslist li a span:before {background: #942b7c;}/*==========*/ul.admenus li a, ul.admenus li a.Meg-Home,#Megamenu-ba88 #opj-m-mu-ba .opj, #Megamenu-ba88 .resp-desk a {background: #541847;}/*==========*/ul.postslist h5, ul.admenus li a, ul.admenus li a.Meg-Home, #Megamenu-ba88 #opj-m-mu-ba .opj a:before, .switch-night-mode .slidswi:before, ul.adajaxmenu ul.postslist li a span, #Megamenu-ba88 .resp-desk a, ul.adajaxmenu ul.postslist li a h3{color: #d0b3c7;}ul.adajaxmenu ul.postslist li a:before{color: #b66fa6;}/*=========*/#Megamenu-ba88 a.hoverover, ul.adajaxmenu ul.postslist li a:hover span, ul.adajaxmenu ul.postslist li a:hover h3 {color: #ffffff!important;}/*=========*/ul.adajaxmenu ul.postslist li a .imgCont{border-color:#942b7c;}ul.admenus li a.Meg-Home {border-color:#b66fa6;}.switch-night-mode .slidswi:before {border-color:#541847;}/*=========*/ul.admenus li a.Meg-Home:hover { -webkit-box-shadow: 0 0 0 0 #b66fa6 inset; -moz-box-shadow: 0 0 0 0 #b66fa6 inset; -ms-box-shadow: 0 0 0 0 #b66fa6 inset; -o-box-shadow: 0 0 0 0 #b66fa6 inset; box-shadow: 0 0 0 0 #b66fa6 inset;}
/*=====خلفية الوضع الليلي=====*/
body.dark {background: #541847 !important;}body.dark:before{background:rgba(231,255,140,0.21);pointer-events:none;content:"";position:fixed;width:100%;height:100%;z-index:99999999;-webkit-filter:invert(100%);-moz-filter:invert(100%);-ms-filter:invert(100%);-o-filter:invert(100%);filter:invert(100%);}/*\===============================> [ END ] ===============================>\*/
التعديل على الكود
بعض الالوان الجاهزة يمكن استبدال الوانها
الاخضر
/*\
===============================>
Themes Mega-menu [ green ]
===============================>
\*/
#Megamenu-ba88, ul.adajaxmenu li div.submenu, .switch-night-mode .slidswi:before, ul#adajaxmenu, ul#adajaxmenu .submenu, ul.adajaxmenu ul.postslist li a h3 {
background: #353e4d;}
/*==========*/
ul.admenus li a, ul.admenus li a.Meg-Home,#Megamenu-ba88 #opj-m-mu-ba .opj, #Megamenu-ba88 .resp-desk a, ul.adajaxmenu ul.postslist li a:hover span, ul.adajaxmenu ul.postslist li a span:before {
background: #6cc27b;}
/*==========*/
ul.admenus li a, ul.admenus li a.Meg-Home, #Megamenu-ba88 #opj-m-mu-ba .opj a:before, ul.adajaxmenu ul.postslist li a span, #Megamenu-ba88 .resp-desk a, ul.adajaxmenu ul.postslist li a h3{
color: #ffffff;}
ul.adajaxmenu ul.postslist li a:before, .switch-night-mode .slidswi:before, ul.postslist h5, ul.admenus li a.Meg-Home:hover, ul.adajaxmenu ul.postslist li a:hover h3{
color: #6cc27b;}
/*==========*/
ul.adajaxmenu ul.postslist li a:hover span {color: #ffffff!important;}
/*==========*/
ul.adajaxmenu ul.postslist li a .imgCont{border-color:#353e4d;}
ul.admenus li a.Meg-Home, .switch-night-mode .slidswi:before {border-color:#6cc27b;}
/*==========*/
ul.admenus li a.Meg-Home:hover {
-webkit-box-shadow: 0 0 0 0 #6cc27b inset;
-moz-box-shadow: 0 0 0 0 #6cc27b inset;
-ms-box-shadow: 0 0 0 0 #6cc27b inset;
-o-box-shadow: 0 0 0 0 #6cc27b inset;
box-shadow: 0 0 0 0 #6cc27b inset;
}
/*=====خلفية الوضع الليلي=====*/
body.dark {background: #353e4d !important;}
body.dark:before{background:rgba(255, 255, 255, 0.36);pointer-events:none;content:"";position:fixed;width:100%;height:100%;z-index:99999999;-webkit-filter:invert(100%);-moz-filter:invert(100%);-ms-filter:invert(100%);-o-filter:invert(100%);filter:invert(100%);}
/*\
===============================>
[ END ]
===============================>
\*/
احمر
/*\
===============================>
Themes Mega-menu [ red ]
===============================>
\*/
#Megamenu-ba88, ul.adajaxmenu li div.submenu, .switch-night-mode .slidswi:before, ul#adajaxmenu, ul#adajaxmenu .submenu, ul.adajaxmenu ul.postslist li a h3, ul.admenus li a.Meg-Home{
background: #38333a;
}
/*==========*/
ul.admenus li a,#Megamenu-ba88 #opj-m-mu-ba .opj, #Megamenu-ba88 .resp-desk a, ul.adajaxmenu ul.postslist li a span:before, ul.adajaxmenu ul.postslist li a:hover span {
background: #e85744;
}
/*==========*/
ul.admenus li a, #Megamenu-ba88 #opj-m-mu-ba .opj a:before, ul.adajaxmenu ul.postslist li a span, #Megamenu-ba88 .resp-desk a{
color: #38333a;
}
ul.adajaxmenu ul.postslist li a:before, .switch-night-mode .slidswi:before, ul.admenus li a.Meg-Home, ul.postslist h5, #Megamenu-ba88 #opj-m-mu-ba .opj a:hover:before, ul.adajaxmenu ul.postslist li a:hover h3{
color: #e85744!important;
}
/*=====hover=====*/
#Megamenu-ba88 a.hoverover, ul.adajaxmenu ul.postslist li a h3 {color: #6f6f6f!important;}
/*==========*/
ul.adajaxmenu ul.postslist li a .imgCont{border-color:#38333a;}
ul.admenus li a.Meg-Home, .switch-night-mode .slidswi:before {border-color:#e85744;}
/*==========*/
ul.admenus li a.Meg-Home:hover {
-webkit-box-shadow: 0 0 0 0 #e85744 inset;
-moz-box-shadow: 0 0 0 0 #e85744 inset;
-ms-box-shadow: 0 0 0 0 #e85744 inset;
-o-box-shadow: 0 0 0 0 #e85744 inset;
box-shadow: 0 0 0 0 #e85744 inset;
}
/*=====خلفية الوضع الليلي=====*/
body.dark {background: #38333a !important;}
body.dark:before{background:rgba(255, 255, 255, 0.36);pointer-events:none;content:"";position:fixed;width:100%;height:100%;z-index:99999999;-webkit-filter:invert(100%);-moz-filter:invert(100%);-ms-filter:invert(100%);-o-filter:invert(100%);filter:invert(100%);}
/*\
===============================>
[ END ]
===============================>
\*/
ازرق
/*\
===============================>
Themes Mega-menu [ blue ]
===============================>
\*/
#Megamenu-ba88, ul.adajaxmenu li div.submenu, .switch-night-mode .slidswi:before, ul#adajaxmenu, ul#adajaxmenu .submenu, ul.adajaxmenu ul.postslist li a h3, ul.admenus li a.Meg-Home{
background: #ece8df;
}
/*=====btn=====*/
ul.admenus li a,#Megamenu-ba88 #opj-m-mu-ba .opj, #Megamenu-ba88 .resp-desk a, ul.adajaxmenu ul.postslist li a span:before, ul.adajaxmenu ul.postslist li a:hover span {
background: #435c72;
}
/*==========*/
ul.admenus li a, #Megamenu-ba88 #opj-m-mu-ba .opj a:before, ul.adajaxmenu ul.postslist li a span, #Megamenu-ba88 .resp-desk a{
color: #ece8df;
}
ul.adajaxmenu ul.postslist li a:before, .switch-night-mode .slidswi:before, ul.admenus li a.Meg-Home, ul.postslist h5, ul.adajaxmenu ul.postslist li a:hover h3, #Megamenu-ba88 #opj-m-mu-ba .opj a:hover:before{
color: #435c72!important;
}
/*=====hover=====*/
#Megamenu-ba88 a.hoverover, ul.adajaxmenu ul.postslist li a h3 {color: #6f6f6f!important;}
/*==========*/
ul.adajaxmenu ul.postslist li a .imgCont{border-color:#ece8df;}
ul.admenus li a.Meg-Home, .switch-night-mode .slidswi:before {border-color:#435c72;}
/*==========*/
ul.admenus li a.Meg-Home:hover {
-webkit-box-shadow: 0 0 0 0 #435c72 inset;
-moz-box-shadow: 0 0 0 0 #435c72 inset;
-ms-box-shadow: 0 0 0 0 #435c72 inset;
-o-box-shadow: 0 0 0 0 #435c72 inset;
box-shadow: 0 0 0 0 #435c72 inset;
}
/*=====خلفية الوضع الليلي=====*/
body.dark {background: #435c72 !important;}
body.dark:before{background:rgba(255, 255, 255, 0.36);pointer-events:none;content:"";position:fixed;width:100%;height:100%;z-index:99999999;-webkit-filter:invert(100%);-moz-filter:invert(100%);-ms-filter:invert(100%);-o-filter:invert(100%);filter:invert(100%);}
/*\
===============================>
[ END ]
===============================>
\*/
تخصيص زر NIGHT MODE
- قم بحذف الأكواد الموجودة أسفل /*==خلفية الوضع الليلي==*/ ثم قم بإختيار العنصر الذي تريد أن تغير لونه مثلا ..
body.dark {
background: #000000 !important;
}
لاحظ أننا قمنا بإضافة لون لخلفية القالب لكن الوسم body أتى متبوعا بالكلاس .dark الذي حقن بواسطة الزر عند النقر عليه ..ثم أضفنا أمام اللون عنصر الأولوية !important كذلك هو الحال مع بقية العناصر مثل الهيدر و خلفية التدوينات وغيرها .. إلا أن الكلاس هذه المرة سيكون دائما في المقدمة وإليك مثال عن تغيير لون خلفية التدوينة
.dark .post-body {
background: #000000 !important;
}
لاحظ أننا قمنا بإضافة الكلاس .dark أمام الوسم الخاص بالبوست أي لنفترض أن الخلفية للتدوينات في قالب مدونتك بيضاء الآن عند النقر على زر الوضع الليلي ستصبح الخلفية باللون الذي تختاره أنت .. كذلك هو الحال مع بقية العناصر التي تريد أن تغير لها الخلفية ولون الخط ... إلخ مع العلم أنه إذا كان لديك عنصرين يحملان نفس اللون لاداعي أن تكرر الكود مرتين فقط ضعهما في نفس العارضة وبينهما فاصلة , بالشكل الآتي
.dark .post-body, .dark .sidebar {
background: #000000 !important;
color: #ffffff !important;
}
ركز دائما على الفاصلة بينهما فكما تلاحظ أصبح حقل التدوينة وحقل القائمة الجانبية يشتركان في نفس لون الخلفية ولون الخط .. إذن بهذه الطريقة تستطيع أن تحصل على شكل مغاير لقالب مدونتك بضغطة زر .. أتمنى أن تكون الفكرة قد وصلت .
المصدر بلوجر كود
و شكرا
0 comments: