More

[ دورة CSS ] الدروس المتقدمة CSS – الدرس الثامن – شريط القوائم navbar

" Here you can search for everything you want and you will find it as soon as possible "

شريط القوائم

من المهم استخدام شريط للقوائم لأي موقع ويب في العالم ومع استخدام 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 لإزالة ضبط المتصفح الافتراضي للهوامش

يستخدم الكود في المثال السابق مع شريط قائمة عمودي أو أفقي

Click Here To See URL To Download

شريط القائمة العمودية

لصنع شريط قائمة عمودي يمكن فقط اضافة تصميم خاص الى المنتقى a بالاضافة الى الكود في المثال السابق
مثال

Click Here To See URL To Download
a
{
display:block;
width:60px;
}

شرح المثال :

  • تعرض خاصية display:block (أي طريقة الاظهار ككتل أي العناصر تحت بعضهم) والتي تجعل جميع منطقة الرابط قابلة للضغط ليس فقط النص كما تسمح لنا بتحديد العرض
  • تحديد العرض width:60px تأخذ العناصر الكتلية العرض الكامل المتوفر بشكل افتراضي ولكننا حددنا العرض 60 بكسل

شاهد المثال
ملاحظة : دائماً قم بتحديد العرض للعنصر <a> عند انشاء شريط قائمة ولكن ان لم تقم بتحديد العرض فإن المتصفح IE6 سيظهر مشاكل غير متوقعة
شاهد المثال التالي – شريط قوائم عمودي

Click Here To See URL To Download

شريط القوائم الأفقي

هناك طريقتين لإنشاء شريط قوائم أفقي وذلك باستخدام خاصيات عناصر القائمة الطافية float أو الداخلية inline
تعمل الطريقتين بشكل جيد وان أردت الروابط أن تكون بنفس الحجم يجب استخدام خاصية الطفو float
عناصر القائمة باستخدام خاصية بسطر واحد inline
يمكنك إنشاء شريط قائمة أفقي وذلك بتخصيص عنصر القائمة li كظهور داخلي أي بنفس السطر بالاضافة الى الكود المعياري في أول الدرس
مثال

li
{
display:inline;
}

شرح المثال :
استخدمنا display:inline; لأن عناصر القائمة <li> بشكل عام على شكل كتل أي مصفوفة تحت بعضهم البعض بشكل عمودي ولذلك استخدمنا طريقة العرض بنفس السطر وتم ازالة الاسطر قبل وبعد كل عنصر ليتم عرضهم بسطر واحد


طفو عناصر القائمة باستخدام خاصية float

في المثال السابق لدينا الروابط لديها عرض مختلف عن بعضهم
ولجعل الروابط تأخذ عرضاً واحداً يمكن استخدام خاصية الطفو float لتحديد العرض للروابط <a>
مثال

li
{
float:left;
}
a
{
display:block;
width:60px;
}
Show More
" Here you can search for everything you want and you will find it as soon as possible "

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Check Also

Close

Adblock Detected

Please consider supporting us by disabling your ad blocker