المُعاصر

var $j = jQuery.noConflict();
$j(document).ready(function(){
 
	//Fix Errors - http://www.learningjquery.com/2009/01/quick-tip-prevent-animation-queue-buildup/
 
	//Remove outline from links
	$j("a").click(function(){
		$j(this).blur();
	});
 
	//When mouse rolls over
	$j("li").mouseover(function(){
		$j(this).stop().animate({height:'150px'},{queue:false, duration:600, easing: 'easeOutBounce'})
	});
 
	//When mouse is removed
	$j("li").mouseout(function(){
		$j(this).stop().animate({height:'50px'},{queue:false, duration:600, easing: 'easeOutBounce'})
	});
 
});

var $j = jQuery.noConflict();
$j(document).ready(function(){
 
	//By Mo3aser.com
 		m=document.getElementById('buttons');
		sa=m.getElementsByTagName('li');
 
	//Fix Errors - http://www.learningjquery.com/2009/01/quick-tip-prevent-animation-queue-buildup/
 
	//Remove outline from links
	$j("a").click(function(){
		$j(this).blur();
	});
 
	//When mouse rolls over
	$j(sa).mouseover(function(){
		$j(this).stop().animate({height:'150px'},{queue:false, duration:600, easing: 'easeOutBounce'})
	});
 
	//When mouse is removed
	$j(sa).mouseout(function(){
		$j(this).stop().animate({height:'50px'},{queue:false, duration:600, easing: 'easeOutBounce'})
	});
 
});

<ul id="buttons">
	<li><a href="#">الرئيسية</a>
	<li><a href="#">عني</a></li>
	<li><a href="#">عن المدونة</a></li>
	<li><a href="#">راسلني</a></li>
</ul>

16 من التعليقات لـ “إصنع قائمة أزرار منزلقة بإستخدام jQuery”

1. ياسين قال:

   8 سبتمبر 2009 عند 3:46 ص

   قائمة مميز و سهلة في نفس الوقت , شكرا لك و بأنتضار جديدك خصوصا في Css و jQuery .

   رد
2. أزهار قلبي قال:

   8 سبتمبر 2009 عند 6:08 ص

   تقنية القوائم المنزلقة رائعة جدا.

   جزاك الله كل خير على هذا الشرح.

   رد
3. Ahmed قال:

   8 سبتمبر 2009 عند 10:36 ص

   جميلة جداً والله يخليك وتزودنا بالجديد ديماً
   جزاك الله خيراً

   رد
4. nizaradil قال:

   9 سبتمبر 2009 عند 12:39 ص

   فؤاد بدوي, قائمة رائعة بالفعل … في انتظار المزيد من هذا النوع من الموضوعات

   

   رد
5. sharm قال:

   11 سبتمبر 2009 عند 4:23 م

   موضوع قيم و رائع

   شكرا

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

   27 سبتمبر 2009 عند 3:02 م

   السلام عليكم

   شرح وطريقة أكثر من رائعه بارك الله فيك

   لقد أستخدمتها في موقع أحد عملائي
   http://www.b9mati.com/

   جزاك الله خير طريقة أكثر من رائعه

   رد
7. 3rb-free.co.cc قال:

   15 أكتوبر 2009 عند 12:44 م

   ما هى الترويسة ؟

   رد
8. ماجد الحربي قال:

   23 أكتوبر 2009 عند 3:34 م

   شرح اكثر من رائع
   تم التجربه بنجاح

   رد
9. رضا قال:

   19 نوفمبر 2009 عند 12:42 ص

   راائــع ، أعجبني كثييرا ..
   تسلموو ..

   رد
10. أبو عمر قال:

    29 نوفمبر 2009 عند 11:10 ص

    مشكور بارك الله فيك

    رد
11. أبو عمر قال:

    1 ديسمبر 2009 عند 1:18 ص

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

    رد
12. غادهـ قال:

    4 ديسمبر 2009 عند 1:30 ص

    ماشاءالله عليك

    المنزلقه افضل للمدون واحسن شكل

    يعطيك العافيه

    رد
13. توب عرب قال:

    27 يناير 2010 عند 10:15 م

    جزاك الله كل خير

    رد
14. ! هاوي ! قال:

    6 مارس 2010 عند 12:26 ص

    السلام عليكم

    كيفك اخي المعاصر ان شاء الله تمام …

    حبيبي ابي شرح كيف اسوي القائمة باستايل منتدى ياليت تعطيني تفصيل لاني حاولت بس مازبطت

    اتمنى منك عزيزي الاجابه

    اسف ع الازعاج

    لك احترامي

    اخوك هاوي

    رد
15. أميرة قال:

    8 مارس 2010 عند 12:43 م

    منتهى الروعة والجمال والاناقة ماشاء الله
    لو حبيت اعمل القائمة في مجلة ومكتفية بفايل style.css
    راح اقدر برأيكم

    بصراحة تصاميمك ابداع الله يحفظك

    رد
16. ahmed قال:

    9 مايو 2010 عند 10:22 ص

    السلام عليكم
    شكرا على الشرح
    اريد ان اسأل كيف لي عندما امر فوق القوائم يتحرك المحتوى الذي تحت القوائم
    اريد عندما ينزلق احد خيار القوام يطغى على الذي تحته من محتوى
    المثال : http://www.b9mati.com/
    لاحظ ان في هذا الموقع عند ازلاق احد القوائم ينزلق بدون تحرك اي محتوى ويظهر فوق الصورة الموجودة في المثال.

    رد