تصميم قائمة ب css, xhtml
يمكن استعمال الوسمين <ul> و <li> في أمور كثيرة، من بينها القوائم أو menu .. سواء كانت القائمة عمودية او أفقية، هذا الدرس يشرح طريقة تصميم menu باستعمال css وxhtml
كود xhtml يعرض 4 روابط ..
القائمة ستظهر بهذا الشكل:
لأننا لم نحدد اي خصائص ب css وبالتالي فهو الشكل الطبيعي او ما يسمى ب Default
لنبدأ بكتابة بعض الأكواد ب css .. ساضيف إطار أو border لهذه القائمة وبعض المميزات الاخرى كالتالي:
ul {
margin: .88em;padding: .7em;
border: 1px solid #ddd;
list-style: none;
width: 150px;
}
أضفت بعض خصائص مثل وأخفيت bullet التي تظهر في الوسم <li> ..
أصبح شكل 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 وانظر كيف ستظره القائمة، ستكون شبيهة بهذه الصورة:
قائمتي أصبحت كالتالي:
يمكن إجراء أي تعديلات او تغييرات نريدها .. فاستعمال css مثل الرسم في الفوتوشوب فانت تكتب ما تتخيله وما ترغب فيه:
أفضت border في جهة اليمين بحجم4 بيكسل كالتالي:
li a:link, li a:visited {
border-right: 4px solid #6E6E6E;
}
li a:hover{
border-right: 4px solid #038CE7;
}
ملاحظة: يمكننا اختزال بعض الأسطر في كود css بحيث نجمع الخصائص المتشابهة:
li a:visited, li a:link, li a:hover {
text-decoration:none;
}
هذا الدرس للمبتدئين في css راعيت أن يكون واضحا وبسيطا قدر الإمكان .. وهو منجز على firefox والصفحات متوافقة مع اختبارات w3c ولكي تظهر لك نفس النتائج على ie 6 يجب ان نضيف بعض fix .. سأشرح ذلك في درس آخر ..
أيضا كيفية تصميم قائمة أفقية في درس لاحق بأذن الله ..