منوئ آکاردئونی javaScript

شنبه, ۲۳ام آذر , ۱۳۸۷ | ۶ دیدگاه

امروز قصد دارم اولین پست درباره javascript رو بنویسم، دلیل اینکه تا الان فعالیت تو بعضی از بخشها کم بوده به خاطر استقبال اکثریت کاربران سایت از PhotoShop و بعد از اون فلش بوده و در صورتیکه دوستان در باره هر بخشی اظهار علاقه مندی بیشتری کنن مسلما اون بخش فعالتر خواهد بود.

اول از همه باید ببینید که میخواهیم چه چیزی بسازیم، پس به صفحه دمو بروید و نتیجه کار را ببینید :

از این منوی افق آکاردئونی میتوان به جای منو یا presentation هم استفاده نموده و البته برای یک بنر تبلیغات هم کاربرد دارد.

کار اصلی پشت صحنه را فایل slidemenu.js انجام میدهد و کافیست که ما به تعداد اجزای منویی که لازم داریم عکسهای هم اندازه و هم سان در فولدر images آماده کنیم و سپس چند خط کد که با استفاده از unOrdered List در سورس صفحه اصلی و به این شکل اضافه نماییم :

  1. <ul id=“sm” class=“sm”>
  2. <li><img src=“images/1.gif” alt=“” /></li>
  3. <li><img src=“images/2.gif” alt=“” /></li>
  4. <li><img src=“images/3.gif” alt=“” /></li>
  5. <li><img src=“images/4.gif” alt=“” /></li>
  6. </ul>

بعد از اضافه کردن این چند خط کافیست که تابع slidemenu.js را فراخوانی کنیم تا افکت فوق اجرا شود :

slideMenu.build(‘sm’,200,10,10,1)

حالا شما باید بدانید که این دستور آخر که تابع مارا فراخوانی کرد شامل چه پارامتر هاییست

پارامتر اول id لیست Unorderd List ماست که همانطور که در بالا هم مشاهده میکنید id=“sm” مقدار دهی شده است و UI ما  توسط آن به تابع ما نسبت داده میشود. پارامتر دوم عرض منوهای ما خواهد بود و دقت کنید که این مقدار باید از عرض عکسهایی که در پس زمینه منوها قرار دادیم کوچکتر باشد.  پارامتر سوم TimeOut میباشد و گویای این است که function ما با پی تاخیر و سرعتی فراخوانی شود. چهارمین پارامتر سرعت باز و بسته شدن منوها و Slide شدن آنهاست و سریعترین سرعت معادل عدد ۱ میباشد. آخرین پارامتر که بصورت اختیاری استفاده میشود برای تعیین این است که وقتی منو Load شد کدام قسمت اول باشد (بصورت پیش فرض) .

اسکریپت فوق در اکثر بروزرها تست شده و جواب گرفته است. در انتها میتوانید سورس این اسکریپت را دانلود نمایید .

Be Sociable, Share!


۶ دیدگاه


  1. بهنام
    ۱۳ دی ۱۳۸۸

    سلام دوست عزیز

    برای اینکه منو را در dreamweaver فراخوانی کنم لطف میکنید نحوه فراخوانی و اجرا را راهنمایی کنید.

    با سپاس




  2. ارشیا
    ۸ اسفند ۱۳۸۸

    سلام، من این کد رو در asp.net در صفحه Master Page قرار می دهم Error می دهد اما در یک صفحه جداگانه خطایی صادر نمی کند. لطفاً راهنماییم کنید.




  3. بهلول
    ۲۷ مرداد ۱۳۸۹

    سلام
    ممنون بابت آموزش خوبتون امیدوارم مثالهای عملی بیش تری تو سایت بذارین
    با تشکر




  4. شمه
    ۴ آذر ۱۳۸۹

    سلام اگه میشه با زبان ساده ر توضیح بدهید




  5. arman
    ۲۰ آذر ۱۳۸۹

    ok




  6. سعيد
    ۲ آذر ۱۳۹۰

    بسیار عالی بود خیلی متشکرم ، زیباترین و کاملترین و آموزنده ترین سایتی که تا به حال دیده ام ،لطفاً بیشتر از این منوها در سایتتون بزارین

    بازم سپاسگذارم



دیدگاه خود را بنویسید