اكاديمية ورشة لونك

شرح جعل القوائم تعمل علي الأجهزة الذكية في بلوجر

حصريا علي اكاديمية ورشة لونك في قسم دروس بلوجر نقدم لكم شرح طريقة جعل القوائم قابلة للعمل علي الأجهزة الذكية علي البلوجر .

قم بإضافة هذا الكود فوق وسم <head/>

[code]&amp;lt;style type="text/css"&amp;gt;
.cnmunav2 {
color: #444;
display: none;
float: right;
font: 14px tahoma;
margin: 2px 4px 5px 3px;
padding: 2px 4px 5px 3px;
width: 100px;
}
@media screen and (max-width : 700px) {
#maymenu {display: none;}
.cnmunav2 {display:block;}
}
&amp;lt;/style&amp;gt;
&amp;lt;script&amp;gt;
//&amp;lt;![CDATA[
/*Responsive Menu*/
window.cnmunav=function(){"use strict";var e=function(e,t){function c(e){var t;if(!e)e=window.event;if(e.target)t=e.target;else if(e.srcElement)t=e.srcElement;if(t.nodeType===3)t=t.parentNode;if(t.value)window.location.href=t.value}function h(e){var t=e.nodeName.toLowerCase();return t==="ul"||t==="ol"}function p(e){for(var t=1;document.getElementById("cnmunav"+t);t++);return e?"cnmunav"+t:"cnmunav"+(t-1)}function d(e){a++;var t=e.children.length,n="",l="",c=a-1;if(!t){return}if(c){while(c–){l+=o}l+=" "}for(var v=0;v&amp;lt;t;v++){var m=e.children[v].children[0];if(typeof m!=="undefined"){var g=m.innerText||m.textContent;var y="";if(r){y=m.className.search(r)!==-1||m.parentNode.className.search(r)!==-1?f:""}if(i&amp;amp;&amp;amp;!y){y=m.href===document.URL?f:""}n+=’&amp;lt;option value="’+m.href+’" ‘+y+"&amp;gt;"+l+g+"&amp;lt;/option&amp;gt;";if(s){var b=e.children[v].children[1];if(b&amp;amp;&amp;amp;h(b)){n+=d(b)}}}}if(a===1&amp;amp;&amp;amp;u){n=’&amp;lt;option value=""&amp;gt;’+u+"&amp;lt;/option&amp;gt;"+n}if(a===1){n=’&amp;lt;select class="cnmunav2" id="’+p(true)+’"&amp;gt;’+n+"&amp;lt;/select&amp;gt;"}a–;return n}e=document.getElementById(e);if(!e){return}if(!h(e)){return}if(!("insertAdjacentHTML"in window.document.documentElement)){return}document.documentElement.className+=" js";var n=t||{},r=n.activeclass||"active",i=typeof n.autoselect==="boolean"?n.autoselect:true,s=typeof n.nested==="boolean"?n.nested:true,o=n.indent||"←",u=n.label||"- القائمة -",a=0,f=" selected ";e.insertAdjacentHTML("afterend",d(e));var l=document.getElementById(p());if(l.addEventListener){l.addEventListener("change",c)}if(l.attachEvent){l.attachEvent("onchange",c)}return l};return function(t,n){e(t,n)}}();$(document).ready(function(){cnmunav(‘maymenu’);});
//]]&amp;gt;
&amp;lt;/script&amp;gt;[/code]

يوجد كلمتين في الكود السابق متكررة واحده باللون الأصفر و الثانية باللون الأخضر التي باللون الأصفر تقوم بإستبدالها بالمعرف الخاص بقائمتك .

توضيح : القوائم تبدأ بوسم <ul> و قد تجد الوسم مكتوب بهذا الشكل مثلا <“ul class=”menu> ما يهمنا ان يكون هذا الوسم به معرف id هكذا <ul id=”resmenu”> .

إن وجدت المعرف وهو الكلمة بعد id تقوم بإستبدالها بالكلمة الصفراء و ان لم تجد قم بإضافة معرف فقط بعد ul تكتب id=”word” و قم بإستبدال word بأي كلمة تناسبك و هذا كل شئ طيب ماذا يحص الكلمة الخضراء تخص فقط ان لو لديك قائمتين و سوف تكرر الكود ان تستبدل الرقم 2 إلي 3 .

مهاب البوشي

مهاب البوشي

مهاب البوشي ، مؤسس شركة ترويج 'Trweeg.Com' و مسئول السيو و التسويق في ورشة لونك و مدير اكاديمية ورشة لونك التعليمية .

اضف تعليق