«
»

القوائم List ب CSS

الإثنين 28 يونيو 2010

القوائم (List, Navigation, Menu …) موجودة لتسهل وتسرع عملية التصفح، هناك من يضع روابط عادية <a> جنبا الى جنب، ولاجل Semantic Code وفهرسة الصفحات في محركات البحث بأفضل شكل ممكن، يفضل استعمال <ul> و <li>.

هذا الدرس البسيط يشرح طريقة تصميم قائمة أفقية (في بضع خطوات فقط):

list

قائمة ul:

<ul>
	<li><a>مقدمة</a></li>
	<li><a>بحث</a></li>
	<li><a>من نحن</a></li>
	<li><a>مراسلة</a></li>
</ul>

ضم الروابط داخل Block:

ul {
    overflow: auto
}

كي تتضح هذه الخطوة أستبدل السطر السابق ب:

ul {
    border:1px solid #ccc
}

الان يمكنني استعمال:

ul li {
    display: inline;
}

لكن سيتم تجاهل هذا الأمر في حال أردت جعل الرابط <a> على شكل Block
فهذا السطر سيجعل الروابط تظهر عموديا رغم أنني وضعت Display:inline في الوسم

  • ، ولن تعمل كذلك في حال قلب القيمتين.

    لذلك ساستعمل Float عوضا عن display:inline, السطر السابق سيصبح كالتالي:

    ul li {
    float: right
}

    ويمكنني جعل الرابط Block ربما لاغير لون الخلفية في حالتي Active و Hover:

    ul li a {
    display: block
}

    حصلت على قائمة افقية، ويمكنني الان تغيير شكل والوان القائمة بإضافة بعض الخصائص ب CSS3.
    لمن قام بتجربة التعديل الأول (حذف overflow:auto ووضع border) سيحصل على قائمة بهذا الشكل:

    list

    لتمييز رابط معين أضيف له Class كالتالي:

    	<li><a class="last">مراسلة</a></li>

    ولن احتاج سوى لتغيير لون الخلفية:

    ul li a.last {
    background: #97C1C6
}

    list

    ماذا إذا أردت جعل القائمة عمودية دون أن أعيد كتابة الأكواد من الصفر؟
    يكفي أن أحذف Float عن طريق:

    ul li {
    float: inherit
}

    أو حتى:

    ul li {
    float: none
}

    list

    • 5 تعليقات

    1. مرمر قال:
      9 يوليو 2010 الساعة 20:14

      مزبط معي بالشكل الي اخترته انت

    2. admin قال:
      9 يوليو 2010 الساعة 21:00

      اكتب لي او ارسل لي ملفاتك لاساعدك

    3. سكون الليل قال:
      8 سبتمبر 2010 الساعة 11:28

      عزيزي .. هل القوالب هذي تستخدم على جميع الصيغ في المنتديات او المواقع ..؟

    4. العراق يختار الحياة قال:
      4 نوفمبر 2010 الساعة 02:47

      للأسف ما ضبط معي انا اريد ان اعمل هذا
      في صفحه مستقله اين اضع الكود
      مع الشكر

    5. mongid قال:
      22 يناير 2012 الساعة 18:49

      مرحبا يا اخي
      شكرا على مجهودك الجميل
      ولكن عندي استفسار بخصوص float
      لمذا عد عمل هذا الكود عندما قمت بعمل اللينكات بهذه الخاصية لتصبح اللينكات بجانب بعضها البعض قامت اللينكات بالتعدي على ال div الاب والخروج عن نطاقه كما ترى هنا
      http://www.cssbit.com/wp-content/uploads/2010/06/blog2/List.png

      ان اللينكات خرجت عن الحد المتقطع
      هذه الحالة تحصل معي دائما ولا اعرف ما العمل بخصوصها

      اتمنى الافادة

    أضف تعليقا

    لن يظهر بريدك لأحد آخر

    إن أردت