منو جاوااسکریپت با افکت های بصری و انیمیشن


منو جاواسکریپت

TinyDropdown2 یک منوی ساخته شده با جاوااسکریپت است که با وجود حجم بسیار کم و سبک برای وب سایت ها ، جلوه های بصری زیبایی را نیز در خود جای داده است . حجم کلی این منو فقط 1.7kb است که با استفاده از امکان gzip میتوانید آنرا به حجم 0.75kb کاهش دهید . این منو کاملا" پایا و مستحکم در برابر مرورگرها و حالت های مختلف و با سرعت مناسب توسعه داده شده است و امکاناتی مانند باز و بسته شدن به صورت انیمیشن ، تنظیم سرعت ، تنظیم زمان تاخیر جمع شدن ، محو شدن و ... را در اختیار شما قرار میدهد . از نظر ظاهری کدهای CSS آن کاملا" قابل انعطاف نوشته شده است و میتوانید با کمی تغییر ، منوی مناسب با وب سایت های خود را بسازید . حتی می توانید در صورت دلخواه با تغییراتی آنرا به حالت عمودی نیز در آورید . این منو کاملا" در قالب یک تابع ساخته شده است و کافیست برای اجرا نام تابع را فراخوانی کرده و تنظیمات را به صورت پارامتر به آن ارسال نمایید که در زیر یک نمونه فراخوانی را مشاهده میکنید :

 

var dropdown=new TINY.dropdown.init("dropdown", {id:'menu', active:'menuhover', fade:true, slide:true, timeout:200});

در زیر به شرح پارامترها ، نوع آنها و مقدار پیش فرض میپردازیم . بنابراین در هر خط ترتیب این موارد به اینصورت است :

(مقدار پیش فرض – ( نوع ) توضیح – نام پارامتر )

id - ID of the navigation (string - required) - ''
active - CSS class for active state (string) - ''
fade - toggle fade tween (bool) - true
slide - toggle slide tween (bool) - true
speed- toggle slide tween (1-9) - 5
timeout - time in milliseconds to pause before hide on rollout (int) - 200


دمو منو جاوااسکریپت
دانلود منو جاوااسکریپت

این منو در مرورگرهای +IE7 ، Chrome ، Opera ، Firefox و Safari آزمایش شده است . استفاده از این منو برای وب سایت های شخصی و یا تجاری تحت لیسانس creative commons license آزاد می باشد .

نظرات (6) -

  • محمد

    09/04/1390 06:15:42 ق.ظ | پاسخ به این نظر

    سلام
    متشکریم برای این منوی زیبا
    اگه ممکنه بفرمائید چگونه به چپ باز بشن منوها

    • Admin

      09/04/1390 08:15:27 ق.ظ | پاسخ به این نظر

      فایل CSS رو بازکنید و کدهای مربوط به قسمت موردنظر رو پیدا کنید و با دستورات راست به چپ کردن مثل directin و float و text-align و ... تغیرات لازم رو اعمال کنید.

  • مرتضی

    08/10/1391 06:44:51 ب.ظ | پاسخ به این نظر

    لطفا آموزش قرار دادن منوی جاوااسکریپت در وردپرس و جوملا را قرار دهید

  • N2

    08/21/1393 06:09:28 ب.ظ | پاسخ به این نظر

    سلام
    راستی این لینک دانلودش خرابه اگه امکان داره اونو به ایمیلم ارسال نمایی .
    منتظر هستم.

Loading