-

الرئيسيةمكتبة الصورس .و .جبحـثالأعضاءالمجموعاتالتسجيلدخول

اخر المواضيع

جديدلاتفوت عروض بنده اليوم 22 يونيو 2017 الموافق 27 رمضان 1438 عروض الثلاث أيام25/06/17, 03:51 am من طرفحلم الايامجديدلاتفوت عروض كارفور عيدكم مبارك 21 يونيو 2017 الموافق 26 رمضان 143821/06/17, 01:36 am من طرفحلم الايامجديدلاتفوت عروض المدينة هايبر اليوم 19 يونيو 2017 الموافق 24 رمضان 1438 عروض طازجة19/06/17, 02:25 am من طرفحلم الايامجديدلاتفوت عروض لولو المنطقة الشرقية 18 يونيو 2017 الأحد 23 رمضان 1438 عروض العيد18/06/17, 02:43 am من طرفحلم الايامجديدعروض بنده عروض لمدة 4أيام فقط 20 رمضان 1438 الموافق 2017/6/1516/06/17, 02:34 am من طرفحلم الايامجديدلاتفوت عروض لولو الدمام اسعار مخفضة 14 يونيو 2017 الموافق 19 رمضان 143814/06/17, 03:42 am من طرفحلم الايامجديدبرنامج تحويل الفيديو الى عدة صيغ GOM Video Converter 2.0.0.114/06/17, 12:44 am من طرفنبض العيونجديدبرنامج تحرير الفيديو وانتاج مقاطع فيديو Movavi Video Editor 12.5.013/06/17, 11:47 pm من طرفنبض العيونجديدلا تفوت عروض السدحان لليوم 12 يونيو 2017 الاثنين 17 رمضان 1438 عروض منتصف الأسبوع12/06/17, 05:40 pm من طرفحلم الايامجديدبرنامج إزالة ومكافحة الفيروسات واحصنة طروادة Rising Antivirus Free 23.00.76.9312/06/17, 02:28 am من طرفنبض العيون


تم النشر بقلم :محمـود:15/07/15, 09:23 pm - -

 المشاركة رقم: #1
avatar
الاداره
متصل
تواصل معى
معاينة صفحة البيانات الشخصي للعضو http://www.layalyeg.com
بيانات اضافيه [+]
 الجنس : ذكر
 عدد الرسائل : 8016
 العمر : 39
 نقاط : 528694
 تاريخ التسجيل : 21/03/2008
 رأيك في العضو/هـ : 15
لوني المفضل : Tomato
كود اظهار الاقسام الفرعية بشكل رائع وجديد
السلام عليكم ورحمة الله
تحية طيبة لكل متابعي ليالي مصرية اليوم اقدم لكم طريقة اظهار الاقسام الفرعية بطريقة رائعةوجذابة وهي بتشخيص ظهور الاقسام بشكل راقي ان شاء الله ينال اعجابكم الطريقة والكود لاحلى منتدى

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

الان نقوم بوضع الكود التالي
الكود:
          <table>
                                               
                  <tbody>
                      <tr>
                                                 
                        <td>
                                                           
                            <div class="desc10">
                                                                   
                              <div class="class1">
                                                          <a href="رابط القسم"><span style="color: #FFFFFF;
                font-weight: bold;"> اسم القسم </span></a><br />                   
                              </div>
                                                                 
                              <div class="class1">
                                                          <a href="رابط القسم"><span style="color: #FFFFFF;
                font-weight: bold;"> اسم القسم </span></a><br />                   
                              </div>
                                                           
                              <div class="class1">
                                                          <a href="رابط القسم"><span style="color: #FFFFFF;
                font-weight: bold;"> اسم القسم </span></a><br />                   
                              </div>
                                                           
                              <div class="class1">
                                                          <a href="رابط القسم"><span style="color: #FFFFFF;
                font-weight: bold;"> اسم القسم </span></a><br />                   
                              </div>
                                                               
                              <div class="class1">
                                                          <a href="رابط القسم"><span style="color: #FFFFFF;
                font-weight: bold;"> اسم القسم </span></a><br />                   
                              </div>
                                                                 
                            </div>
                                                         
                        </td>
                                                 
                        <td>
                                                           
                            <div class="desc9">
                                                                   
                              <div class="class1">
                                                          <a href="رابط القسم"><span style="color: #FFFFFF;
                font-weight: bold;"> اسم القسم </span></a><br />                   
                              </div>
                                                               
                              <div class="class1">
                                                        <a href="رابط القسم"><span style="color: #FFFFFF;
                font-weight: bold;"> اسم القسم </span></a><br />                 
                              </div>
                                                             
                              <div class="class1">
                                                          <a href="رابط القسم"><span style="color: #FFFFFF;
                font-weight: bold;"> اسم القسم </span></a><br />                   
                              </div>
                                                           
                              <div class="class1">
                                                          <a href="رابط القسم"><span style="color: #FFFFFF;
                font-weight: bold;"> اسم القسم </span></a><br />                   
                              </div>
                                                               
                              <div class="class1">
                                                          <a href="رابط القسم"><span style="color: #FFFFFF;
                font-weight: bold;"> اسم القسم </span></a><br />                   
                              </div>
                                                                 
                            </div>
                                                         
                        </td>
                                               
                      </tr>
                                             
                  </tbody>
                </table
واذا اردت زيادة عدد الاقسام قم باضافة الكود التالي الى الكود السابق
الكود:
       
                              <div class="class1">
                                                          <a href="رابط القسم"><span style="color: #FFFFFF;
                font-weight: bold;"> اسم القسم </span></a><br />                   
                              </div>
ألان تبقت خطوة واحدة باضافة الكود التالي الى ورقة تصميم css
لوحة الاداره >> مظهر المنتدى ◀ الصور والألوان ◀ ألوان ◀ ورقة تصميم css
تعطيل كود ال CSS الأصلي: لا
تفعيل نظام تحسين مردودية ال CSS المشخص: نعم
ثم اضف هذا الكود الى ورقة تصميم css
الكود:
        /**www.layalyeg.com**/
                  .class1 {
                  opacity: 0.8;
                  width: 120px;
                  margin-bottom: 2px;
                  -webkit-transition: all 0.4s linear;
                  background-color: #096EA1;
                  font-family: bold;
                  font-size: 10.5px;
                  padding: 2px 0px 2px 10px;
                  line-height: 120%;
                  border-right: 15px solid #454C1F;
                  border-radius: 30px 30px 30px 30px;
                  list-style-type: none;
                  text-align: right;
                }
                    .class1:hover{
                    opacity:1;
                    border-left:30px solid #454C1F7;/*لون جنب اليسار*/
                    background-color:#075A96;/*لون خلفية عند مرور الماوس على اسم القسم */
                    border-radius:30px 30px 30px 30px;
                    color: #000;
                    }
                    .desc9 {
                  width: 140px;
                  height: 80px;
                  /* margin-top: -25px; */
                  padding: 20px display: block;
                  margin-left: 15px;
                }
                    .desc10 {
                    width: 140px;
                    height:54px;
                    margin-top: -25px;
                    padding: 20px;
                    display: block;
                    }
                    /**ليالي مصرية**/
الان عاين اقسام منتداك والف مبروك عليك هذا الشكل الجميل للاقسام
والى موعد قريب بكود جديد واضافة تزين منتدياتكم اترككم في رعاية الله وامنة


تم النشر بقلم :محمـود15/07/15, 09:23 pm    

تعليقات القراء



توقيع : محمـود






الإشارات المرجعية



الــرد الســـريـع

رفع الصور رفع فيديو أغانى فوتوشوب ترجمة رموز الكتابة ردود جاهزة صندوق متطور



مواضيع ذات صلة



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

BB code is متاحة
كود [IMG] متاحة
كود HTML معطلة