سبق كتبت درس حول خاصية position ، وأردت كتابة دروس أخرى حول هذه الخاصية وسأكتفي به لأني المصادر المتعلقة بها متوفرة وبكثرة جداً بالمواقع الأجنبية فلا حاجة لإعادة الدروس مرة أخرى! ، درس اليوم سيكون عن تطبيق على تأثير المحدد hover ، سواء كنت تريد عمل قائمة روابط أو ملاحة (Navigation) ، أو بنفس الطريقة ولكن على واجهة تستطيع من خلالها التحكم في ظهور الصور التي تريدها بتأثير مؤشر الفأره عليه.

قائمة الروابط

في المثال السابق الذي رأيته في الرابط العلوي واضح جداً ، نكتب قائمة بهذه الروابط عبر شفرة XHTML:


لاحظ العنصر الذي سنستخدمه بجانب خاصية position هو span ، تابع هذه الصورة توضيحية للكتابة  أكثر لا تحتاج إلى توضيح أكثر من هذا 😀

طبعاً أثناء التأثير ستكون صورة الصفحة بهذا الشكل:

وبالنسبة لتنسيق CSS ، فهو سهل أيضاً وكما هو واضح في الصورة إستخدام الخاصية position أولاً في الكلاس #navigation ، وبقيمة relative ، والتأثر سيكون على span كما ستشاهده في التنسيق التالي بشفرة CSS ، وسيحمل قيمة absolute حيث لن يخرج عن إطار الكلاس #navigation (راجع درس خاصية position)

ul#navigation {
	margin: 25px;
	list-style: none;
	width: 600px;
	height: 150px;
	position: relative;
}
ul#navigation li {
	float: right;
	padding: 0 15px;
}
ul#navigation li a.signup {
	display: block;
	background: url(sign_up.gif) center no-repeat;
	width: 120px;
	height: 34px;
	text-indent: -9999px;
}
ul#navigation li a.signup:hover span {
	display: block;
	background:url(discount.png) no-repeat;
	width: 284px;
	height: 90px;
	position: absolute;
	right: -1px;
	top: -7px;
}
ul#navigation li a.about {
	display: block;
	background: url(about.gif) center no-repeat;
	width: 170px;
	height: 34px;
	text-indent: -9999px;
}
ul#navigation li a.features {
	display: block;
	background: url(features.gif) center no-repeat;
	width: 170px;
	height: 34px;
	text-indent: -9999px;
}

مع التطبيق ستكون النتيجة كما شاهدناها في مثال قائمة الروابط في البداية.

أمثلة أخرى: واجهة إستخدام

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

  • Home
  • Write
  • Properties

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

والنتيجة كما هي مبينة في المثال الي كتبناه عن واجهة الإستخدام ، الفكرة نفسها مستخدمة كثيراً طبعاً مثال على ذلك مدونة Web Designer Wall في رأس الصفحة عند الروابط ، إستخدمت مطورة الويب صاحبه هذه المدونة الصور وخاصية position في CSS ، بشكل خفيف ورائع جداً .. إستخدمت قيمة absolute في البداية بدلاً من relative ..

إنتهى الدرس! 🙂 ، ..