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

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



  آیا می دانید با دوره های آموزشی سون لرن می توانید از 0 تا 100 طراحی وب را در منزل فراگیرید!

superFish : پلاگین jQuery برای ساخت منوهای چند سطحی

13 3525 ۲۶ آذر ۹۳

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

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

superfish

 

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

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

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

میبینید که تا اینجا فایلهای مورد نظر رو وارد کردیم. در انتهای قسمت body هم یک تگ باز و بسته ی script قرار دادیم که میتونیم کدهای مورد نظر رو درونش بنویسیم. در بالا یک منوی چند سطحی ایجاد کردیم ، اگر تا اینجا در مرورگر مشاهده کنید ، چیزی مثل تصویر پایین رو خواهید دید :

Sf1

میبینید که استایل پیش فرض مرورگر به منو اعمال شده و جالب نیس. حالا کافیه که به اون ul پدر ( Parent ) کلاس sf-menu رو نسبت بدیم. با این کار استایلهای CSS به منوی ما اعمال میشه و شکلی شبیه به زیر رو خواهید دید:

sf2

بهمین سادگی. تا اینجا فقط با CSS منو رو درست کردیم ، حالا با استفاده از پلاگین jquery میتونیم چنتا چیز بهش اضافه کنیم که بهتر نشون داده بشه. برای اینکار باید در اون تگ Script آخر کدهای زیر رو قرار بدین :

میبینید که تابع superfish رو برای همون ul صدا زدیم. با این کار دو ویژگی بارز به منو اضافه میشه. یکی اینکه عناصری که زیرمجموعه دارن ، یک فلش در کنارشون نشون داده میشه و دیگری اینکه ، منوها با حالت انیمیشنی باز و بسته میشن. بصورت زیر :

sf3

همچنین میتونین تعدادی خصوصیت رو به تابع superfish پاس بدین ، که من دو تاشو براتون توضیح میدم :

  • delay : با استفاده از این خصوصیت میتونین مشخص کنید که منو چقد بعد از خارج شدن ماوس از روی عنصر پدر مخفی بشه. باید بصورت عددی مقدار بهش بدین. مثلا 2000 برابر با 2 ثانیه هست.
  • cssArrows : با استفاده از این خصوصیت میتونین مشخص کنید که اون فلشها نشون داده بشن یا نه. میتونین دو مقدار false یا true رو بهش نسبت بدین.

اگه دقت کرده باشین ، هر زمان با سرعت ماوستون رو بر روی li که زیر مجموعه داره میبرین ، منو باز میشه. این خیلی جالب نیس. بنابراین میتونین از فایل hoverIntent.js استفاده کنین که این مشکل رو رفع میکنه. حالا اگر ماوستون رو به سرعت از روی li عبور بدین ، باز نمیشه و زمانی که یه مدت کوتاه روی اون بمونین باز میشه. برای اضافه کردنش بصورت زیر عمل کنید :

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

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

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

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

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

  • ‏‏
    banooyemah(۵ اسفند ۱۳۹۳)

    با درود و سپاس

    لطفا من را راهنمایی بفرمایید که چطور اکتیو بودن یک منو را انجام دهم بطور مثال روی درباره ما که کلیک میشه و وارد آن صفحه شد منوی درباره ما با سایر منوها تفاوت کند. من از گزینه a:active استفاده کردم ولی استایل آن را به کل منوها میدهد. لطفا راهنمایی کنید.

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

    http://givco.mahanweb.ir

    • ‏‏
      محمد اسفندیاری(۵ اسفند ۱۳۹۳)

      برای اینکار نمیشه با CSS تنها عمل کرد باید از Javascript و یا PHP هم کمک بگیرید
      باید یک نشونه ای در هر صفحه ی جدا قرار بدین و با استفاده از Javascript چک بشه که ، اگه به اون نشونه رسیدیم ، یک سری استایل به منو اعمال بشه
      موفق باشید

  • ‏‏

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

  • ‏‏
    محمد اسفندیاری(۱۰ اسفند ۱۳۹۳)

    دوست عزیز برای اینم دقیقا باید همونکار رو انجام بدین
    ولی در مقیاس کوچکتر

  • ‏‏

    میشه بیشتر کمکم کنید
    با استایل یا جی کوئری؟
    میشه کدشو بهم بگید.
    برای لینک زیر میخوام
    http://givco.mahanweb.ir/

    • ‏‏
      محمد اسفندیاری(۱۲ اسفند ۱۳۹۳)

      بنظر من از jquery استفاده کنید.
      اول بیاد به زیر منوهای منوی مورد نظرتون یک کلاس نسبت بدین
      حالا بیاد با استفاده از jquery ، مثلا بگید که زمانی که روی این زیر منوها با این کلاس ها hover شد ، پدرشون ( همون منو ) به رنگ متفاوتی در بیاد
      امیدوارم فهمیده باشین

      • ‏‏

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

  • ‏‏

    میخوای فایلامو بفرستم

  • ‏‏

    سلام
    خیلی ممنون مرسییییییی
    درستش کردم
    دوباره مزاحمتون میشم
    ممنون 😛

  • ‏‏
    فاروق(۵ تیر ۱۳۹۴)

    با سلام
    مهندس من منوهای داینامیک ساختم اما زیر منو که زیاد وارد میکنم از صفحه بیرون میزنه میخوام کاری کنم که وقتی میخاست زیر منو از صفحه بیرون بزنه به سمت مخالف باز بشه ممنون میشم کمکم کنید خیلی کارم گیره :sad:

    • ‏‏
      محمد اسفندیاری(۵ تیر ۱۳۹۴)

      سلام دوست عزیز
      ببینید اگر منو ارتفاعش زیاد بشه ، صفحه اسکرول میخوره و میتونین به همه زیر منو ها دسترسی داشته باشین…..به نظر من میتونین تعداد زیر منو ها رو کمتر کنید ، این بهترین راهه
      یا زیر منو ها رو در منو های بیشتری بخش کنید تا ارتفاعشون کمتر بشه
      فک نکنم بشه به سمت مخالف باز کرد

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

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

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

    ورود به سایت

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

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

    عبارت :
    7LearnTelegram