1. ما هي القوائم ؟
2. انواع القوائم .
3. ضابط الاختلاف .
4. بعض الأفكارو الحيل .

ما هي القوائم؟

القوائم ببساطة ، هي عناصر مرتبة ترتيبا موحدا ، إما أفقيا او عموديا ، يتم فيه عرض أفكار ، عناوين ، اقسام ، أو نقط يتم ترتيبها حسب الأولوية ، واحدة تلو الأخرى .

الكل منا يعرف كود html الخاص بعرض قائمة عادية وهو كالتالي :

<ul>
	<li>عنوان</li>
	<li>عنوان</li>
	<li>عنوان</li>
</ul>

وهو كود عادي جدا ، يصلح لعمل قائمة متسلسلة ، و افتراضيا تكون عمودية

انواع القوائم .

من ناحيتين ، من ناحية الترتيب ، ومن ناحية التنسيق،

اما من ناحية الترتيب ، فهي تنقسم إلى :

• مرقمة : تكون على الصيغة التالية :

  <ol>
  	<li>عنوان</li>
  	<li>عنوان</li>
  	<li>عنوان</li>
  </ol>

  يمكنني ان اتحكم في العدد الذي تبدأ منه بإضافة العنصر start :

  <ol start="3">
  	<li>عنوان</li>
  	<li>عنوان</li>
  	<li>عنوان</li>
  </ol>

  و كذلك نوع الترتيب ، هل هو رقمي أم أبجدي بإضافة العنصر type

  <ol type="1" start="1">
  	<li>عنوان</li>
  	<li>عنوان</li>
  	<li>عنوان</li>
  </ol>

  و بتغيير قيمة type الى 1 سنحصل على ترتيب رقمي ، و a أو A للترتيب الأبجدي اللاتيني ، و i أو I للترتيب الأبجدي الروماني

• غير مرقمة : وهي القوائم التي لا يوجد بها ترتيب في جانب العناوين ، وتكتب هكذا :

  <ul>
  	<li>عنوان</li>
  	<li>عنوان</li>
  	<li>عنوان</li>
  </ul>

  افتراضيا ، تكون بجانب كل عنوان نقطة صغيرة ، يمكن التحكم في لونها و إظهارها من عدمه ، يمكن كذلك تغيير نوع النقطة بتغيير قيم العنصر Type :

  <ul type="disc">
  	<li>عنوان</li>
  	<li>عنوان</li>
  	<li>عنوان</li>
  	<li>عنوان</li>
  </ul>

  إلى disc للنقط السوداء ، او square لمربعات صغيرة ، أو circle لنقط فارغة ، عبارة عن دوائر

التقسيم من ناحية التنسيق ، وهذا الذي يهمنا بعد هذه المقدمة ، وهو الذي سنحتاجه بكثرة مشاريعنا :

• قوائم عمودية : قوائم عناوين يكون بعضها تحت بعض ، كما هو الحال في عناوين المدنة جانبا ( القيمة الافتراضية للقوائم )
• قوائم أفقية : و هي عبارة عن عناون بعضها بجانب بعض في مستوى واحد ، كما هو الشأن في رأس المدونة في العناوين الأفقية ،
• قوائم أفقية عمودية : وهو خليط من القوائم العمودية و الأفقية ، حيث نحاول ان نستغل المساحتين ، الأفقية و العمودية لمكان معين من الصفحة ، انظر مثال

ضابط الاختلاف .

و أنا أقصد به الضابط في الاختلافات بين القوائم من نوع التنسيق ، سنأخد مثالا لذلك ، لدينا هذا الكود الخاص بقائمة عناوين عادية :

<ul>
	<li>عنوان</li>
	<li>عنوان</li>
	<li>عنوان</li>
</ul>

طبعا و بعد التنسيقات التي ستعملها من ألوان و border و مأثرات ، فإن الضابط لتتحكم في قائمتك من ناحية الاتجاه – أفقي أم عمودي – وهو قيم الخاصية float من كود css

ul li {
	float: right;
}

فإذا اعطيتم للـ float أي من right أو left فسيتم اعتبار هذه القائمة أفقية ، و البدأ من الاتجاه سيكن على حسب ما اعطيتها من اتجاه ، اما لو تم تجاهل الـ float و لم يتم اعطاؤها أي قيمة ، فهنا قائمتنا افتراضيا ستكون عمودية
طيب ماذا عن النوع الثالث وهو الخليط بين النوعين الفارط ذكريهما ؟؟
سأحاول شرح طريقة العمل في المثال السابق ، طبعا الاختلاف في التنسيق css :

ul {
	padding: 0;
	margin: 0;
	list-style: none; /* لنزع النقط السوداء الافتاضية بجانب العناوين */
	width:125px ; /* هنا العرض الاجمالي لكل القائمة  */
	border: 1px solid #ccc;
	font: 12px tahoma;
}
ul li {
	padding: 5px 10px;
	margin: 0 2px;
	float: right; /* اعتبارها أفقية مبدئيا */
	width : 36px;/* تحديد عرض كل قائمة على حدى */
	border-bottom: 1px solid #ddd;
}

لاحظ القيم التي بجانبها تعليق هي التي تميز هذا النوع من القوائم ، وما بقي هي فقط تنسيقات شخصية ، يمكنك استبدالها بما يصلح لك ، مع مراعاة العرض و الـ padding و margin حتى لا تخرج عن العرض المحدد أولا فتصبح القائمة عمودية بحتة .

بعض الأفكارو الحيل .

هنا سأضيف إلى معارفك فقط بعض التجارب و الأفكار و الحيل التي قد تفيدك في تنسيقاتك و أعمالك :

• حاول أن تجعل الفواصل بين القوائم ظاهرة و بينة ، ولا تجعلها مشتركة ابدا ، حتى لا يتوهم و يتم جمع أكثر من عنوان في عنوان واحد
• لا تستعمل القوائم بغير كود القوائم ، نعم هناك من يستعملها بغير الكود المخصص لها وهو ul او ol ، هناك من يستعملها بروابط عادية و يفصلها بعوارض مثل ( – ) أو هذه ( | ) كقوائم أفقية ، طبعا بغض النظر من ناحية الأرشفة التي يتضرر منها صاحب هذه القوائم ، فإن هذه الطريقة أصبحت تقليدية ولا تعطيك الحق للتحكم بقائمتك جيدا ، لذلك حاول أن تجتنب مثل هذه القوام التقليدية و التنسيقات القديمة ، و انتقل إلى بدائل لها في css ، مثلا border سواء على اليمين أو في الاسفل ، على حسب النوع ،

  ul li {
  	border-bottom: 1px solid #ddd; /* للقوائم العمودية */
  	border-right : 1px solid #ddd; /* للأفقية */
  }

• طبعا لا تنسى مراعاة الخطوط في قوائم و انواعها ، فلهذا تاثير كبير جدا جدا على نفسية الزائر ، يمكنك ان تزداد معرفة بهذا من هنا
• مراعاة قيم margin و padding على حسب نوع القائمة التي تعمل عليها ، يتجنب الالتصاق بين العناوين
• التوازي في التموضع ، وذلك باجتناب أمر position في القوائم ، حتى تبقى قائمتك متوازية ، إلا في بعض الحالات التي يكون فيها التصميم يستدعي استعمال هذا الأمر

آمل ان تكون قد استفدت ولو شيئا قليلا مما سطرته ، و السلام عليكم ورحمة الله وبركاته

مثال Demo

لرؤية مثال على درسنا ، اضغط هنا .

فكرة الدرس و أدواته :

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

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

سأفتح برنامج Photoshop و سأعمل المراحل التالية :

ساحصل على الصورة التالية و هي التي سأستعمل في تطبيقي :

طريقة العمل :

سأبدأ في التوزيع ، ساعمل قائمة عادية لعناوين مهمة ، و سأجعلها أفقية ، كود xhtml بسيط :

<ul id="a">
	<li><a href="#">الرئيسية</a></li>
	<li><a href="#">المدونة</a></li>
	<li><a href="#">خدمات</a></li>
	<li><a href="#">اتصل بنا</a></li>
</ul>

وهو كود خاص بقائمة ul فيها عناوين li بها روابط a ، شيء عادي جدا ، بالنسبة للـ id الذي سميته a هذا لتمييز القائمة عن غيرها لأنني استعملت أكثر من قائمة في تطبيقي ، يمكنك الاستغناء عنه أو استبداله بما يصلح لك .

كود css التابع لهذه القائمة :

ul, ul li {
	margin:0;
	padding:0;
}
ul {
	list-style:none; /*  لحذف نقط التابعة للقائمة */
}
li {
	float:right;
	width:100px;
	text-align:center;
	}
li a {
	font: 12px tahoma;
	display:block;	/* لجعل الرابط يملأ كل li */
	padding:10px 20px;
	height:100%;
	color:#000;
	text-decoration:none;
	border-right:1px solid #FFF;
	background:url(bg.jpg) repeat -20px 35px;
}

اقرأ التعليقات ..
الآن قائمتي جيدة ، و عادية جدا ، إلا أنك ستلاحظ أنني لم أضف li a:hover ، لأنني سأضيفها داخل كود js

بعد استدعائنا للمكتبة في وسم الهيد + الملف المحلق المسسول عن تحريك الخلفية ، يمكنك أن قراءته من هنا فهو بسيط إن شاء الله . نشرع في بناء كود تطبيقنا :
أولا سأحتاج لتوضيح الفكرة ، لتأثير يجب أن يطبق عند دخول المأشر على القائمة ، و عند خروجه ، وهنا سأحتاج لحدثين ، mouseover الخاص بدخول المؤشر على المكان المحدد ، mouseout عند خروج المؤشر ..

.mouseover(function(){
	$(this).stop().animate({backgroundPosition:"(-20px 94px)"}, {duration:500})
})

ما عملناه هنا ، وهو عند دخول المؤشر على منطقة الرابط ، سيتم تغيير الخلفية من المكان الافتراضي إلى المكان الجديد (-20px 94px) . ولا تنس duration في تحديد مدة الانتقال ، 500 عادية في نظري ، لو أردتها بطيئة أكثر ، يمكنك الزيادة فيها الى اي رقم يظهر لك .
نفس الشيء سأعمله عند خروج المؤشر من مكان الرابط ، إلا أنني سأغير مكان الخلفية ليتم التمويج (40px 35px)

.mouseout(function(){
	$(this).stop().animate({backgroundPosition:"(40px 35px)"}, {duration:500, })
})

الآن الحدثين جاهزين للعمل ، بقي فقط ندخلهما تحت الرابط المراد التطبيق عليه :

$(function(){
$('#a a')
	.mouseover(function(){
		$(this).stop().animate({backgroundPosition:"(-20px 94px)"}, {duration:500})
	})
	.mouseout(function(){
		$(this).stop().animate({backgroundPosition:"(40px 35px)"}, {duration:500, })
	})
});

وهكذا أكون قد طبقت تحريكا للخلفية و تم تمويه الزائر أنه هناك حركة مثل فلاشية ، و لا وجود للفلاش داخل قائمتي

ملاحظات :

• عادة ما يكون لي في مشاريعي أكثر من قائمة ، و قد لا اريد تطبيق الحركة إلا على قائمة واحدة ، او كل قائمة لها حركتها المعينة ، لذلك يمكنني أن أجعل الخلفية الافتراضية لكل قائمة و تغييرها داخل كود js بتطبيق اوامر css داخل كود jQuery كالتالي :

  .css( {backgroundPosition: "-20px 35px"} )

  وهكذا فلن أقع في خلط ما دمت اعي ما أفعل

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

آمل ان تكون استفدت مما قدمته اليوم ، على أمل الاتقاء في درس جديد و فكرة جديدة إن شاء الله تعالى ، و السلام عليكم ورحمة الله

Demo
رؤية مثال : من هنا

اولا لنأخذ قائمة العناوين ، كود x/html الخاص بها :

<ul class="menu">
	<li><a title="للرجوع للرئيسية اضغط هنا" href="http://www.fez-soft.net">الرئيسية</a></li>
	<li><a title="نرحب بأي اتصال ، أو نقد أو نصيحة أو دعم" href="http://www.fez-soft.net/contact">اتصل بنا</a></li>
	<li><a title="أخوكم محمد شاطر" href="http://www.fez-soft.net/about-me">Fez-Soft</a></li>
</ul>

شيء عادي جدا ، الآن سنحاول أن نعمل تنسيق قائمتنا و نجعلها أفقية ،
كود css : لنحاول الآن أن نموضع div القائمة

.menu2 {
	margin: 100px 0 0;
	padding: 0;
	list-style: none;/* لنزع النقط السوداء التابعة للقوائم */
}
.menu li {
	padding: 0;
	margin: 0 2px;
	float: right; /* لجعل القائمة أفقية و ليست عمودية */
	position: relative;
	text-align: center;
}
.menu a {
	padding: 14px 10px;
	display: block; /* ليملأ الرابط كل مكان Li و لا يكتفي بمكان الرابط فقط */
	color: #000000;
	width: 144px;
	text-decoration: none;
	background: url(images/button.gif) no-repeat center center;
}
.menu li em { /* هذا تنسيق الوصف الذي سنظره و نخفيه بتاثير المكتبة */
	background: url(images/hover.png) no-repeat;
	width: 180px;
	height: 45px;
	position: absolute;
	top: -85px;
	right: -15px;
	text-align: center;
	padding: 20px 12px 10px;
	font-style: normal;
	z-index: 2;
	display: none; /* القيمة الافتراضية له أن يكون مخفيا */
}

أرجو أن تقرأ التعليقات بالعربية لأنها تفسر الخصائص المبهمة ،
و الآن قائمتنا جيدة من ناحية التنسيق ، ينقصها تاثير المكتبة على الوصف ليزيدها جمالا ، لنستدعي ملف المكتية في وسم الهيد كما تعودنا :

<script src="jquery.js" type="text/javascript"></script>

ونقوم بعمل التأثير الآن ، لا زلنا في وسم الهيد :

$(document).ready(function(){
 
	$(".menu2 a").append("<em></em>");
 
	$(".menu2 a").hover(function() {
		$(this).find("em").animate({opacity: "show", top: "-75"}, "fast");
		var hoverText = $(this).attr("title");
	    $(this).find("em").text(hoverText);
	}, function() {
		$(this).find("em").animate({opacity: "hide", top: "-85"}, "slow");
	});
 
});

لاحظ معي :

$(".menu2 a").append("<em></em>");

اعطينا القائمة قيمة em ، و لكننا تركناها مخفية – راجع ملف css حيث كتبنا قيمة menu li em التالي :

display: none;

لاحظ :

$(this).find("em").animate({opacity: "show", top: "-75"}, "fast");

• show:قيمة opacity ليتم اظهار العنصر
• fast : سرعة الظهور ، هنا سريعة

و عند الاخفاء نعمل العكس :

• hide : نعطيها لقيمة opacity ليتم اخفاء العنصر
• slow : الاخفاء سيتم ببطأ

التحميل : Download
لتحميل القائمة بالكامل و الصور كذلك : تفضل من هنا

و السلام عليكم ورحمة الله وبركاته .

هدية اليوم ، قائمة جافا سكربت متفرعة إلى 3 تفريعات – قوائم فرعية – بطريقة جميلة و ناعمة في الظهور ، وهذا ما جعل الجافا سكربت تتدخل ، و إلا لعملناها بـ css فقط
صورة القائمة :

• مثال حي : من هنا
• التحميل : اضغط هنا

و السلام عليكم ورحمة الله