تواصل معي عبر facebook تواصل معي عبر twitter تواصل معي عبر youtube تواصل معي عبر google

لاول , الله , الذي , تحميل , تظهر , وحجم , كامل

تغير شكل الاقسام الفرعية في قائمة منسدلة Css3

اليوم اقدم لكم شرح تغير شكل الاقسام الفرعية وعرضها في قائمة منسدله بتقنية Css3
أو ما يعرف بـ dropdown

:: صورة توضيحية ::



التعديل على قالبين في الاستايل
الاول forumhome_forumbit_level2_post
الثاني forumhome_subforumbit_post


:: الشرح ::

نبحث في القالب الاول forumhome_forumbit_level2_post عن :

<if condition="$show['subforums']">

كما في الصورة :



نستبدله بـ :

HTML & CSS

 <ul class="dropdown">
    <li>$vbphrase[subforums]</li>
    <ul class="dropdown-content">
        <li>$forum[subforums]</li>
    </ul>
</ul> 

  

ثم نضغط على حفظ وإعادة التحميل
انتهينا من القالب الاول

نبحث في قالب الثاني forumhome_subforumbit_post عن

HTML & CSS

 <img class="inlineimg" src="$stylevar[imgdir_statusicon]/subforum_$forum[statusicon].gif" alt="" border="0" id="forum_statusicon_$forum[forumid]" /> 

  

ونقوم بحذفه ، كما في الصورة :



ثم نضغط على حفظ وإعادة التحميل
انتهينا من القالب الثاني

تبقى لنا اضافة خصائص Css
نحدد الاستايل ونختار css رئيسي



في نهاية الحقل الثاني تعاريف CSS الإضافية/Additional CSS Definitions
نضيف الكود التالي :

HTML & CSS

           /* dropdown By_Alm6wer from www.alm6wer.com */
/* خاصية كلمة الاقسام الفرعية */
.dropdown {
    position: relative;
    display: inline-block;
    background-color: #113366;/* لون خلفية كلمة الاقسام الخلفية */
    padding: 5px;/* الحشو وهما الاتفاع والعرض  */
    border-radius: 7px;/* حدة الحواف المستديرة  */
    font: bold 11px 'Exo 2', 'Droid Arabic Kufi', tahoma;/* نوع الخط وحجمه */
}
ul.dropdown li {
    list-style: none;/* خاصية عدم إظهار نقطة القائمة */
    font: bold 11px 'Exo 2', 'Droid Arabic Kufi', tahoma;/* نوع الخط وحجمه */
    color: #FFF;/* لون كلمة الاقسام الفرعية */
}

/* الكود الذي يحوي كامل الاقسام الفرعية المنسدلة */
.dropdown-content {
    display: none;
    position: absolute;
    border-radius: 7px;/* حدة الحواف المستديرة */
    -min-width: 160px;/* الحد الاعلى لعرض محتوى الاقسام الفرعية */
    margin: 6px;/* مكان التواجد بالنسبة لكلمة الاقسام الفرعية */
    z-index: 1;/* خاصية الطبقة - لجعل القائمة المنسدلة تظهر أعلى أي عنصر على الاقسام */
    background-color: #FFF;/* لون الخلفية */
    padding: 10px 10px;/* الحشو وهما الاتفاع والعرض  */
    border: 2px solid #CCC;/* لون التحديد او التأطير */
}

/* كود القسم الفرعي في القائمة المنسدله  */
.dropdown-content a {
    position: relative;
    display: block;
    background-color: #113366;/* لون الخلفية */
    padding: 5px;/* الحشو وهما الاتفاع والعرض  */
    color: #FFF;/* لون الخط */
    border-radius: 7px;/* حدة الحواف المستديرة */
    font: bold 11px 'Exo 2', 'Droid Arabic Kufi', tahoma;
    text-decoration: none;/* حذف الخط من الرابط */
    min-width: 160px;/* الحد الاعلى لعرض الاقسام الفرعية */
    border: 2px solid #CCC;/* لون التحديد او التأطير */
}
/* كود التأشير على الاقسام الفرعية المنسدلة */
.dropdown-content a:hover {
    list-style: none;/* خاصية عدم إظهار نقطة القائمة */
    font: bold 11px 'Exo 2', 'Droid Arabic Kufi', tahoma;/* نوع الخط وحجمه */
    color: #113366;/* لون الخط */
    background-color: #FFF;/* لون الخليفة */
    border: 2px solid #CCC;/* لون التحديد او التأطير */
}

/* إظهار القائمة عند التأشير */
.dropdown:hover .dropdown-content {
    display: block;/* تمكين ظهور القائمة عند التأشير  */
}
/* كود المثلث الذي يظهر عن انسدال القائمة */
.dropdown ul li:before {
    border-right: 7px solid transparent;/* التحديد الايمين للمثلث */
    border-bottom: 7px solid #FFF;/* التحديد السفلي للمثلث */
    border-left: 7px solid transparent;/* التحديد الايسر للمثلث */
    border-bottom-color: #FFF;/* لون المثلث */
    content: '';
    display: inline-block;
    position: absolute;
    right: 16px;/* المكان بالنسبة لليمين */
    top: -7px;/* المكان بالنسبة للاعلى */
} 

  

انتهى الشرح

المصدر: القلم الذهبي - من قسم: «۩۞۩-منتدى البرمجة وتطوير المواقع-۩۞۩»

---

jydv a;g hghrshl hgtvudm td rhzlm lks]gm Css3 gh,g hggi hg`d jpldg j/iv ,p[l ;hlg

   

مشكوووووور والله يعطيك الف عافيه

   

تواصل معي عبر facebook تواصل معي عبر twitter تواصل معي عبر youtube تواصل معي عبر google

أرجو أن يكون أعجبكم التطبيق على الموقع
تحياتي

   

مشكوووووور والله يعطيك الف عافيه