شريط القوائم navbar

شريط القوائم

من المهم استخدام شريط للقوائم لأي موقع ويب في العالم ومع استخدام 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;
}

الكاتب اسم مدونتك

هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة،هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة

كن مبرمج