الفهرس هو index الذي يوجد في مقدمة الكتاب او آخره، يضم عادة جميع اقسام وعناوين الكتاب مع ارقام الصفحات
يمكن استعمال الفهرس في صفحات موقعك لعرض بعض البيانات والصفحات ..

هذا الدرس يشرح طريقة لانجاز ذلك

دائما الحل السحري هو استعمال ul و li في انجاز هذا النوع من المهام
سنبدأ بكتابة قائمة بسيطة كما يلي

<ul id='menu'>
  <li><a href="#">home</a></li>
  <li><a href="#">contact</a></li>
  <li><a href="#">help</a></li>
  <li><a href="#">maps</a></li>
</ul>

وضعت علامتي تنصيص مفردة بدل المزدوجة على سبيل التغيير
بعض المطورين يستعملون ذلك لتقليل عدد bytes ما أمكن، على أي أنت حر

<ul id='menu'>
</ul><ul id="menu">
<!-- are the same -->
</ul>

…………..

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

ul#menu {
	list-style: none;
	width: 500px;
	border: 1px solid #ddd;
	padding: .5em;
}
ul#menu li {
	margin: 0 0 5px;
	padding: .2em 0 0;
	font: .7em serif;
	text-transform: uppercase;
	color: #ccc;
	background: url(dote.gif) repeat-x 0 35%;
}

حسنا، ساشرح كل سطر مع ان الهدف من كل هذه الدروس هو “أفكار” لمطور الويب اكثر مما هي شرح لأوامر css ..

ul#menu {
	list-style: none;
	width: 500px;
}

لن تعرض bullet امام كل سطر في القائمة و bullet هي تلك الايقونة السوداء الصغيرة التي تظهر بشكل تلقائي عند استعمال الوسم li والتي يمكن اظهارها باشكال مختلفة
وضعت عرضا محددا للقائمة وهو 500px

ul#menu {
	border: 1px solid #ddd;
	padding: .5em;
}

وضعت إطارا للقائمة بلون رمادي #ddd مع توسيع محتوى القائمة ب نصف 1em من جميع الجوانب (يمكنك استعمال px او قيم أخرى، معنى التوسيع هنا هو ان تزيح المحتوى عن border كي لا تظهر العبارات متلاصقة مع الاطار)

أما هذا السطر

ul#menu li {
	margin: 0 0 5px;
}

فلكي أزيح كل item عن الذي اسفل منه، فالسطر السابق مكافئ لهذا السطر:

ul#menu li {
	margin-bottom: 5px;
}

……………
ثم احدد اللون وحجم الخط وشكله الذي سيكون هنا بحروف كبيرة

ul#menu li {
	font: .7em serif;
	text-transform: uppercase;
	color: #ccc;
}

واخيرا ساضع خلفية على شكل نقط dot تظهر مع كل item وبتعديل posistion ساجعل النقط تظهر اسفل العبارات ..

ul#menu li {
	background: url(dote.gif) repeat-x 0 35%;
}

الان سأضيف ارقاما قبل كل item واستعمل span لانني اريد ان اضيف تاثيرات على الارقام، الوسم span هو المناسب هنا، كما يمكن استعمال وسوم اخرى مثل code أو sub أو sup .. لكن من الافضل احترام كل tag ومكان استعماله

<ul id='menu'>
  <li><span>1</span> <a href="#">home</a></li>
  <li><span>2</span> <a href="#">contact</a></li>
  <li><span>3</span> <a href="#">help</a></li>
  <li><span>4</span> <a href="#">maps</a></li>
</ul>

هناك حكمة في وضع الارقام أول كل item ولم اضعها بعد a/ (الطريقتين تفيان بالغرض) والحكمة انه اذا تصفح الزائر القائمة بدون تفعيل css ستظهر له بشكل سليم هكذا:

من الافضل ؟

القائمة اذن ستظهر بهذه الطريقة:

……………..

كود css:

ul#menu li a {
 float: left;
 padding: 0 .5em;
 background: #fff;
 text-decoration: none;
}

جعلت الروابط تظهر على اليسار ووضعت خلفية بلون أبيض (سيتضح السبب من هذا بعد قليل)
تلاحظون في هذه الصورة ان مواضع الارقام قد تغيرت، كما ان الروابط لم تعد ضمن الإطار بمعنى ان اضفت رابطا جديد سيظهر اسفل الاطار ..

وبالتالي سارجع واضيف هذا السطر

ul#menu {
  overflow: auto;
}

وهكذا حلت المشكلة:

كود css:

ul#menu li span {
  float: right;
  padding: 0 .5em ;
  background: #FFF;
  font-size: 1.2em;
}

جعلت الارقام تتجه الى اليمين مع خلفية بيضاء (الخلفية البيضاء ستظهر في الارقام فقط والروابط فقط وبقية المساحة ستكون الخلفية عبارة عن نقط dot)
والا ستظهر هذه النقط في كامل li وهذا ليس في صالح ما نحن بصدد القيام به ..

النتيجة الان كالتالي:

ما أبشعها من قائمة ؟؟ اسف لأنني خيبت ظنكم ههه

بما اننا استعملنا float بقيمتين مختلفتين right و left يجب ان نجد حلا لكي يظهر كل سطر تحت الاخر بشكل متناسق، الحل السهل والمنطقي هو اضافة br عند نهاية كل رابط كما يلي:

<ul id='menu'>
  <li><span>1</span> <a href="#">home</a><br /></li>
  <li><span>2</span> <a href="#">contact</a><br /></li>
  <li><span>3</span> <a href="#">help</a><br /></li>
  <li><span>4</span> <a href="#">maps</a><br /></li>
</ul>

وطالما انني استعملت float من الأفضل ان اضيف خاصية clear: both لهذه br التي اضفتها

ul#menu li br {
  clear: both;
}

قائمتي اصبحت بالشكل التالي:

اذا حذفت الخلفية البيضاء التي اضفتها لكل من a و span يعني الروابط والارقام ستظهر بهذا الشكل

يمكنك استعمال الوان تحبها:

انتهى الدرس
لم اضع هذه المرة ملفات العمل لكي يسعى كل راغب في تطبيقه الى كتابة الاكود بنفسه ..
لكنني سأهديكم ملف مضغوط به ايقونات على شكل نقط مختلفة الشكل واللون ..

تحميل الإيقونات