المواضيع الأخيرة
دخول
المتواجدون الآن ؟
ككل هناك 323 عُضو متصل حالياً :: 0 عضو مُسجل, 0 عُضو مُختفي و 323 زائر :: 3 عناكب الفهرسة في محركات البحثلا أحد
أكبر عدد للأعضاء المتواجدين في هذا المنتدى في نفس الوقت كان 677 بتاريخ الثلاثاء ديسمبر 05, 2023 10:38 pm
حكمة اليوم
احصائيات
هذا المنتدى يتوفر على 1256 عُضو.آخر عُضو مُسجل هو abdallahallam فمرحباً به.
أعضاؤنا قدموا 90266 مساهمة في هذا المنتدى في 31117 موضوع
المواضيع الأكثر شعبية
عمل القوائم
نظرة عيونك يا قمر :: اقسام منوعة :: قسم اكواد ال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
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى
أمس في 8:13 pm من طرف جنى بودى
» افضل مكان بيبع تكييف شارب فى مصر ؟
الثلاثاء مايو 14, 2024 12:42 am من طرف جنى بودى
» تحقيق التميز في مناقصات الطرق السعودية: أسرار العروض الفنية الرابحة
الثلاثاء مايو 14, 2024 12:03 am من طرف جنى بودى
» قناة عشاق عالم الطيران
الأربعاء مايو 08, 2024 8:53 pm من طرف مدام ششريهان
» زعفران العز الملكي
السبت أبريل 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 من طرف جنى بودى