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

قم بإضافة هذا الكود فوق وسم <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 .