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

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

كيفة جعل القوائم متجاوبة:

- ادخل لمدونتك ثم القالب بعدها تحرير html.
- وابحث عن الكود التالي.
<head>
- عند ايجاده ضع الكود التالي اسفله.
<script src='https://code.jquery.com/jquery-1.12.4.min.js'/>
- اعد البحث عن الكود التالي.
</head>
- عند ايجاده ضع الكود التالي فوقه(اعلاه).
<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>
هناك كلمة في الكود السابق متكررة، وهي باللون الأزرق، كل ماعليك فعله هو تبديل تلك الكلمة بمعرف قائمتك.
في حالة اذ ما وجدت المعرف وهو الكلمة بعد id تستبدلها بالكلمة الزرقاء.
اما في حال لم تجد المعرف قم بإضافة معرف لقائمتك لتصبح على شكل التالي.
<ul id="maymenu">
و تأكد من ان يكون "id" وليس "class" هذا كل شئ.
بعد الانتهاء اضغط على حفظ.
اذا واجهت اي مشكلة في جعل القوائم متجاوبة، قم باخبارنا في تعليق وسنحل لك مشكل باذن الله، كان هذا كل شيء، سلام.

شارك المقالة مع أصدقائك

mo3awin

هناك تعليقان (2):

  1. إدا كان class مادا سأفعل

    ردحذف
    الردود
    1. لا توجد مشكلة اترك class كماهو وقم باضافة id جنبه حتى يصبح بالشكل التالي
      ul class="---" id="maymenu
      وتاكد من ترك مسافة بين id و class
      اذا وجهتك اي مشكلة لا تتردد في طلب المساعدة ومرحبا بك.

      حذف