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

الخميس، 28 أغسطس، 2014

الخميس، 28 أغسطس، 2014

شرح انشاء قائمة التبويبات المنسدلة

JQuery Accordion Widget
إضافة مميزة بتنسيق حصري تقوم الإضافة بعمل تبويبات او قوائم منسدلة لكن بتفعيل يدوي عبر الضغط يمكنك عبر تلك القائمة ان تنشئ الكثير من الأشياء قائمة روابط مثلا لمن يحبون عمل أسئلة أو يمكن عمل فهرس لاهم المواضيع او حتى اضافة أدوات تظهر مع الضغط وهذا ما سنراه في المثال الحي التالي
كما لاحظنا في المعاينة هناك روابط وهناك اضافة يمكنك تخصيص الآداة كما تريد والآن لشرح التركيب والتعامل مع الإضافة
هذا هو كود الإضافة يمكنك استخدامه في آداة HTML/JavaScript أو حتى داخل موضوع

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>
<script src='https://cnmu.googlecode.com/svn/trunk/2014/vmenu.js' type='text/javascript'></script>
<style>
.cnmuvrmenu {
  list-style: none outside none;
  margin: 0 auto;
  padding: 0;
  width: 300px;
}
.cnmuvrmenu .button a {
  background: url("https://lh6.googleusercontent.com/-taGhCUDRGUk/U_8HFbwtw7I/AAAAAAAAEko/J_KWIOVPWW0/s16/cnmuarrow.png") no-repeat scroll 4px center #0480d9;
  border-radius: 3px;
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 5px;
  padding: 5px 8px 6px 2px;
}
.cnmuvrmenu .menu li {
  color: #555;
  font-size: 14px;
  list-style: none outside none;
}
.cnmuvmdrop li {
  background: #f1f1f1;
  border: 1px solid #bbb;
  color: #888;
  margin: 5px 0;
  padding: 4px 10px;
  transition: all 0.7s ease 0s;
}
.cnmuvmdrop li:hover {
  background:  #e7f3fc;
  border: 1px solid #7dc2f3;
}
.cnmuvmdrop a {
  color: #000;
  display: inline !important;
}
.cnmuvrmenu a {display: block; text-decoration: none; transition: all 0.7s ease 0s;}
.cnmuvrmenu .menu ul {margin: 0; padding: 0; width: 100%;}
.cnmuvmdrop li a:hover {text-decoration:none;}
.cnmuvmdrop{display:none;}
</style>
<ul class="cnmuvrmenu">
<!--------1-------->
<li class="menu">
<ul>
<li class="button"><a href="#" >القائمة الاولى</a></li>            
<li class="cnmuvmdrop">
<ul>
<li>1. <a href="#">تعديل القائمة الأولى</a></li>
<li>2. <a href="#">تعديل القائمة الأولى</a></li>
<li>3. <a href="#">تعديل القائمة الأولى</a></li>
</ul>
</li>
</ul>
</li>
<!--------2-------->
<li class="
menu">
<ul>
<li class="
button"><a href="#" >القائمة الثانية</a></li>            
<li class="cnmuvmdrop">
<ul>
<li>1. <a href="#">تعديل القائمة الثانية</a></li>
<li>2. <a href="#">تعديل القائمة الثانية</a></li>
<li>3. <a href="#">تعديل القائمة الثانية</a></li>
<li>4. <a href="#">تعديل القائمة الثانية</a></li>
<li>5. <a href="#">تعديل القائمة الثانية</a></li>
</ul>
</li>
</ul>
</li>

</ul>
 الكود المعلم بالأحمر يمكنك ازالته ان كانت لديك مكتبة جي كويري في قالبك
طبعا الكلمات العربية يمكنك تعديلها كما تشاء
ورمز الـ # بجوار كل كلمة هو الرابط أيضاً يمكنك تعديله ما عدا الخاص بالزر الاساسي لكل قائمة وهو المعلم بالأزرق
لعمل قائمة إضافية كل ما عليك فعله هو تكرار الكود الاخضر كاملا
مع مراعاة ان تكرار الكود البني داخل الكود الاخضر معناه رابط زيادة في القائمة
وهذا السطر <!--------2--------> ما هو الا فاصل فقط بين القائمة والاخرى ليسهل التعديل والإضافة
يمكنك تعديل هذا اللون #0480d9 لتغير لون أزرار القائمة
وهذا لتغيير اللون #e7f3fc عند تمرير الماوس على الروابط
وهذا هو لون الإطار #7dc2f3
الرقم 300 هو عرض القائمة يمكنك تعديله
بالنسبة لطريقة اضافة آداة بدلا من الرابط كما في المثال أضفت صندوق الفيس بوك
بدلا من ان تكرر القائمة الخضراء كاملة كرر فقط الكود التالي
<!--------2-------->
<li class="menu">
<ul>
<li class="button"><a href="#" >القائمة الثانية</a></li>            
<li class="cnmuvmdrop">
<ul>
<li>هنا كود الآداة</li>
</ul>
</li>
</ul>
</li>
ملاحظة : بخصوص تأثير الإهتزاز نلاحظ في المعاينة انه عند التنقل بين القوائم يحدث اهتزاز ان لم ترد التأثير بهذا الشكل وتريده انسيابي بدون إهتزاز استبدل الكود الأصفر بالكود التالي
<script src='https://cnmu.googlecode.com/svn/trunk/2014/vmenuno-shake.js' type='text/javascript'></script>
وبهذا انتهى موضوعناً وبالتوفيق

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

  1. شكرا لك اخي عمرو موضوع رائع كالعادة و فعلا القوائم المنسدلة من اجمل القوائم و يمكن وضعها في اي مكان تريده في المدونة مثل الفوتر و السايدبار =r

    ردحذف
    الردود
    1. أسعد دائما بمرورك العطر أخي منير شكراً لذوقك يا غالي

      حذف
  2. شكرا لك اضافة رائعه ممكن اعرف انت لغيت اعلانات ادسنس من مدونتك لية

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

      حذف
    2. فعلا الخدمات فى مصر اصبحت سيئة شكرا يغالى والبلتوفيق لك

      حذف
  3. مساء الخير اخوي
    الله يعطيك العافية على شروحاتك
    عندي استفسار على طاري ادسنس والاعلانات

    اخوي انا مابي اي اعلان ادسنس في مدونتي حذفت كود ادسنس بس باقي لما ادخل اي تدوينة يكون فيها اعلان شلوون احذفها هذي ؟
    ياليت تفيدني y=

    ردحذف
    الردود
    1. مساء النور أخي الكريم
      حياك الله لم اجد في مدونتك اعلان ادسنس في اسفل المدونة لكن اعلان شركة اخرى ان كان هذا ما تقصد ابحث عن الكود التالي في القالب
      <div id="doulike-outer">
      تحته ستجد الكود التالي حدد من اوله
      <center>
      الى ان تصل لهذا الكود
      </center>
      ثمح احذفهم وما بينهم من اكواد لكن قبل فعل هذا خذ نسخة احتياطية من قالبك

      حذف
  4. شكرا من القلب ربي يسعدك انحلت مشكلتي
    موفق يالغلا ♥

    ردحذف
  5. كمان حاب اخذ من خبرتك شوي
    دحين لما انزل صور بدقة عالية بيكون حجمها كبير هل تاثيرها على ثقل المدونة ولا بس تحميل الصفحة
    في ناس تقولي لازم عشان المدونة تكون خفيفة تضغط الصورة قبل لاتنزلها :(
    انا ما ابغى اشوفها ششغلة طويلة
    انت تشوف ضروري ولا عادي ماله دخل بثقل المدونة ☺

    ردحذف
    الردود
    1. طبعا مساحة الصور وحجمها تؤثر في سرعة المدونة فلو الصور ثقيلة هذا سيجعل الزوار أصحاب السرعات الضعيفة لا يقبلون على المدونة
      احرص على امرين اولا أن لا يزيد عرض أو ارتفاع الصورة عن 700 بيكسل أما بالنسبة للجودة أهم شئ أن لا تزيد حجم الصور عن 100 كب
      تخيل لو مدونتك تعرض 10 صور بمساحة 100 كب يعني تقريباً 1 ميجا هذا سيستغرق وقت عند كثير من الناس فحاول ان تكون دائما تحت 100 كب ملحوظة لدينا ركن الاسئلة يمكنك ان تستخدمه في اى قوت لضمان الرد على سؤال ان كان خارج الموضوع وشكراً على مرورك الكريم وتمنياتي لك بالتوفيق =r

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

    ردحذف
    الردود
    1. ربنا يعزك أخي سيد تحياتي لك

      حذف
  7. شكرا لك على لاضافة ممكن فقط طريقة تحكم في طول لاضافة ايعنى اريد ان اقلص من طولها قليللا وشكرا

    ردحذف
    الردود
    1. ماذا تقصد بطول الإضافة ؟ الإضافة طولها يتعلق بما تضيفه فيها يعنيان اضفت الكثير من الاكواد واو الروابط وكانت طويلة فلا يمكن تصغيرها انت عليك تقليل الروابط أو وضح اكثر يا طيب

      حذف
    2. لا انا وضعت فط واحدة و هي الخاصة بالفيس بوك و مكشل انا تخينة بعض الشئ اريد تقليصها من حيت الطول لانك وضعت قيمت العرض 300 و هي جيدة و لكن الطول لم اجد قيمة تبعها

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

      حذف
    4. شكرا لك على التوضيح وفقك الله دائما في الخدمة و لا تحرمنا من مواضيعك لانيقة و المفيدة

      حذف
  8. أخى عمرو أرجوك أرجو مساعدتى
    المشاركات الشائعه عندى ما بتظهر غير تدوينة واحدة فقط ما بعرف ليه
    http://3alam-b.blogspot.com/

    ردحذف
    الردود
    1. اخي الكريم
      تأكد من اعدادات آداة المشاركات الشائعة وان العدد فيها أكثر من 1
      ان لم ينفع
      جرب قالب آخر ربما المشكلة في القالب
      ان لم ينفع جرب استخدام فاصل اقرأ لمزيد اليدوي في تدويناتك ربما يكون هناك ضغط من مساحات المواضيع
      راجع هذا الموضوع للتعريف بفاصل اقرأ المزيد
      http://cnmu.blogspot.com/2013/01/Read-More.html

      حذف
  9. أخى عمرو الكريم قمت بأنشاء مدونتى
    ولكن أنا أريد أستعمال دومين مجانى ml.
    هل له أضرار على المدونة وهل تنصحنى به ياريت تفيدنى

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

      حذف
  10. السلام عليكم موضوع رائع و احترافي جدا أخي لو سمحت اريد رايك بمدونتي + نصائح لتطويرها و هي مختصة في كل الاشياء المجانية
    http://majaniyate-net.blogspot.com/

    ردحذف
    الردود
    1. وعليكم السلام ورحمة الله وبركاته
      المدونة جيده أخي لكن القالب تعريبه غير مضبوط
      جرب القالب التالي هو مشابه له في الفكرة
      http://cnmu.blogspot.com/2014/08/Dynamic-Mag.html

      حذف
  11. شكرا اخي على لكن اريد قائمة بالعرض وليس بالطول من فضلك

    ردحذف
    الردود
    1. راجع هذا الموضوع أخي
      http://cnmu.blogspot.com/2014/05/Create-Multi-Tabbed-Widget.html

      حذف
  12. لا تتصور أخي كم كنت أحتاجها ولم يكن في علمي أنه توجد متل هته الآدات ماشاء الله عليك شكرا لك ولقد تم تركيب الأداة على مدونتي وأطلب رأيك في المدونة وشكرا لك أخي الكريم جزيل الشكر

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

      حذف
  13. جميل جدا عليا الطلاق انتا اجدع من ابويا g=

    ردحذف
    الردود
    1. =d ربنا يحفظك أخي ويبارك في والدك

      حذف
  14. لو سمحت انا عاوزه اعمل قائمة افقية باعلى المدونة وقائمة افقية اخرى باالاسفل ....البلوجر لاتقبل ذلك سواء استخدمت قوائم خارجيه او اضافة الصفحات ولو قبلت يحث تعارض حيث لا استطيع عمل تنسيق مختلف لكل فائمه هل من طريقه ؟؟؟
    http://ssk-arabic.blogspot.com/

    ردحذف
    الردود
    1. الطريقة ستكون بإعادة رفع الملفات وتعديل المعرفات امر مرهق
      ممكن لو الهدف قوائم منسدلة افقية استخدام قالب به قوائم لكنها عادة تكون اسفل بعضها مثال
      http://cnmu.blogspot.com/2013/03/Revolution-Lifestyle.html
      غير ذلك يحتاج الأمر متخصص لعمل تعديلات على القالب بشكل يدوي

      حذف
    2. شكرا على اهتمامك وردك ...جزاك الله كل خير

      حذف
  15. مشكور اخي العزيز بس ممكن طريقة عمل معاينة مثلك او صفحة فارغة في مدونتي

    ردحذف
    الردود
    1. راجع هذا الموضوع أخي الكريم
      http://cnmu.blogspot.com/2013/02/Redirection-for-Demo-and-Download.html

      حذف
  16. اضافة رائعة اخي الكريم من فضلك هل تستطيع اعطائي هذه الاضافة باللغة الانجليزية من فضلك

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

      حذف
  17. بارك الله فيك أخي أريد فقط نزع السهمين في عنوان الاداة مثال ( القائمة الأولى ثم نجد سهمين)، أرجو أم تفيدني.

    ردحذف
    الردود
    1. وفيك بارك الله أخي الكريم
      احذف هذا الجزء سيختفي السهم
      url("https://lh6.googleusercontent.com/-taGhCUDRGUk/U_8HFbwtw7I/AAAAAAAAEko/J_KWIOVPWW0/s16/cnmuarrow.png") no-repeat scroll 4px center

      حذف
  18. بارك الله فيك، ألف شكر أخي الكريم ان اشاء الله مزيد من التألق.

    ردحذف
  19. يعطيك العافية على هذه الاضافة الجميلة جدا واستفدت منها الحمد لله لكن اخي هناك مشكلة لماذا تظهر القائمة عندي بهذا الشكل
    http://www13.0zz0.com/2015/09/22/16/813097282.png
    لماذا لا تأتي كلها على نفس العرض ؟
    وشكرا مقدما

    ردحذف
    الردود
    1. ربما يكون لديك تداخل مع نفس الكلاسات انا عدلت في المظهر جرب نسخ الجزء من اول كلمة
      استبدل في الكود الذي لديك
      هذا
      .button a
      بهذا
      .cnmuvrmenu .button a {
      وهذا
      .menu li
      بهذا
      .cnmuvrmenu .menu li
      وهذا
      .menu ul
      بهذا
      .cnmuvrmenu .menu ul
      وان شاء الله تنضبط

      حذف
    2. لم ينجح الامر للاسف .. بل ايضا للاسف اختفت لم تعد تظهر ما بعد القائمة الثانية ..
      شكرا لك اخي الكريم على اهتمامك للرد رغم ان الموضوع من سنة .. انت اول مدون تجيب على سؤال اساله .
      جزاك الله الف خير

      حذف
    3. جزاك الله بالمثل يا طيب كتجربة اخيرة جرب التالي
      استبدل هذه الاكواد

      margin: 0 auto;
      padding: 0;

      بهذه

      margin: 0 auto !important;
      padding: 0 !important;

      حذف
    4. للأسف أيضا لم تظبط اشكر لك اهتمامك اخي الكريم وشكرا جزيل لك :) امتنى لك التوفيق

      حذف
    5. اخي الكريم لقد قمت بحل المشكلة عن طريق حذف اخر سطر في الكود
      لم استطع ان اكتبه لانه لا يمكنني التعليق به هنا
      هذا الكود ( </ul> )

      حذف
  20. بارك الله فيك
    مدونتك رائعة
    وسوف أعمل هذه الاضافة في موقعي ان شاء الله

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

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

      حذف
  22. هي في العمود الجانية لكن لا تستطيع اجابتي كيف أن هذا الطلب من الدعم الفني وشكرا لك
    هذه مدونتي http://www.salmimath.com/ وأنا أستعمل قالب الخاص

    ردحذف
    الردود
    1. أخي الكريممن يستعمل اى قالب من قوالبي يظل لو اراد شيئاً خاصه يدخل ضمن امور الدعم الفني فهو شئ يطلبه خاص له وليس امر عام في القالب لكن ايضاً من مميزات استخدام قوالبي ان بعض امور الدعم الفني بها تصبح امور عادية نظراً لمعرفتي بالتصميم بعد الإطلاع على المشكله هذا هو حلها ابحث عن هذا الكود
      @media screen and (max-width : 960px) {
      واضف بعده الكود التالي و بإذن الله تعمل لديك
      .cnmuvrmenu li {display: block;}

      حذف
  23. شكرا لك كثيييرا أخي بارك الله فيك تم حل المشكل

    ردحذف
  24. شكرا لاكن أخي هي الاداة الوحيدة التي تضهر فيها الكتابة على اليسار
    le tsxte alingier a gouche

    ردحذف
    الردود
    1. ربما يكون لديك كود في ستايل قالبك سبب المشكلة جرب التالي
      بعد هذا الكود
      padding: 5px 8px 6px 2px;
      أضف التالي
      text-align: right !important;

      حذف

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

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