illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

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



  آیا می دانید میانگین رضایت دانشجویان سون لرن از دوره ها، بیش از 94% می باشد!

bigSlide : پلاگین jQuery برای قرار دادن منو در کنار سایت

6 3762 ۱۴ دی ۹۳

در این مطلب میخوام یک پلاگین jQuery بنام bigSlide رو خدمت شما معرفی کنم و اونو آموزش بدم.

با استفاده از این پلاگین میتونین به راحتی هر چه تمامتر یک آیکون قرار بدین که با کلیک بر روی اون یک منو از کنار صفحه ظاهر بشه و با کلیک مجدد پنهان بشه. بیشتر بدرد طراحی های Responsive میخوره.

میبینید که هر وقت روی اون آیکون کلیک میکنید ، اون منو از سمت چپ با یک حالت انیمیشنی ظاهر میشه و با کلیک مجدد پنهان میشه. این منو ، محتویات صفحه رو هم جابجا میکنه ، یعنی همونقدر که منو به سمت راست منتقل میشه ، همونقدر هم محتویات صفحه به سمت راست انتقال پیدا میکنه.

نحوه استفاده :

ابتدا باید به صفحه مربوطه در سایت Github برید و فایلهای مورد نظر رو دانلود کنید. در این مطلب ما به jQuery و bigSlide.min.js نیاز داریم. من این فایلهارو در انتهای این مطلب قرار دادم و میتونین از اونا استفاده کنید.

حالا یه فایل بنام index.html بسازید و کدهای زیر رو درونش قرار بدین :

میبینید که تا اینجا فایلهای مورد نظر رو وارد کردیم. همچنین کدهای HTML و CSS مورد نظر رو نوشتیم. در پایان هم یک تگ script قرار دادیم ، که کدهای خودمون رو درونش بنویسیم.

اگر تا همینجا در مرورگر مشاهده کنید ، تصویری همانند تصویر زیر رو خواهید دید :

bigslide1

میبینید که اگه روی آیکون کلیک کنیم ، هیچ اتفاقی نمیوفته. برای قرار دادن این آیکون من از هیچ تصویری استفاده نکردم ، بلکه از کد HTML معادل اون استفاده کردم ، بصورت زیر :

کد  ;9776#&  رو اگر قرار بدین ، همچین شکلی رو برای ما بوجود میاره. بعد از اون باید به اون کلاس menu-link رو نسبت بدین. با این کار به پلاگین میگیم که با زدن بر روی این لینک ، منو باز و بسته بشه. باید این لینک و محتویاتی که میخواید در زمانی که منو ظاهر میشه ، جابجا بشوند رو در یک div قرار بدین و کلاسهای wrap و push رو به اون نسبت بدین. به این صورت :

حالا وقتی که منو باز بشه ، این div هم به همون مقدار جابجا میشه.

حالا برای ساخت منو ، باید از ul استفاده کنید و منوی مورد نظر خودتون رو بسازید و موارد مورد نظرتون رو درونش قرار بدین. بعد از اون باید ul رو درون یک div قرار بدین و کلاس panel رو به اون نسبت بدین. بصورت زیر :

کد بالا که توضیح خاصی نداره ، فقط اگه دقت کنید یک خصوصیت role وجود داره که مقدار اون برابر با navigation قرار گرفته. هدف از این Attribute معناگرایی ( Semantic ) هست. برای مطالعه بیشتر میتونین به این لینک برید.

خب حالا باید کدهای CSS  زیر رو اضافه کنیم :

اینکارو که کنید ، یک مقدار ظاهر عوض میشه ، ولی هنوز کدهای Javascript رو قرار ندادیم. کدهای CSS بالا حتما باید وجود داشته باشن ، این رو هم بگم که خودتون باید کدهایی رو هم به سلیقه ی خودتون اضافه کنید. مثل کدهای اول مطلب که من قرار دادم.

حالا نوبت به استفاده از پلاگین میرسه. برای اینکار کدهای زیر رو در تگ script نهایی قرار بدین :

میبینید که در ابتدا المنتی که کلاس اون menu-link هست رو انتخاب کردیم و تابع bigSlide رو برای اون صدا زدیم. اگه هیچ چیزی در تابع قرار ندهیم ، مقادیر پیش فرض اعمال میشه و کار تمومه. ولی من سه تا از مهمترین ویژگی های اون رو براتون توضیح میدم :

  • side : میتونین مشخص کنین که ، منو در سمت چپ باشه یا راست. دو مقدار left و right رو میگیره و مقدار پیشفرض اون left هست
  • menuWidth : با استفاده از این ویژگی میتونین عرض منو رو کم و زیاد کنین.
  • speed : با استفاده از این ویژگی میتونین مدت باز یا بسته شدن منو رو مشخص کنید که بر حسب میلی ثانیه میباشد.

برای مطالعه بیشتر میتونین به این لینک مراجعه کنید.

امیدوارم خوشتون اومده باشه.

موفق باشید. یا علی

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها 6 دیدگاه برای این مطلب ارسال شده است.

  • ‏‏
    محمد(۱۴ دی ۱۳۹۳)

    ممنون کد زیبایی بود
    فقط اگه بخوایم که دکمه منو به صورت ثابت باشه, یعنی اونم همراه صفحه اسکرول بشه باید چیکار کنیم؟

  • ‏‏

    ممنون خوب بود…

  • ارسال دیدگاه

    ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

    :: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
    برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
    عضویت/ ورود سریع با :
    در حال اتصال ...

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram