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

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

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

مراحل تركيب الإضافة

1. ادخل إلى لوحة تحكم المدونة في بلوجر.
2. اختر قالب المدونة التي تود تطبيق الشرح فيها.
3. اضغط على تحرير HTML ( قم بأخد نسخة إحتياطية للقالب )
4. ابحث عن الوسم </head> و اضف الكود التالي فوقه :

<style type="text/css">

.teqb4v2 {

  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) {#menub4 {display: none;}.teqb4v2 {display:block;}}
</style>

<script>//<![CDATA[
/*Responsive Menu*/
window.teqb4=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("teqb4"+t);t++);return e?"teqb4"+t:"teqb4"+(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="teqb4v2" 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(){teqb4('menub4');});
//]]></script>

ملاحظـــات :

• هــنـاك كــلـمـتــيـن فـي الــكـود الـســابـق مـتــكـررة، واحـده بـالــلـون الأصفر والثانية باللون الأخضر، والتي باللون الأصفر تـســتــبـدلـهــا بـمـعــرف قـائمـتــك.
• القوائم تبدأ بوسم <ul>،  قـد تــجـد الــوسـم مــكــتـوب بــهـذا الــشــكـل مــثـلا : <ul class="menu"> لكــن مــا يــهــمـنــا أن يـكــون هــذا الـوســم بــه مـعــرف id، عـلــى هــذا الــشـكــل : <ul id="resmenu">
• إن وجــدت الـمـعــرف وهــو الـكـلـمــة بـعــد id، قــم بـاســتـبـدالـهــا بــالكلمة الأصفر
• ان لم تجدها أضف المعرف فقط، أي أن تكتب بعد ul id="word" واستبدل word بـــأي كلمة تناسبك
هذا كل شيء، لكن ماذا يخص الكلمة الخضراء ؟ تخـص فـقـط ان كـان لـديـك قــائمـتـيـن وســتــكــرّـر الــكـود، أي ان تــســتــبـدل الــرقـم 2 فــيــهـا بالرقم 3

تـنـســيــقـات :

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

إشترك في قناتنا على اليوتيوب لتتوصلو بجديد حلقاتنا التقنية
سبحان الله، والحمدلله، ولا إله إلا الله، والله أكبر
إذا أعجبك الموضوع فلماذا تبخل علينا بالردود المشجعة ؟!