مساحة إعلانية

الأربعاء، 23 سبتمبر، 2015

الأربعاء، 23 سبتمبر، 2015

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

convert menu to responsive
هل لديك قائمة او تريد تركيب قائمة على قالبك لكنها ليست متجاوبة, هل تريد جعل اى قائمة قابلة للعمل على الاجهزة الذكية ؟
الحل بسيط وبكود سهل التركيب كل ما عليك هو استخدام الكود التالي وستصبح قائمتك قابلة للتشغيل على الهواتف والاجهزة اللوحية وبدون اى مجهود منك

<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 يسار
نفس الأمر للأرقام الزرقاء لكنها للهوامش الداخلة للقائمة

هناك 20 تعليقًا:

  1. شكرا لك اخى صممت القالب بفكرة مشابههة

    ردحذف
    الردود
    1. اهلا بك يا طيب وشرفني مرورك

      حذف
  2. بجد بجد تسلم ايدك وكل سنة وانت طيب تستاهل 5 كيلو لحمة ويبقو قليل عليك

    ردحذف
  3. اضافة مفيده جدا وموضوع جميل

    ردحذف
  4. مشكور على الموضوع الجميل والمميز
    اتمنى زيارة مدونتي http://mashroo1.blogspot.com
    واعطائي نصائحك وتوجيهاتك وشاكر لك ...

    ردحذف
  5. اسعدني مروركم اخواني الأفاضل
    وكل عام وانتم بخير

    ردحذف
  6. تسلم وكل عام وانتم بخير

    ردحذف
  7. لقد جربت الكود بكل الطرق اخي ولايعمل

    ردحذف
    الردود
    1. اخي لو طبقتها مضبوط ستعمل معك
      ولكي تعاينها قم بتصير حجم نافذة المتصفح لتراها فهي لا تظهر إلا على النافذة الصغيرة او عبر الهاتف

      حذف
  8. السلام عليكم ...
    لدي فقط مشكلة
    انا نسقت القالب على جميع الشاشات وأثناء التنسيق حذفت القائمة
    والأن أريد جعلها مثل هذه القائمة كيف يمكن ذلك؟؟
    ملاحظة : أستخدمت للتنسيق أكواد CCS

    ردحذف
    الردود
    1. وعليكم السلام ورحمة الله وبركاته
      أخي طالما حذفت القائمة ستتوقف عليك بناء قائمة
      يمكنك الإستعانة بهذا الموضوع
      http://cnmu.blogspot.com/2013/12/Css-Drop-Down-Menu.html
      ثم تطبيق شرح القائمة الحالي عليها

      حذف
  9. السلام عليكم مقالة رائعة ومفيدة
    اذا ممكن تلبية طلبي انا لدي في قالبي قائمة منسدلة (رئيسي -فرعي -فرعي ) كلهن تحت بعض . انا اريد ان تكون القوائم الفرعية واحد جنب الاخرى وليس تحتها يعني ان تكون مثلا عشر قوائم فرغية تنبثق مرة واحدة ولكن ليس عموديا وانما افقيا . ارجو ان تفيدنا علما ان قالبي انكليزي غير معرب وشكرا .

    ردحذف
    الردود
    1. وعليكم السلام ورحمة الله وبركاته
      أهلا بك أخي ما تريده هو طلب دعم فني وانا الحقيقة لا اقدم هذا النوع من الطلبات عبر المدونة لكن ربما يفيدك الموضوع التالي
      http://cnmu.blogspot.com/2013/12/Css-Drop-Down-Menu.html

      حذف
    2. شكرا جزيلا ولكنه ليس المطلوب

      حذف
  10. جميل جدا اخى عمرو كانت لا تقبل العمل معى وبحثت فى التعليقات وبنيت قائمة جديدة والان عملت معى ولكن هل يمكن ان تطرح قائمة مثل الموجوده فى هذا الموقع فهى حقا جميلة www.mol5sat.net
    او على الاقل الموجوده فى مدنتك لان القائمة هذة ليس لها مظهر احترافى وشكرا

    ردحذف
    الردود
    1. اخي الكريم القوائم الخاصه تعمل لكل قالب بشكل منفصل ولا ينفع شرحها انا شرحت عدة قوائم سابقاً احترافية ويمكنك العمل على تخصيصها طبقاً لما تريد اما لو تقصد التجاوب اسلوب التجاوب في الموضوع هو افضل الأساليب حيث ان هلا يتطلب تعديلات منفصلة على القوائم اضافة انه الأفضل في التحكم من الهواتف

      حذف
  11. يا أخي القوائم لم تعد تظهر أبدا لما صغرت المتصفح

    ردحذف
    الردود
    1. القوائم عند التصغير المفترض ان تختفي لكن يظهر مكانها القائمة المنسدله ان لم تظهر فلديك اما خطأ في التطبيق او انها ظاهره لكن لم تأخذ مكان مناسب في قالبك بسبب عدم توافقه معها

      حذف
  12. حضرتك القائمة مظهرتش زي ما فالصورة

    ردحذف
    الردود
    1. الصورة توضح ظهور القائمة وهي مفتوحة لكن القائمة تكون صغيره قبل الفتح

      حذف

نسعد ونتشرف بتعليقاتكم
لكن هناك شروط يجب اتباعها لضمان نشر التعليقات
1ان يكون التعليق يخص محتوى الموضوع
2ان لا يحتوي التعليق اى روابط دون داعي
3إن أردت إضافة كود حوله اولا بمحول الأكواد
4أن لا يحتوي التعليق اي الفاظ او اساءات لاى احد
5أى سؤال بعيد عن محتوى الموضوع يرجى استخدام ركن الأسئلة

جميع الحقوق محفوظة لــ كن مدون 2013-2015 ©