المواضيع الأخيرة
دخول
المتواجدون الآن ؟
ككل هناك 298 عُضو متصل حالياً :: 0 عضو مُسجل, 0 عُضو مُختفي و 298 زائر :: 3 عناكب الفهرسة في محركات البحثلا أحد
أكبر عدد للأعضاء المتواجدين في هذا المنتدى في نفس الوقت كان 677 بتاريخ الثلاثاء ديسمبر 05, 2023 10:38 pm
أفضل 10 أعضاء في هذا الشهر
لا يوجد مستخدم |
حكمة اليوم
احصائيات
هذا المنتدى يتوفر على 1256 عُضو.آخر عُضو مُسجل هو abdallahallam فمرحباً به.
أعضاؤنا قدموا 90262 مساهمة في هذا المنتدى في 31113 موضوع
المواضيع الأكثر شعبية
أفضل 10 أعضاء في هذا الأسبوع
لا يوجد مستخدم |
عمل القوائم
نظرة عيونك يا قمر :: اقسام منوعة :: قسم اكواد الHTML و اكواد css وأكواد الجافا إسكريبت JAVA وشرح وأزرار وخصائص ورتب للمنتديات والشاتات والمواقع
صفحة 1 من اصل 1 • شاطر
عمل القوائم
- اولا سنقوم بعمل id داخل div ونسميه علي سبيل المثال navigation
[CODE][ /CODE]
2-الان سنقوم بإنشاء اول مستوي للقائمة :
رمز Code:
رمز Code:
4-كود ال CSS للمستوي الاول للقائمة :
رمز Code:
5-والان سنقوم بعمل المستوي الثاني للقائمة :
رمز Code:
رمز Code:
7-وهذا الشكل النهائي لكود html للقائمة بثلاث مستويات :
رمز Code:
رمز Code:
وبهذا نكون قد انتهينا من عمل القائمة بهذا الشكل .. وتستطيع التعديل عليها كما احببت بالالوان والشكل ..
[CODE][ /CODE]
2-الان سنقوم بإنشاء اول مستوي للقائمة :
رمز Code:
3-وسنملئها ببعض اسماء الروابط مثال home..links..
رمز Code:
هذا مثال كيف سيصبح شكل القائمة :
4-كود ال CSS للمستوي الاول للقائمة :
رمز Code:
#navigation { font-size:0.75em; width:150px; } #navigation ul { margin:0px; padding:0px; } #navigation li { list-style: none; } ul.top-level { background:#666; } ul.top-level li { border-bottom: #fff solid; border-top: #fff solid; border-width: 1px; } #navigation a { color: #fff; cursor: pointer; display:block; height:25px; line-height: 25px; text-indent: 10px; text-decoration:none; width:100%; } #navigation a:hover{ text-decoration:underline; } #navigation li:hover { background: #f90; position: relative; }
هذا مثال كيف سيصبح شكل القائمة :5-والان سنقوم بعمل المستوي الثاني للقائمة :
رمز Code:
6- والخطوة القادمة التعديل عليها بال CSS :
رمز Code:
ul.sub-level { display: none; } li:hover .sub-level { background: #999; border: #fff solid; border-width: 1px; display: block; position: absolute; left: 75px; top: 5px; } ul.sub-level li { border: none; float:left; width:150px; }
وستصبح القائمة بهذا الشكل :7-وهذا الشكل النهائي لكود html للقائمة بثلاث مستويات :
رمز Code:
8-واخيرا نضع اخر اضافات لل CSS للتعديل علي المستوي الثاني والثالث :
رمز Code:
/*Seconda Level*/ #navigation .sub-level { background: #999; } /*Third Level*/ #navigation .sub-level .sub-level { background: #09C; } /*RESET STYLES*/ li:hover .sub-level .sub-level { display:none; } .sub-level li:hover .sub-level { display:block; }
وبهذا نكون قد انتهينا من عمل القائمة بهذا الشكل .. وتستطيع التعديل عليها كما احببت بالالوان والشكل ..
الثلج الاسود- كبار الشخصيات
- جنسية العضو : يمني
الأوسمة :
عدد المساهمات : 27056
تاريخ التسجيل : 22/06/2013
ملك الاحساس- نائب الادارة
- جنسية العضو : بحريني
الأوسمة :
عدد المساهمات : 795
تاريخ التسجيل : 09/10/2013
المزاج : هادئ
الثلج الاسود- كبار الشخصيات
- جنسية العضو : يمني
الأوسمة :
عدد المساهمات : 27056
تاريخ التسجيل : 22/06/2013
نظرة عيونك يا قمر :: اقسام منوعة :: قسم اكواد الHTML و اكواد css وأكواد الجافا إسكريبت JAVA وشرح وأزرار وخصائص ورتب للمنتديات والشاتات والمواقع
صفحة 1 من اصل 1
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى
السبت أبريل 27, 2024 6:36 pm من طرف مدام ششريهان
» دليلك لمنتجات العناية بالطفل على ويلنس سوق
الأربعاء أبريل 24, 2024 9:45 pm من طرف جنى بودى
» افضل فنادق مكة والمدينة
الأربعاء أبريل 24, 2024 12:44 am من طرف جنى بودى
» دليلك لمنتجات العناية بالطفل على ويلنس سوق
الأربعاء أبريل 24, 2024 12:43 am من طرف جنى بودى
» موسم الحج والعمرة وحجز فنادق
الإثنين أبريل 22, 2024 10:10 pm من طرف جنى بودى
» موسم الحج والعمرة وحجز فنادق
السبت أبريل 20, 2024 2:14 am من طرف جنى بودى
» منتجات كيو في على ويلنس سوق: الحل الكامل لجميع احتياجات العناية بالبشرة
السبت أبريل 20, 2024 2:06 am من طرف جنى بودى
» حجز فنادق مكة والمدينة
الأحد أبريل 14, 2024 10:55 pm من طرف جنى بودى
» اعداد رسائل الماجستير و الدكتوراه بكل اريحية
الخميس أبريل 11, 2024 8:21 pm من طرف مدام ششريهان
» مصنع ساف للبيتومين
الثلاثاء أبريل 09, 2024 12:38 am من طرف مدام ششريهان