الأرشيف ٢٠٠٨ - ٢٠١٢

إصنع قائمة أزرار منزلقة بإستخدام jQuery

أوه .. هذا المقال قديم ... ممممم قديم جداً

smooth-animatedتطبيق متميز لعمل قوائم تتمدد بشكل منزلق عند مرور الماوس .. بإستخدام مكتبة jQuery .. يمكنك رؤية نماذج لمواقع إستخدمت فيها التطبيق بزيارة  مدونة صوت الفؤاد أو مدونة عبدالله السعيد أو شاهد هذا الديمو ..


طريقة الإستخدام :

  • قم بتحميل التطبيق من هذه الصفحة
  • اضف الكود التالي في ترويسه صفحة Html الخاصه بك :

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

  • في جسم الصفحة Body .. أضف القائمة الخاصه بك ..

  • يمكنك التحكم في إرتفاع القائمة عند مرور الماوس بتغيير قيمة height في الدالة mouseover و تغيير إرتفاع القائمة بعد إبعاد الماوس بتغيير قيمة height في الدالة mouseout و التحكم في سرعه الإنزلاق عند مرور أو إبعاد الماوس بتغيير قيمة duration في نفس الدالتين في الكود أعلاه الموجود في ملف animated-menu

حل التعارض :
إذا حدث تعارض بين هذا التطبيق و أي تطبيق أخر يستخدم مكتبة أخرى غير jQuery ..  فراجع هذه التدوينة أو قم بتحرير ملف animated-menu.js و إستبدل محتوياته بالتالي :

التخصيص :
عند إستخدامك لهذا التطبيق فإن كل Li في الصفحة سيُطبق عليها التأثير وهذا ليس عملياً وغير مرغوب فيه .. فالمطلوب هو تطبيق التأثير على قائمة بحد ذاتها .. إذا أردت ذلك يُمكنك تحرير ملف animated-menu و إستبدل محتوياته بالتالي ..

الأن سيتم التطبيق على كل Li الموجوده داخل العنصر المعرف بـ ID خاص وهو buttons قد يكون هذا العنصر الحاوي Div او Ul .. كالتالي :

هذا كل شئ .. لا تنسى أن تشاركنا برابط موقعك إذا أستخدمت فيه التطبيق ^_^

الوسوم

‫۱۹ تعليقات

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

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

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

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

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

    اسف ع الازعاج

    لك احترامي

    اخوك هاوي

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

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

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

  5. اخي المعاصر

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

    اولا اشكرك على الشرك الاكثر من رائع ..

    ثانيا لدي استفسار ان شاء الله يكون بسيط جدا …

    لدي كود jQuery وهو مشابه في عمله بما تفضلت به الى حد كبير جدا اضفت اسفل منه ملف swf وهما يعملان دون اي مشاكل، الا انه …

    عند انسدال القائمه تنسدل خلف الفلاش بحيت لا يمكن الاختيار من القائمة، وما نريده ان تنسدل القائمه امام swf وليس خلفه.

    شاكر لك مجهودك الطيب

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

إقرأ أيضاً

زر الذهاب إلى الأعلى
إغلاق