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

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

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

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

يوجد كلمتين في الكود السابق متكررة و هم ( maymenu ) و ( cnmunav2 )
ستقوم باستبدال  (maymenu ) بالمعرف الخاص بقائمتك .

توضيح :
القوائم تبدأ بوسم <ul> و قد تجد الوسم مكتوب بهذا الشكل مثلا <“ul class=”menu> ما يهمنا ان يكون هذا الوسم به معرف id هكذا <ul id=”resmenu”> .

إن وجدت المعرف وهو الكلمة بعد id تقوم بإستبدالها ب ( maymenu ) و ان لم تجد قم بإضافة معرف فقط تكتب بعد ul .

id=”word” و قم بإستبدال word بأي كلمة تناسبك و هذا كل شئ طيب ماذا يحص الكلمة الخضراء تخص فقط ان لو لديك قائمتين و سوف تكرر الكود ان تستبدل الرقم 2 إلي 3 .

427 كل المشاهدات 1 مشاهدة اليوم

مواضيع مشابهة قد تعجبك :

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *