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 في الساعة 9:58 ص ضمن تصنيف دروس. يمكنك متابعة أي تعليق من خلال RSS 2.0 خلاصات التعليقات. يمكنك ترك تعليق, أو تعقيب من خلال موقعك الشخصي.