جعل القوائم قابلة للعمل على الأجهزة الذكية

هل لديك قائمة او تريد تركيب قائمة على قالبك لكنها ليست متجاوبة, هل تريد جعل اى قائمة قابلة للعمل على الاجهزة الذكية ؟

الحل بسيط وبكود سهل التركيب كل ما عليك هو استخدام الكود التالي وستصبح قائمتك قابلة للتشغيل على الهواتف والاجهزة اللوحية وبدون اى مجهود منك

<style type="text/css">
.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;}
}
</style>
<script>
//<![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<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&&!y){y=m.href===document.URL?f:""}n+='<option value="'+m.href+'" '+y+">"+l+g+"</option>";if(s){var b=e.children[v].children[1];if(b&&h(b)){n+=d(b)}}}}if(a===1&&u){n='<option value="">'+u+"</option>"+n}if(a===1){n='<select class="cnmunav2" id="'+p(true)+'">'+n+"</select>"}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');});
//]]>
</script>
هناك كلمتين في الكود السابق متكررة
واحده باللون الأصفر والثانية باللون الاخضر
التي باللون الأصفر تستبدلها بمعرف قائمتك
توضيح القوائم تبدأ بوسم <ul> قد تجد الوسم مكتوب بهذا الشكل مثلا
<ul class="menu">ما يهمنا ان يكون هذا الوسم به معرف id
هكذا <ul id="resmenu">
ان وجدت المعرف وهو الكلمة بعد id تستبدلها بالكلمة الصفراء
ان لم تجد اضف معرف فقط تكتب بعد ul
id="word" واستبدل word باى كلمة تناسبك
هذا كل شئ طيب ماذا يخص الكلمة الخضراء تخص فقط ان لو لديك قائمتين وستكرر الكود ان تستبدل الرقم 2 فيها بالرقم 3

تنسيقات

ما هو معلم باللون الوردي حجم ونوع الخط
الرقم 100 عرض القائمة
الأرقام الحمراء هي الهوامش الخارجية للقائمة
2 اعلى - 4 يمين - 5 اسفل - 3 يسار
نفس الأمر للأرقام الزرقاء لكنها للهوامش الداخلة للقائمة