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

مشاهدات الان
السلام عليكم

 البحث عن

<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" هذا كل شئ

بعد الانتهاء اضغط على حفظ

اذا واجهت اي مشكلة في جعل القوائم متجاوبة، قم باخبارنا في تعليق وسنحل لك مشكل باذن الله، كان هذا كل شيء، سلام

في ملف لهذا الرابط محفوظه jquery-1.12.4blogger-mobile

وسلامتكم

Share on Google Plus

صاحب المدونه : صفحات هايف

اهلا وسهلا فيكم معنا بالمدونه البسيطه ""
    تعليق المدون
    تعليق الفيسبوك

0 التعليقات :

إرسال تعليق