<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>

.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>");

display: none;

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

12 من التعليقات لـ “قائمة أفقية ، مع تحديد title بـ jQuery بطريقة فريدة”

1. حسين عادل قال:

   23 يونيو 2009 عند 3:30 م

   درس جميل أخي ..محمد تسلم أيدك

   رد
2. ياسين قال:

   23 يونيو 2009 عند 9:08 م

   جرس مميز يا الغالي … وقليلا ما نجده في مواقع عربية شكرا جزيلا لك … و جزاك الله الجنة .

   رد
3. w4rz4zi قال:

   25 يونيو 2009 عند 1:52 م

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

   رد
4. Fez-Soft قال:

   26 يونيو 2009 عند 7:41 م

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

   في نظري ، الاعتماد على هذه المكتبات حل عبقري لو كان المصمم يعي ما يفعل
   شكرا لمرورك ..

   رد
5. Hashem قال:

   27 يونيو 2009 عند 11:06 ص

   صراحة أجدت أخي الحبيب فى الشرح والدرس رائع ومميز جداً

   ننتظر جديدك
   وأتمني لك التوفيق :)

   رد
6. عبدالرحمن قال:

   10 يوليو 2009 عند 6:17 م

   الصراحة استدفت منها كثير كثير كثير جزاك الله خير والله يكثر من أمثالك

   وياريت لا تحرمنا هيك إبداعات

   رد
7. عماد الدين قال:

   12 يوليو 2009 عند 4:20 ص

   رائع جدا ،
   تشبه Coda bubble
   http://www.ar-tuts.com/wp-content/uploads/coda-bubble/coda-bubble.html

   رد
8. شذا روحي قال:

   10 ديسمبر 2009 عند 11:31 ص

   شرح مبسط واكثر من رائع

   بارك الله فيك يا اخي

   رد
9. شذا روحي قال:

   10 ديسمبر 2009 عند 11:33 ص

   بارك الله فيك يا اخي

   شرح مبسط واكثر من رائع

   رد
10. مهند قال:

    5 مارس 2010 عند 6:01 ص

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

    اخي الكريم اشكرك جزيلا ،
    عندي استفسار بسيط

    اريد ان اضع كود html بدلا من النص في المربع الاصفر
    كيف يكون ذلك ؟

    وشكا جزيلا لك

    رد
11. tar3q قال:

    10 أبريل 2010 عند 3:54 ص

    السلام عليكم ..

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

    كتبت هذا التعليق من أجل شكرك اولاً وثانياً لألفت انتباهك بأن متصفح قوقل كروم يظهر خاصية title بشكل آخر

    أتمنى التجربة وتلافي المشكلة وأعتقد أنك لو حددت مثلاً وسم name أو rel فهو يغني بلا شك مع وافر التحايا

    رد
12. Losha قال:

    10 يوليو 2010 عند 1:27 م

    وجد الحل للتعارض مع مشكلة الجافا
    بعض المرات يحصل تعارض او conflict بين مكتبات الجافا سكربت ويؤدي ذلك الى ايقاف عمل احدهما او على اسوأ حال ايقاف عمل المكتبتين

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

    فقط اضف في اول الكود
    jQuery.noConflict();
    (function($) {

    وفي اخره
    })(jQuery);
    وفي هذه الحالة نكون قد طبقنا دالة no conflict المسؤولة عن ازالة هذا التعارض

    والان اصبح بامكانك التمتع بميزات عدة مكتبات في ان واحد
    تمتعوا بميزات الجي كويري الان ولا تنسوا ان تدعوا لي اذا استفدتم من درسي البسيط

    رد