تصميم قائمة ب css, xhtml

يمكن استعمال الوسمين <ul> و <li> في أمور كثيرة، من بينها القوائم أو menu .. سواء كانت القائمة عمودية او أفقية، هذا الدرس يشرح طريقة تصميم menu باستعمال css وxhtml

كود xhtml يعرض 4 روابط ..

القائمة ستظهر بهذا الشكل:
menu

لأننا لم نحدد اي خصائص ب css وبالتالي فهو الشكل الطبيعي او ما يسمى ب Default

مثال حي من هنا

لنبدأ بكتابة بعض الأكواد ب css .. ساضيف إطار أو border لهذه القائمة وبعض المميزات الاخرى كالتالي:

ul {
margin: .88em;padding: .7em;
border: 1px solid #ddd;
list-style: none;
width: 150px;
}

أضفت بعض خصائص مثل وأخفيت bullet التي تظهر في الوسم <li> ..
أصبح شكل menu كالتالي:

menu

مثال حي من هنا

الان سأضيف بعض الخصائص وبعض الألوان ..

li a {
display: block;
margin: 05px 0;
padding: .2em;
}

li a:link, li a:visited {
color:#0268ab;
text-decoration: none;
background: #f5f5f5;
}

li a:hover{
color:#333;
text-decoration: none;
background: #fffae5;
}

لكي تفهم فائدة الأمر

li a {
display: block;
}

احذف السطر: display: block وانظر كيف ستظره القائمة، ستكون شبيهة بهذه الصورة:

menu

قائمتي أصبحت كالتالي:

menu

تجربة المثال من هنا

يمكن إجراء أي تعديلات او تغييرات نريدها .. فاستعمال css مثل الرسم في الفوتوشوب فانت تكتب ما تتخيله وما ترغب فيه:

أفضت border في جهة اليمين بحجم4 بيكسل كالتالي:

li a:link, li a:visited {
border-right: 4px solid #6E6E6E;
}

li a:hover{
border-right: 4px solid #038CE7;
}

menu

تجربة المثال من هنا

ملاحظة: يمكننا اختزال بعض الأسطر في كود css بحيث نجمع الخصائص المتشابهة:

li a:visited, li a:link, li a:hover {
text-decoration:none;
}

هذا الدرس للمبتدئين في css راعيت أن يكون واضحا وبسيطا قدر الإمكان .. وهو منجز على firefox والصفحات متوافقة مع اختبارات w3c ولكي تظهر لك نفس النتائج على ie 6 يجب ان نضيف بعض fix .. سأشرح ذلك في درس آخر ..

أيضا كيفية تصميم قائمة أفقية في درس لاحق بأذن الله ..

أضف تعليقاً