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

الاثنين، 9 ديسمبر، 2013

الاثنين، 9 ديسمبر، 2013

قائمة منسدلة خفيفة فقط CSS

CSS Drop Down Menu
القوائم المنسدلة من الإضافات الهامه في المدونات خصوصا التي تحتوي الكثير من الاقسام فهي تغني عن مساحات تذهب هدراً في القالب وهناك عدة أنواع من تلك الإضافة منها ما يعمل بتقنية جي كويري Jquery ومنها ما يعمل باكواد CSS فقط , ماالفرق بينهما ؟ الفرق ان التي تعمل بتقنية جي كويري اكثر تطورا لكنها أثقل  أما الـ CSS فهي خفيفة للغاية وسهلة التعامل وانا أفضلها جداً ولهذا قمت بإنشاء هذه الإضافة وراعيت أن تكون سهلة التركيب و التنسيق للجميع لكي يتحكم بها كل مستخدم كما يريد


بالنسبة لطريقة التركيب فقط أضف الكود التالي في آداة HTML/JavaScrupt

<style type="text/css">
#cnmudrdown{
  width:100%;
  height:40px;
  display:block;
  padding:0;
  margin:0 0 22px 0;
background:#222222;
}
#cnmudmenu,#drop{
    list-style:none;
    direction:rtl;
    padding:0;
    margin:0;
    }
#cnmudmenu li {
    float:right;
}
#cnmudmenu li a {
    display:block;
    padding:11px 15px;
    color:#fff;
    text-decoration:none;
    font:15px Tahoma, Geneva, sans-serif;
    font-weight:bold;
}
#cnmudmenu li a:hover {
    background:#ccc;
    color:#000;
    transition:all .7s ease 0s;
}
#drop {
    position:absolute;
    display:none;
    list-style:none;
z-index:60;
}
#drop li {
    float:none;
}
#drop li a {
background:#000;
border-bottom:1px solid #bbb;
padding:5px 10px;
width:150px;
}
   
#sub:hover #drop {
    display:block;
}
#drop2:hover #cnmudmenu3 {
    display:block;
}
#cnmudmenu3 {
    position:absolute;
    display:none;
    margin-right:131px;
    margin-top:-28px;
    }
#cnmudmenu3 li{
    list-style:none;
    margin-left:100px;
}
#cnmudmenu3 li a {
width:150px;
}
</style>

<div id='cnmudrdown'>
<ul id="cnmudmenu">
<li> <a href="#">العنصر الأول</a></li>
<li id="sub"> <a href="#">العنصر الثاني</a>
<ul id="drop">
<li> <a href="#">رابط فرعي 1 </a></li>
<li> <a href="#">رابط فرعي 2 </a></li>
<li id="drop2"> <a href="#">رابط فرعي 3 </a>
<ul id="cnmudmenu3">
<li> <a href="#">ثانوي 1</a></li>
<li> <a href="#">ثانوي 2</a></li>
<li> <a href="#">ثانوي 3</a></li>
</ul>
</li>

<li> <a href="#">رابط فرعي 4 </a></li>
<li> <a href="#">رابط فرعي 5 </a></li>
</ul>
</li>

<li> <a href="#">العنصر الثالث</a></li>
<li> <a href="#">العنصر الرابع</a></li>
</ul>
</div>

والآن مع شرح التنسيق


هذا #222222 هو لون الخلفية الاساسية للقائمة غيره بما يعجبك أو استبدله بـ transparent إن أردت عدم وجود خلفية
هذا #fff  هو لون الخط
أما الرقم 15هو حجم الخط
هذا #ccc هو لون الخلفية عند تمرير الماوس
وهذا #000 هو لون الخط عند تمرير الماوس
هذا #000 هو لون خلفية القائمة المنسدلة
 وهذا #bbb هو لون الفاصل بين كل سطر

وهذا هو شرح إضافة روابط أو قوائم جديدة


كرر السطر الأحمر في حالة الرغبة في إضافة عنصر جديد
الجزء الأزرق كاملأ هو إضافة قائمة منسدلة بداخلها قائما منسدلة أخرى كما هو موجود في المعاينة
الجزء الأخضر هو القائمة المنسدلة الفرعية يمكنك ازالتها أو تكرارها ان أردت زيادة
قليل من التركيز في الأكواد ستنجح في تنسيقها كما تريد
وطبعا تغير إسم كل رابط كما تريد وبالنسبة لرمز الـ # إستبدله بالرابط المراد فتحه عند الضغط على العنصر
وبالتوفيق

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

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

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

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

      حذف
    3. الحقيقة يا طيب لا أعلم السبب
      انظر لقد أضفتها في آداة أخرى ستجدها في أسفل هذا القالب وكما ترى هي تعمل
      http://test-cnmu.blogspot.com
      طيب جرب إضافتها في آداة جديدة في السايد بار مثلا ثم بعد ذلك اسحبها للمكان العلوي

      حذف
  2. السلام عليكم ورحمة الله وبركاته اخي الكريم
    موضوع جميل من اخ اروع
    لاكن اخي انا زعلان منك لانك حذفت الصفحة الثابتة التي هيا انا لست ارهابي اخي الكريم قم بارجعها للجميع يعرف ما هي الحقيقة

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

      حذف
  3. السلام عليكم ورحمة الله وبركاته
    للأسف أخي الغالي عمرو لم يتم معي جربت بكل الطرق الممكنة في السايد بار والفوتر والهيدر
    لايقبل الحفظ اعتقد المشكلة من القالب لاني جربت الكود الخاص بالقالب Infrared الي انت معربه
    وقبل حفظ الكود لكن لم استطع تنسيقه مثل هذا الكود وبحثت في جوجل عن القوائم المنسدلة فوجدت بعضها يتطلب
    اضافة كود داخل القالب وبعد ذالك يضيف الكود في اداة الجافا فهل من الممكن ان مشكلتي تحتاج كود
    يضاف في القالب ليقبل هذا الكود ؟ أسف أخي الغالي عمرو أشغلتك معي جزاك الله كل خير

    ردحذف
    الردود
    1. أخي فكرة اضافة كود في القالب تتماشى مع هذه الآداة فهناك طريقتين للتركيب الاولى وهي المذكورة في الموضوع وهي الأسهل الثانية ان تركبها داخل القالب
      وهي ان تضيف الجزء الأول من الآداة وهو الموجود بين هاذين الوسمين
      <style type="text/css">
      </style>
      الموجود بينهما فقط بدون الوسمين يتم اضافتهم فوق الوسم
      ]]></b:skin>
      ثم الجزء الباقي وهو الخاص بالروابط بتم اضافته في الجزء المراد إضافته به في القالب
      مشكلة هذه الطريقة أنه أنه لا يمكن تحديد جزء معين لأخبر المستخدمين أين يضيفونه لانه يختلف من قالب لآخر لذا جرب التالي وهو أن تضيف ما بين الوسمين فوق الوسم السابق كما أخبرتك
      ثم الجزء الباقي أضفه بمفرده في آداة html/javascript وانظر هل يعمل ام لا
      وبالتوفيق يا طيب

      حذف
    2. السلام عليكم ورحمة وبركاته
      الله يجزاك خير أخي الغالي عمرو لقد أشغلتك في هذه المشكلة وآسف على ذلك بالنسبة للقائمة جربت كل الطرق المذكورة
      ولكن للاسف لم تكن المشكلة الا من المتصفح لاني جربت حفظ الكود على Google Chrome و Firefox دون جدوى
      لكن والحمد لله قبل حفظ الإضافة على متصفح Internet Explorer وتم تركيب القائمة الف الف شكر لك
      لكن بقيت لدي مشكلة وهي عند الضغط على تبويبة برامج تلفزيونية تظهر القائمة المنسدلة تحت السلايدر شو
      وهذا رابط المعاينة http://fearallah1.blogspot.com/ أسف جدا أخي العزيز تعبتك معي سامحني وجزاك الله خير

      حذف
    3. وعليكم السلام ورحمة الله وبركاته
      طيب الحمد لله انه قبل وبالنسبة للمتصفح قم بحذف المتصفحات بشكل جيد وأعد تشغيل الجهاز وأعد تثبيت الإصدارات الجديدة وستعمل جيداً بالنسبة لما ذكرته قمت بعمل تعديل على لكود ليظهر اعلى السلايدر
      قم بإعادة تركيبه وسيكون أعلى السلايد أما بالنسبة للتشوه الموجود في الكود هو بسبب أن لديك سابقاص في القالب إعدادت للقائمة السابقة وهذا يؤثر على الجديدة كل ما عليك فعله
      هو البحث عن أكواد تحمل هذا المعرف
      #menu-bottom
      وتحذفها ملحوظة ستجد بعد هذا الكود رموز وستجد كل مجموعة تبدأ بقوس كهذا { ثم أكواد ثم تغلق برمز كهذا
      } مثال
      #menu-bottom li {
      padding:12px 15px 6px
      }

      كل ما عليك أن تبحث عنها وتحذفها فقط التي تحمل الرمز # قبلها لانه هناك menu-bottom بدون هذا الرمز لا تحذفها المهم خذ نسخة احتياطية من القالب وسيعمل بإذن الله وبالتوفيق

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

    ردحذف
    الردود
    1. الحمد لله يا طيب وكضبط أكثر قم بتقليل الرقم 11 في اكود التالي الى الرقم 8 وستكون أفضل
      padding:11px 15px;
      ولاحظت أيضا ان البحث لديك غير مضبوط مكانه
      يمكنك ضبطه بالطريقة التالية ابحث عن هذا الكود #menu-top
      بعده ستجد width:900 اجعله 650
      ثم ابحث عن هذا #search تحته ستجد التالي -199px 0 0 20px
      استبدل -199 بـ -246
      وموفق يا طيب تحياتي

      حذف
    2. الله يجزاك خير أخي الغالي عمرو ويوفقك لما يحبه ويرضاه
      سلمت يداك دمت في حفظ الله ورعايته

      حذف
  5. رايع اخى جدا
    اريد لو سمحت اكواد زر المعاينة فى الموضوع اعلاه

    ردحذف
    الردود
    1. تفضل أخي راجع هذا الموضوع
      http://cnmu.blogspot.com/2013/04/Create-CSS-Buttons.html

      حذف
  6. السلام عليكم ورحمة الله وبركاته
    أخي ركبت الاضافة على مدونتي هذه: http://tampletetagrebe.blogspot.com/
    العناصر تعمل ولكن القائمة المنسدلة لا تعمل ما السبب مع أن قالب مدونتي هو نفسه قالب مدونتك

    ردحذف
    الردود
    1. إنها كذلك لا تتعمل !

      حذف
    2. وعليكم السلام ورحمة الله وبركاته ابحث عن هذا الجزء في القالب واحذفه لكي تعمل القائمة المنسدلة
      #top-menu li a {
      float:right;
      color:#222;
      font-weight:bold;
      list-style-type:none;
      font-size:18px;
      text-shadow:0px 0px 1px #F9F9F9;
      padding:10px;
      }

      #top-menu li.selected a {
      text-decoration:none;
      color:#8A0808;
      font-weight:400;
      padding:10px;
      text-shadow:0px 0px 1px #F9F9F9;
      }

      #top-menu a:hover {
      color:#8A0808;
      text-shadow:0px 0px 1px #F9F9F9;
      font-weight:bold;
      opacity:0.8;
      filter:alpha(opacity=80);
      -moz-opacity:0.80;
      -khtml-opacity:0.8
      }

      #top-menu ul {
      position:relative;
      overflow:hidden;
      font-weight:bold;
      font-size:18px;
      padding-right:0;
      margin:0
      }

      #top-menu ul li {
      display:inline;
      list-style-type:none
      }

      #top-menu li {
      text-decoration:none;
      margin-left:2px
      }

      #menu ul li a,#menu li.selected,#top-menu ul li a,#top-menu li.selected {
      text-decoration:none
      }

      حذف
    3. ألف شكر لك أخي وجزاك الله الف الف خير على ردك السريع

      حذف
    4. الشكر لله أخي الكريم وبالتوفيق

      حذف
  7. السلام عليكم

    جزاك الله كل خير على الشرح الرائع

    لقد قمت بتطبيق الشرح وكانت النتيجة كالاتى

    الشريط الثانى
    http://testd12345.blogspot.com/

    (الشريط الاول الوضع الافتراضى للمدونة)

    يرجى فتح الرابط علي متصفحى كروم وفايرفكس لكن الشكل مختلف

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

    و فى المتصفحين يظهر الشريط القانى غير مكتمل بيه هوامش....اريد ان يكون الشريط الثانى مثل الشريط الاول (الوضح الافتراضى للمدونة )

    الكود المستخدم

    http://testd12345.blogspot.com/2014/04/blog-post.html

    ارجو افادتنى .....اسفه على الاطالة

    شكرا


    ردحذف
    الردود
    1. وعليكم السلام ورحمة الله وبركاته
      وجزاكم الله بالمثل أختي الفاضلو بالنسبة لعدم التنسيق لديك السبب هو القالب فهو يحتوي تنسيقات بالفعل وهي تتعارض مع بعضها
      ما يمكن ضبطه بالنسبة للمشكلتين هي انتظام شكل الرئيسية والروابط بحذف هذا الجزء من الكود
      font:15px Tahoma, Geneva, sans-serif;
      اما الباقي يجب عمل حذف للستايل في القالب وهذا طبعا قد يسبب مشكلة خرى في مظهر القائمة العلوية لذلك نصيحتي لك ستكون بتغيير القالب
      هذا احد القوالب المميزة ومدمج به القائمة
      http://cnmu.blogspot.com/2013/12/zylyz-blogger-template.html
      او هذا فهو يحتوي عدة قوائم
      http://cnmu.blogspot.com/2013/03/Revolution-Lifestyle.html
      وبالتوفيق

      حذف
    2. اشكرك على سرعة الرد

      قمت بحذف الكود ولقد انتظمة كلمة الرئيسية ....لقد تم حل المشكلة الاولى

      المشكلة الثانية هى وجود هوامش
      الشريط الاول بالربط سوف اقوم بحذف انا تركته فقط لانى اريد ان اوضح لحضرتك رغيتى باننى اريد ان يكون مظهر الشريط الثانى المطبق عليه الكود مثل الشريط الاول الافتراضى

      بالنسبة للقالب انا لا اريد استخدام قالب من الخارج انا استخدمت قالب المدونة الافتراضي (بسيط) وقمت بعمل تغيرات عليها

      المشكلة الثالثة

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

      http://testd12345.blogspot.com/2014/04/blog-post_1.html

      والكود المستخدم بعد عمل تعديلات تناسب المدونة

      http://testd12345.blogspot.com/2014/04/blog-post.html

      هل يوجد مشكلة بتطبيق الكود ؟؟؟

      اعتذر مرة اخرى ع الازعاج ....ارجو مساعدتى

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

      فقط ابحثي عن جزء مشابه لهذا في القالب
      .tabs .widget ul, .tabs .widget ul {
      list-style: none outside none;
      margin: 0;
      overflow: hidden;
      padding: 0;
      }
      ثم احذفي منه هذا الجزء
      overflow: hidden;

      وايضاً ابحثي عن هذا الجزء
      .tabs-inner .widget ul {
      background: url("//www.blogblog.com/1kt/simple/gradients_light.png") repeat-x scroll 0 -800px #5198D8;
      border-bottom: 1px solid #FFFFFF;
      margin-left: -30px;
      margin-right: -30px;
      margin-top: 0;
      }

      واحذفي منه هذا
      background: url("//www.blogblog.com/1kt/simple/gradients_light.png") repeat-x scroll 0 -800px #5198D8;

      حذف
    4. ثم في اكواد الإضافة
      استبدلي هذا الكود
      #cnmudrdown{
      width:100%;
      height:15px;
      display:block;
      padding:0;
      margin:0 0 22px 0;
      background:#5198d8;
      }

      بهذا
      #cnmudrdown {
      background: url("//www.blogblog.com/1kt/simple/gradients_light.png") repeat-x scroll 0 -800px #5198D8;
      display: block;
      height: 40px;
      margin: 0 0 22px;
      padding: 0;
      width: 100%;
      }

      وهذا الكود
      #cnmudmenu3 {
      position:absolute;
      display:none;
      margin-right:131px;
      margin-top:-28px;
      }
      بهذا
      #cnmudmenu3 {
      display: none;
      margin-right: 170px;
      margin-top: -28px;
      position: absolute;
      }

      حذف
    5. السلام عليكم

      اشكرك يا اخى ع حسن الرد و المساعده

      عفوا لقد ارهقتك باسئلتى

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

      ولكن ظهرت مشكلة اخرى ربما عيب فى تطبيق ما ذكرته حضرتك

      حيث ان القوائم الثانوية تظهر تحت القوائم الفرعية واصبحت القائمة طويلة جدا حتى انني استخدم السكرول بار حتى اتمكن من رؤية بقية التصنيفات

      بالاضافة الى ان الكلام غير واضح

      اتمنى ان تكون القوائم الثانوية ( بها اسماء الدول ) منبثقة اتجاه الشمال بدل من اسفل القوائم الفرعية (جامعات/مدارس لغة)


      يرجى التفضل بالزيارة هذا الرابط حتى يتضح لحضرتك ما احاول شرحه

      http://testd12345.blogspot.com/2014/04/blog-post_4395.html

      الكود المستخدم بعد التعديل

      http://testd12345.blogspot.com/2014/04/blog-post_9368.html

      هكذا يبقه مشكلة اخيرة (ارجو تكون الاخيرة) هى الهوامش التى بشريط القوائم
      الصورة التى توضح ما اريد شرحه فى هذا الرابط
      http://testd12345.blogspot.com/2014/04/blog-post_4375.html


      شكرا مرة اخرى

      جزاك الله كل خير


      حذف
    6. أختي الكريمة جربي استخدام هذا الكود كما هو وانظري ان كان مضبوطاً اعيدي التعديل على الأقسام
      <style type="text/css">
      #cnmudrdown {
      background: url("//www.blogblog.com/1kt/simple/gradients_light.png") repeat-x scroll 0 -800px #5198D8;
      display: block;
      height: 40px;
      margin: 0 0 22px;
      padding: 0;
      width: 100%;
      }
      #cnmudmenu,#drop{
      list-style:none;
      direction:rtl;
      padding:0;
      margin:0;
      }
      #cnmudmenu li {
      float:right;
      }
      #cnmudmenu li a {
      display:block;
      padding:11px 15px;
      color:#fff;
      text-decoration:none;
      font-weight:bold;
      }
      #cnmudmenu li a:hover {
      background:#ccc;
      color:#000;
      transition:all .7s ease 0s;
      }
      #drop {
      position:absolute;
      display:none;
      list-style:none;
      z-index:60;
      }
      #drop li {
      float:none;
      }
      #drop li a {
      background:#000;
      border-bottom:1px solid #bbb;
      padding:5px 10px;
      width:150px;
      }

      #sub:hover #drop {
      display:block;
      }
      #drop2:hover #cnmudmenu3 {
      display:block;
      }
      #cnmudmenu3 {
      display: none;
      margin-right: 170px;
      margin-top: -28px;
      position: absolute;
      }
      #cnmudmenu3 li{
      list-style:none;
      margin-left:100px;
      }
      #cnmudmenu3 li a {
      width:150px;
      }
      </style>

      <div id='cnmudrdown'>
      <ul id="cnmudmenu">
      <li> <a href="#">العنصر الأول</a></li>
      <li id="sub"> <a href="#">العنصر الثاني</a>
      <ul id="drop">
      <li> <a href="#">رابط فرعي 1 </a></li>
      <li> <a href="#">رابط فرعي 2 </a></li>
      <li id="drop2"> <a href="#">رابط فرعي 3 </a>
      <ul id="cnmudmenu3">
      <li> <a href="#">ثانوي 1</a></li>
      <li> <a href="#">ثانوي 2</a></li>
      <li> <a href="#">ثانوي 3</a></li>
      </ul>
      </li>
      <li> <a href="#">رابط فرعي 4 </a></li>
      <li> <a href="#">رابط فرعي 5 </a></li>
      </ul>
      </li>
      <li> <a href="#">العنصر الثالث</a></li>
      <li> <a href="#">العنصر الرابع</a></li>
      </ul>
      </div>

      حذف
    7. شكرا على اهتمام حضرتك و ردك

      لقد تم بالفعل العمل الكود الذى تفضل حضرتك وضعه و اضافة الاقسام ولكن عند وضع الشريط بالاعلى (الشريط بالاعلى هو المطلوب) لايتظهر الروابط او القوائم الثانوية

      وعند وضعه بالعمود اليمين تظهر القوائم الثانوية

      http://testd12345.blogspot.com/


      هكذا يبقه مشكلة اخيرة (ارجو تكون الاخيرة) هى الهوامش (ضرورى) التى بشريط القوائم
      الصورة التى توضح ما اريد شرحه فى هذا الرابط
      http://testd12345.blogspot.com/2014/04/blog-post_4375.html




      حذف
    8. أختي الفاضلة بالنسبة لظهور الروابط الثانوية أخبرتك في تعليق سابق
      ان تجدي كود يشبه التالي في القالب
      .tabs .widget ul, .tabs .widget ul {
      list-style: none outside none;
      margin: 0;
      overflow: hidden;
      padding: 0;
      }
      وتحذفي منه هذا السطر
      overflow: hidden;
      هذا هو ما يسبب اخفاء الروابط الثانوية
      أما بالنسبة لمسالة الهوامش هذا يعود لتصميم القالب نفسه وليس للإضافة
      والإختلاف بين الإضافة السابقة والحالية هو امر طبيعي مع القالب فالإضافة الأولى هي جزء ن تصيمه اما هذه هي اضافة خارجية

      حذف
    9. شكرا على الاهتمام والرد

      لقد تم حذف سطر
      overflow: hidden;
      من قبل لما حضرتك ذكرت اول مره ومازلت المشكلة قائمة

      شكرا لحضرتك واعتذر منك لاننى ارهقتك باسئلتى


      حذف
    10. لا عليك اختي الفاضلة بالنسةب لحذف ما يزال الكود ظاهراً لدي فيا لستايل ربما انك حذفت كود مختلف
      يجب ان يكون الموجود تحت هذا الجزء
      .tabs .widget ul, .tabs .widget ul {
      لان قد يكون هناك اكثر من كود لكن عموما جربي اضافة الكود التالي فوق الوسم ]]></b:skin>
      .tabs .widget ul, .tabs .widget ul {
      overflow: visible !important;
      }

      حذف
    11. شكرا لك مشكلة القوائم الثانوية اتحلت خلاص

      بس ظهرت مشكلة جديده غريبه لا اعلم ماذا يحدث بالمدونة
      وجود مربع بلون الخلفية بجانب القوائم الثانوية
      المشكلة موجوده بهذا الرابط ( الصورة)
      http://testd12345.blogspot.com/2014/04/blog-post_2.html

      هذا رابط المدونة التى اعمل عليها والتى ظهرت بها المشكلة
      http://doxsonengland.blogspot.com/#

      حذف
    12. هذا ايضاً اختي ما نوهت عن تعديله عندما قلت
      ابحثي عن هذا الجزء
      .tabs-inner .widget ul {
      background: url("//www.blogblog.com/1kt/simple/gradients_light.png") repeat-x scroll 0 -800px #5198D8;
      border-bottom: 1px solid #FFFFFF;
      margin-left: -30px;
      margin-right: -30px;
      margin-top: 0;
      }

      واحذفي منه هذا
      background: url("//www.blogblog.com/1kt/simple/gradients_light.png") repeat-x scroll 0 -800px #5198D8;

      عموما جربي ان تفعلي ما نوهت عنه ان لم ينفع اضيفي هذا الكود فوق ]]></b:skin>
      .tabs-inner .widget ul {
      background: none repeat scroll 0 0 rgba(0, 0, 0, 0) !important;
      }

      حذف
    13. شكراااااااااااااااااااااااااااااااااااااااااااااااااااااااااااااااااااااااااااا

      لقد تم حل جميع المشاكل التى تم السؤال عنها والقائمة اكثر من رائعه

      جزاك الله كل خير

      حذف
    14. وجزاكم الله بالمثل أختي الكريمة وتحت أمرك في اى وقت

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

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

      حذف
  9. هل من الممكن قائمة منسدلة تصلح لمدونة باللغة الانجليزية ؟؟؟

    ردحذف
  10. شكرا

    لحضرتك غيرت اتجاه القائمة الى الشمال

    بعتذر عن الازعاج

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

      حذف
  11. السلام عليكم

    القائمة المنسديلة من العنصر Training
    Managerial Courses
    Financial courses
    Petroleum Courses
    Distance Learning-English language
    اريد ان يكونوا اتجاه الشمال حتى تكون القائمة متسقة لقد عدلت الكود الى left
    ولم تتسق بعد

    واليك رابط مدونتى
    http://ssk-acadmey.blogspot.com/

    ردحذف
    الردود
    1. بعتذر لان الرابط خطا الرابط الصحيح هو

      http://ssk-english.blogspot.com/

      حذف
    2. ابحثي عن هذا الجزء في اكواد القائمة أختي
      #drop li a
      بعده ستجدين قوس فتح كهذا {
      بعد القوس اضيفي هذا الكود
      text-align: left !important;
      وبإذن الله تظهر جيداً

      حذف
    3. شكرا على الرد

      انا طبقت الكلام اللى حضرتك كتبتها وفعلا الكلام انتظم على الشمال

      بس معلشى انا هتعبك انا عاوزه يكون القائمه المنسدلة على اليمين

      الشكل الحالى

      http://im64.gulfup.com/TjoXny.jpg

      الشكل المطلوب

      http://im64.gulfup.com/DNC5fo.png

      رابط مدونتى

      http://ssk-english.blogspot.com/

      حذف
    4. اسفل هذا الكود #cnmudmenu, #drop
      ستجدين هذه الحروف
      rtl
      استبدليها بـ
      ltr

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

    ردحذف
    الردود
    1. وعليكم السلام ورحمة الله وبركاته
      هل تقصد انك تريد اضافة الآداة كجزء من القالب ؟ ان كان هذا قصدك أضف جميع الاكواد الموجودة بين هاذين الكودين
      <style type="text/css">
      </style>
      فوق الوسم ]]></b:skin>
      وباقي الأكواد اضفها فيا لمكان المناسب لك في القالب

      حذف
  13. أخي الكريم ،
    شكرا على هذه المعلومة القيمة ، أنا طبقتها في مدونتي و تمت بنجاح .
    لكن في عدد الأقسام هناك فقط 6 ( الرئيسية ، أطباق رئيسية .... ) و أنا أريد إضافة المزيد فهل من حل ؟؟؟؟!!!
    هذه مدونتي http://akil-laila.blogspot.com/
    أرجوا منك الرد و شكرا لك أخي.

    ردحذف
    الردود
    1. تفضلي أخي الكود التالي تم اضافة ثلاث قوائم اضافية استبدليه بالجزء الذي عندك وملحوظة ستجدين عندك هذا الكود width: 80%; اجعليه 100%
      <div id="cnmudrdown">
      <ul id="cnmudmenu">
      <li> <a href="http://akil-laila.blogspot.com/">الرئيسية</a></li>
      <li id="sub"> <a href="#">الأطباق الرئيسية</a>
      <ul id="drop">
      <li> <a href="http://akil-laila.blogspot.com/p/blog-page_5227.html">اللحوم </a></li>
      <li> <a href="http://akil-laila.blogspot.com/p/blog-page_21.html">الدواجن</a></li>
      <li> <a href="http://akil-laila.blogspot.com/p/blog-page_1616.html">بحريات</a></li>

      </ul>
      </li><li id="sub"> <a href="#">كيك و حلويات</a>
      <ul id="drop">
      <li> <a href="http://akil-laila.blogspot.com/p/blog-page_1893.html">حلويات عالمية</a></li>
      <li> <a href="http://akil-laila.blogspot.com/p/blog-page_3923.html">حلويات مغربية</a></li>
      <li> <a href="http://akil-laila.blogspot.com/p/blog-page_8980.html">حلويات شرقية</a></li>
      <li> <a href="http://akil-laila.blogspot.com/p/blog-page_30.html">مخبوزات</a></li>
      <li> <a href="http://akil-laila.blogspot.com/p/blog-page_4509.html">فُرنِيات</a></li>

      </ul>
      </li><li id="sub"> <a href="#">سلطات و محليات</a>
      <ul id="drop">
      <li> <a href="http://akil-laila.blogspot.com/p/salades.html">سلطات أرز و مكرونات و خضروات</a></li>
      <li> <a href="http://akil-laila.blogspot.com/p/desserts.html">سلطات فواكه و محليات</a></li>

      </ul>
      </li><li id="sub"> <a href="#">أطباق جانبية</a>
      <ul id="drop">
      <li> <a href="http://akil-laila.blogspot.com/p/blog-page_6383.html">بيتزا و مملحات</a></li>
      <li> <a href="http://akil-laila.blogspot.com/p/blog-page_13.html">كيش و ڭرتان</a></li>
      <li> <a href="http://akil-laila.blogspot.com/p/blog-page_3040.html">أرز و مكرونات</a></li>
      <li> <a href="http://akil-laila.blogspot.com/p/blog-page_5342.html">خضروات</a></li>
      </ul>
      <li id="sub"> <a href="#">شوربات</a>
      <ul id="drop">
      <li> <a href="#">رابط فرعي 1 </a></li>
      <li> <a href="#">رابط فرعي 2 </a></li>
      <li> <a href="#">رابط فرعي 3 </a></li>
      <li> <a href="#">رابط فرعي 4 </a></li>
      <li> <a href="#">رابط فرعي 5 </a></li>
      </ul>
      </li>
      <li id="sub"> <a href="#">العنصر الثاني</a>
      <ul id="drop">
      <li> <a href="#">رابط فرعي 1 </a></li>
      <li> <a href="#">رابط فرعي 2 </a></li>
      <li> <a href="#">رابط فرعي 3 </a></li>
      <li> <a href="#">رابط فرعي 4 </a></li>
      <li> <a href="#">رابط فرعي 5 </a></li>
      </ul>
      </li>
      <li id="sub"> <a href="#">العنصر الثاني</a>
      <ul id="drop">
      <li> <a href="#">رابط فرعي 1 </a></li>
      <li> <a href="#">رابط فرعي 2 </a></li>
      <li> <a href="#">رابط فرعي 3 </a></li>
      <li> <a href="#">رابط فرعي 4 </a></li>
      <li> <a href="#">رابط فرعي 5 </a></li>
      </ul>
      </li>
      </ul>
      </li>
      </div>


      حذف
    2. لك جزيل الشكر أخي على ردك السريع؛ تمت بنجاج ، بالتوفيق و النجاح و الإستمرارية.

      حذف
    3. تحت امرك أختي في اى وقت وشكراً على مرورك الكريم

      حذف
  14. كيف اغير نوع الخط في القائمه اخي العزيز عمر مع تحياتي لك

    ردحذف
    الردود
    1. هذا هو نوع الخط فقط تعديله بمعرف الخط الذي تريد Tahoma, Geneva, sans-serif
      وهذه طريقة للتعرف على طريقة تغيير الخطوط
      http://cnmu.blogspot.com/2013/03/blog-post_14.html

      حذف
    2. تم الامر لك مني كل الشكر والتقدير اخي العزيز بارك الله بيك

      حذف
    3. أهلا بك في اى وقت تحياتي

      حذف
  15. شكرا انا استخدمت تلك القائمة لعمل اداة ترجمة على شكل اعلام منسدلة e=

    ردحذف
  16. السلام عليكم ورحمة الله وبركاته
    أخي ركبت الاضافة على مدونتي هذه: http://learn--learning.blogspot.com/
    العناصر تعمل ولكن القائمة المنسدلة لا تعمل ما السبب ؟
    شكرا أخي

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

      حذف
    2. لقد أعدت إدخال الإضافة ولكن المشكل لم بقي كما هو هل من حل أخي ؟
      شكرا

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

      حذف
    4. هذا هو القالب الخاص بي http://www.gulfup.com/?fKm7Ke
      اتمنى الا اكون قد ازعجتك وشكرا

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

      حذف
    6. شكرا أخي على تواصلك معي

      حذف
  17. أخي الكريم أنا أستعمل قالب blogger test و أريد إضافة قائمة ثانوية داخل رابط فرعي مثال رياضة = كرة قدم = كرة قدم دولية. جربت كل الأكواد دون فائدة أرجوك أفدني ولك مني جزيل الشكر

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

      حذف
  18. عزيزي كيفك اشكرك على ابداعك
    لكن كيفئمه بدل القامه الهيدر مالتي يعني ما اريده فوق اريد فوق سلايدشو
    هذا رابط المدونه afaqkora.blogspot.com

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

      حذف
  19. من فضلك لم اعرف كيف احول القائمة المسندلة غلى نمط انجليزي بدلا من العربي

    ردحذف
    الردود
    1. استبدل الكلمات العربية بإنجليزية
      واستبدل كلمة right بـ left وكلمة left بـ right

      حذف
  20. مشكور اخي الكريم شرحك واضح ومختصر

    ردحذف

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

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