شريط القوائم
من المهم استخدام شريط للقوائم لأي موقع ويب في العالم ومع استخدام CSS سيصبح لديك شريط قائمة رائع أفضل من قوائم HTML المملة
شريط القوائم = قائمة من الروابط
لصنع شريط قائمة جميل تحتاج الى كود من لغة HTML كأساس للقائمة
سنصنع في المثال التالي شريط قائمة مكون من وسوم HTML
ان شريط القوائم هو بشكل عام قائمة من الروابط يمكن استخدام <ul> و <li> لانشاء قائمة رائعة ولدراسة قسم القوائم يمكنك مشاهد درس القوائم
مثال
<ul> <li><a href="default.asp">Home</a></li> <li><a href="news.asp">News</a></li> <li><a href="contact.asp">Contact</a></li> <li><a href="about.asp">About</a></li> </ul>
الآن سنقوم بحذف علامة القائمة بالاضافة الى الهوامش الخارجية والداخلية من القائمة باستخدام CSS
مثال
ul {
list-style-type:none;
margin:0;
padding:0;
}
شرح المثال :
- استخدام list-style-type:none يعني ازالة العلامات السوداء من القائمة لأن القائمة الأفقية أو العمودية لاتحتاج الى علامات للقائمة
- ضبط الهوامش الخارجية والداخلية الى 0 لإزالة ضبط المتصفح الافتراضي للهوامش
يستخدم الكود في المثال السابق مع شريط قائمة عمودي أو أفقي
شريط القائمة العمودية
لصنع شريط قائمة عمودي يمكن فقط اضافة تصميم خاص الى المنتقى a بالاضافة الى الكود في المثال السابق
مثال
a
{
display:block;
width:60px;
}
شرح المثال :
- تعرض خاصية display:block (أي طريقة الاظهار ككتل أي العناصر تحت بعضهم) والتي تجعل جميع منطقة الرابط قابلة للضغط ليس فقط النص كما تسمح لنا بتحديد العرض
- تحديد العرض width:60px تأخذ العناصر الكتلية العرض الكامل المتوفر بشكل افتراضي ولكننا حددنا العرض 60 بكسل
شاهد المثال
ملاحظة : دائماً قم بتحديد العرض للعنصر <a> عند انشاء شريط قائمة ولكن ان لم تقم بتحديد العرض فإن المتصفح IE6 سيظهر مشاكل غير متوقعة
شاهد المثال التالي - شريط قوائم عمودي
شريط القوائم الأفقي
هناك طريقتين لإنشاء شريط قوائم أفقي وذلك باستخدام خاصيات عناصر القائمة الطافية float أو الداخلية inline
تعمل الطريقتين بشكل جيد وان أردت الروابط أن تكون بنفس الحجم يجب استخدام خاصية الطفو float
عناصر القائمة باستخدام خاصية بسطر واحد inline
يمكنك إنشاء شريط قائمة أفقي وذلك بتخصيص عنصر القائمة li كظهور داخلي أي بنفس السطر بالاضافة الى الكود المعياري في أول الدرس
مثال
li
{
display:inline;
}
شرح المثال :
استخدمنا display:inline; لأن عناصر القائمة <li> بشكل عام على شكل كتل أي مصفوفة تحت بعضهم البعض بشكل عمودي ولذلك استخدمنا طريقة العرض بنفس السطر وتم ازالة الاسطر قبل وبعد كل عنصر ليتم عرضهم بسطر واحد
طفو عناصر القائمة باستخدام خاصية float
في المثال السابق لدينا الروابط لديها عرض مختلف عن بعضهم
ولجعل الروابط تأخذ عرضاً واحداً يمكن استخدام خاصية الطفو float لتحديد العرض للروابط <a>
مثال
li
{
float:left;
}
a
{
display:block;
width:60px;
}
رائع الشرح رائع
ردحذف