cssbit 2.0

القائمة الأفقية مهمة لكل مطور ويب ويحتاجها في أجزاء كثيرة من المشروع، هذا الدرس يشرح احد الطرق التي يمكن استعمالها للحصول على قائمة أفقية ..

الدرس متوافق مع ie, firefox, safari, opera .. وخالي من الأخطاء ومكتوب ب css و xhtml

سنبدأ بكتابة كود عرض قائمة ولذلك نستعمل ul و li ..

سنحصل على قائمة بهذا الشكل:

كود css:

body {
	font:1em arial;
	margin:0;
	padding:0
}
 
#menu {
	margin:10px auto;
	width:600px;
	border:1px solid #67b7f8
}
 
#menu ul li a {
	color:#2799f6;
	text-decoration:none
}
 
#menu ul li a:hover {
	color:#000;
	text-decoration:underline
}

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

سأضيف تاثيرات وألوان لاكواد css السابقة بهذا الشكل:

#menu ul li,#menu ul li a,#menu ul li a:hover {
	display:block
}
 
#menu ul li {
	float:left;
	margin:0 05px 10px 0;
	height:25px
}

وبعض الألوان للروابط كالتالي:

#menu ul {
	width:auto;
	overflow:auto;
	list-style:none;
	padding:1em .3em
}
 
#menu ul li a {
	color:#2799f6;
	background:#d3eafd;
	padding:.4em;
	border:1px solid #d3eafd
}
 
#menu ul li a,#menu ul li a:hover {
	text-decoration:none
}
 
#menu ul li a:hover {
	color:#333;
	background:#f7f7f7;
	border:1px solid #ddd;
}

ساحصل على شكل شبيه بهذه الصورة:

اذا كان هناك أمر css غير مفهوم يرجى الاستفسار عنه في التعليقات، أم ببساطة حذفه من ملف css وستتصح فائدته ..

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

يمكن اضافة نصوص وصور ..الخ، الشكل النهائي:

أضفت بعض الأكواد ك fix لمتصفح internet explorer:

    [if lte IE 6]
 
    [endif]

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

تجربة المثال من هنا
تحميل الملفات

هذه التدوينة ادرجت بتاريخ 23 مايو 2008 في الساعة 6:36 م ضمن تصنيف دروس. يمكنك متابعة أي تعليق من خلال RSS 2.0 خلاصات التعليقات. يمكنك ترك تعليق, أو تعقيب من خلال موقعك الشخصي.