تطبيق متميز لعمل قوائم تتمدد بشكل منزلق عند مرور الماوس .. بإستخدام مكتبة jQuery .. يمكنك رؤية نماذج لمواقع إستخدمت فيها التطبيق بزيارة مدونة صوت الفؤاد أو مدونة عبدالله السعيد أو شاهد هذا الديمو ..
طريقة الإستخدام :
- قم بتحميل التطبيق من هذه الصفحة
- اضف الكود التالي في ترويسه صفحة Html الخاصه بك : 1234567<link rel="stylesheet" href="YourPath/animated-menu.css"/><script src="http://jqueryjs.googlecode.com/files/jquery-1.3.js" type="text/javascript"></script><script src="YourPath/js/jquery.easing.1.3.js" type="text/javascript"></script><script src="YourPath/animated-menu.js" type="text/javascript"></script>
لا تنسى تغيير مسار الملفات لما يناسب موقعك .. في الكود أعلاه يتم إستدعاء مكتبة jQuery من على جوجل كود .. إذا أردت يمكنك حفظة ورفعه على موقعك و تغيير المسار الخاص به
- في جسم الصفحة Body .. أضف القائمة الخاصه بك .. 12345678<ul><li><a href="#">الرئيسية</a><li><a href="#">عني</a></li><li><a href="#">عن المدونة</a></li><li><a href="#">راسلني</a></li></ul>
- يمكنك التحكم في إرتفاع القائمة عند مرور الماوس بتغيير قيمة height في الدالة mouseover و تغيير إرتفاع القائمة بعد إبعاد الماوس بتغيير قيمة height في الدالة mouseout و التحكم في سرعه الإنزلاق عند مرور أو إبعاد الماوس بتغيير قيمة duration في نفس الدالتين في الكود أعلاه الموجود في ملف animated-menu
حل التعارض :
إذا حدث تعارض بين هذا التطبيق و أي تطبيق أخر يستخدم مكتبة أخرى غير jQuery .. فراجع هذه التدوينة أو قم بتحرير ملف animated-menu.js و إستبدل محتوياته بالتالي :
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | 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'}) }); }); |
التخصيص :
عند إستخدامك لهذا التطبيق فإن كل Li في الصفحة سيُطبق عليها التأثير وهذا ليس عملياً وغير مرغوب فيه .. فالمطلوب هو تطبيق التأثير على قائمة بحد ذاتها .. إذا أردت ذلك يُمكنك تحرير ملف animated-menu و إستبدل محتوياته بالتالي ..
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | 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'}) }); }); |
الأن سيتم التطبيق على كل Li الموجوده داخل العنصر المعرف بـ ID خاص وهو buttons قد يكون هذا العنصر الحاوي Div او Ul .. كالتالي :
| 1 2 3 4 5 6 7 8 | <ul id="buttons"> <li><a href="#">الرئيسية</a> <li><a href="#">عني</a></li> <li><a href="#">عن المدونة</a></li> <li><a href="#">راسلني</a></li> </ul> |
هذا كل شئ .. لا تنسى أن تشاركنا برابط موقعك إذا أستخدمت فيه التطبيق ^_^
قائمة مميز و سهلة في نفس الوقت , شكرا لك و بأنتضار جديدك خصوصا في Css و jQuery .
تقنية القوائم المنزلقة رائعة جدا.
جزاك الله كل خير على هذا الشرح.
جميلة جداً والله يخليك وتزودنا بالجديد ديماً
جزاك الله خيراً
فؤاد بدوي, قائمة رائعة بالفعل … في انتظار المزيد من هذا النوع من الموضوعات
:)
موضوع قيم و رائع
شكرا
السلام عليكم
شرح وطريقة أكثر من رائعه بارك الله فيك
لقد أستخدمتها في موقع أحد عملائي
http://www.b9mati.com/
جزاك الله خير طريقة أكثر من رائعه
ما هى الترويسة ؟
شرح اكثر من رائع
تم التجربه بنجاح
راائــع ، أعجبني كثييرا ..
تسلموو ..
مشكور بارك الله فيك
بارك الله فيك رائع جدا
تم التطبيق ولكن واجهت مشكلة أن القوائم المنزلقة تنزلق للأسفل وينزلق معها الموقع كامل للأسف وما رئيته في الأمثله انها تنزلق من فوق محتويات الموقع الأخرى.
ماشاءالله عليك
المنزلقه افضل للمدون واحسن شكل
يعطيك العافيه
جزاك الله كل خير
السلام عليكم
كيفك اخي المعاصر ان شاء الله تمام …
حبيبي ابي شرح كيف اسوي القائمة باستايل منتدى ياليت تعطيني تفصيل لاني حاولت بس مازبطت
اتمنى منك عزيزي الاجابه
اسف ع الازعاج
لك احترامي
اخوك هاوي
منتهى الروعة والجمال والاناقة ماشاء الله
لو حبيت اعمل القائمة في مجلة ومكتفية بفايل style.css
راح اقدر برأيكم
بصراحة تصاميمك ابداع الله يحفظك
السلام عليكم
شكرا على الشرح
اريد ان اسأل كيف لي عندما امر فوق القوائم يتحرك المحتوى الذي تحت القوائم
اريد عندما ينزلق احد خيار القوام يطغى على الذي تحته من محتوى
المثال : http://www.b9mati.com/
لاحظ ان في هذا الموقع عند ازلاق احد القوائم ينزلق بدون تحرك اي محتوى ويظهر فوق الصورة الموجودة في المثال.
اخي المعاصر
السلام عليكم ورحمة الله وبركاته
اولا اشكرك على الشرك الاكثر من رائع ..
ثانيا لدي استفسار ان شاء الله يكون بسيط جدا …
لدي كود jQuery وهو مشابه في عمله بما تفضلت به الى حد كبير جدا اضفت اسفل منه ملف swf وهما يعملان دون اي مشاكل، الا انه …
عند انسدال القائمه تنسدل خلف الفلاش بحيت لا يمكن الاختيار من القائمة، وما نريده ان تنسدل القائمه امام swf وليس خلفه.
شاكر لك مجهودك الطيب
اشكرك اخي الكريم على هذا الوضوع
شكراً على الشرح الرائع, بارك الله في جهدك الكريم