cssbit 2.0

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

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

<ul>
	<li><a href="./">home</a></li>
	<li><a href="/about">about</a></li>
	<li><a href="/service">service</a></li>
	<li><a href="/contact">contact</a></li>
</ul>

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

لأننا لم نحدد اي خصائص ب 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;
}

هذا الدرس منجز على Firefox والصفحات متوافقة مع اختبارات w3c ولكي تظهر لك نفس النتائج على IE6 يجب ان نضيف بعض Fix ..

هذه التدوينة نشرت بتاريخ: السبت 26 أبريل 2008 و مصنفة تحت تصنيف دروس. يمكنك متابعة أي تعليقات عبر رابط RSS 2.0. كل من التعليقات و التعقيبات مغلقة حالياً.